Sign In Register

How can we help you today?

Start a new topic

How to get modal form target be same modal

So I have a form snippet that is 'launched' via a gs-link/button with a modal target...


<gs-link snippet="item_edit?action=view" target="modal"><button>Create New</button></gs-link>


the item_edit snippet (form) launches properly in a modal and all is well

However - I have ZERO clue what to put in the target for the <gs-form> tag so that any form errors can be re-rendered in that same modal.  No matter what I try - either nothing happens - or a new modal renders on top of the old one.


  

{{#if form.updated}}
    <gs-modal-close></gs-modal-close>
    <gs-snippet snippet="item_view"></gs-snippet>
{{else}}

<gs-row>
   <gs-title-block title={{#if form.item}}"Edit Item"{{else}}"Create New Item"{{/if}} padding="10" margin="0">
   <gs-form snippet="item_edit?action=save" target="?????" >
      <gs-row>
         <gs-col width="12">Name<br/>
            <input type="text" name="name" required  value="{{form.item.name}}"/>
         </gs-col>
      </gs-row>
      ...
      <!-- Submit Button -->
      <gs-row>
         <gs-col width="7">
            {{#if form.updated}}
            {{#if form.success}}
            <gs-alert type="success" message="Saved!"></gs-alert>
            {{else}}
            <gs-alert type="error" message="{{form.error}}"></gs-alert>
            {{/if}}
            {{/if}}
         </gs-col>
         <gs-col width="4">
            <gs-submit>Save Changes</gs-submit>
         </gs-col>
      </gs-row>
   </gs-form>
   </gs-title-block><!-- Title Block Ends -->
</gs-row>
<script>
   setTimeout(function(){
       $( ".datepicker" ).datepicker({
           dateFormat: "yy-mm-dd",
       });
   }, 500);
</script>
{{/if}}

   

Spark.setScriptData("form", SnippetProcessor(Spark.getData().scriptData))

function SnippetProcessor(data) {

    var form = {};

    switch (data.action) {
        case "view":
            return view(data);
        case "save":
            save(data);
            return view(data);
    }

    function view(data) {
        if (data.itemId != null) {
            form.item = goFindTheSeasonInMongo();
        } else {
            form.item = data.item;
        }
        return form;
    }

    function save(data) {
        form.updated = true;
        if (data.itemId && data.itemId !== "") {
            updateThisItemInMongo();
        } else {
            var result = AddNewItemInMongo();
            if (result) {
                // errors
                form.error = result[0];
                form.success = false;
            } else {
                form.success = true;
            }
        }
    }
}

 Any help would be appreciated....


1 person has this question

if it helps to ignore my above crappy example - can anyone point me towards an example of having a form in a modal that can submit/show errors as well as close itself when successful 'save'?


Hi Jeff,


Apologies for the delayed response I can see Sean has replied to your ticket so I know you are currently going through the linked tutorial.


Regards,

Liam

Bump! What linked tutorial? What was the answer?

OK the answer is fix your bugs, then it just works :) Target is the same modal as you popped up before.

Login to post a comment