Creating a Grail Jquery Modal Window and Form post

2019-02-26 09:37发布

站内问答 / jQuery
1649 2 6

I have the following code : 

<body>
        <div id="dialog-form" title="Create a new Comment">
        <form>
        <fieldset>
        <label for="name">Enter your Comment Please </label>
        <textarea rows="6" cols="2" name="commentArea" id="commentArea" ></textarea>
        </fieldset>
         </form>
        </div>
        <button id="create-user">Create new user</button>
</body>

and my Modal Window using jquery-UI

     <g:javascript>
      $(function(){
    $("#dialog-form").dialog ({
    autoOpen:false,
    height:300,
    resizable:false,
    width:350,
    modal:true,
    buttons: {
    "Attach Comment": function() {
    alert('assum it already submitted'); // ? ? ? this time what can i add to post a form to  a controller attachComments with commentArea posted.

    $(this).dialog("close");
    },
    Cancel: function() {
    $(this).dialog("close");
    }
    },
    close: function() {
    alert(Form is cloased!); 
    $(this).dialog("close");
    }
    });

   $( "#create-user" )
  .button()
  .click(function() {
    $( "#dialog-form" ).dialog( "open" );
  });

         }); 
</g:javascript>

The above code draws my modal window but how can i post the form to attachCommentController and receive responses back to to show errors on modal window?

2条回答
相关推荐>>
2楼-- · 2019-02-26 10:30

You can Use remote form or remote links, or ajax calls to interact with the controllers and you will be able to get the response back to your view, you can receive it in some other div.

for example it can be done through remoteForm like below:

On your view you can use remote form like:

    <g:formRemote  
         name="productForm"
        url="[controller: 'attachCommentController', action:'save']"
        update="resultsDiv"
                >
       <fieldset>
        <label for="name">Enter your Comment Please </label>
        <textarea rows="6" cols="2" name="commentArea" id="commentArea" ></textarea>
    <inuput type="submit" name="submit" value="Save Value"/>
        </fieldset>
    </g:formRemote>
   <div id="resultsDiv">You will receive your response here</div>

This way you will be able to get the response back to your modal window.

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
3楼-- · 2019-02-26 10:30

Ok Using implementation case 1 is to use ajax and display error or success on the opened dialog :

So , i have added the following ajax code on above code section ...

"Attach Comment": function() {
        //do form posting here
        $.ajax({ 
        context: $(this),
        url:"${resource()}"+"/issue/attachComment",
        type:"POST",
        data:{"comment":$('#commentArea').val(),"id":$("#selectedIssueInstanceId").val()},
        success:function(data){
        if(data.success)
        {
        var tobeAppendeID = $("#selectedIssueInstanceId").val();
        $('#'+'comment_'+tobeAppendeID).val(data.newComment);
        $( this ).dialog( "close" );
        }
        else
        {
        $('#error-message').addClass('ui-state-error ui-corner-all');
        $("#error-message").html(data.message).show()
        $(this).dialog("close");
        }
        $( this ).dialog( "close" );
        }
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)