Question

我有以下代码：

<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>

和我的模态窗口使用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>

上面的代码绘制了我的模态窗口但是如何将表单发布到attachCommentController并接收响应以显示模态窗口上的错误？

Answer 1

您可以使用远程表单或远程链接或ajax调用与控制器交互，您将能够将响应返回到您的视图，您可以在其他div中接收它。

例如，它可以通过remoteForm完成，如下所示：

在您的视图中，您可以使用以下远程格式：

    <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>

通过这种方式，您可以将响应返回到模态窗口。

Answer 2

Ok使用实现案例1是在打开的对话框中使用ajax并显示错误或成功：

所以，我在上面的代码部分添加了以下ajax代码......

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

使用ajax创建Grail Jquery模式窗口和表单发布？

2 个答案: