Search code examples
jquery-uijquerygrailsgrails-plugingrails-controller

Creating a Grail Jquery Modal Window and Form posting with ajax?

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?

Solution

  • 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" );
        }