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

【问题标题】：Creating a Grail Jquery Modal Window and Form posting with ajax?使用 ajax 创建 Grail Jquery 模态窗口和表单发布？
【发布时间】：2013-06-20 14:40:15
【问题描述】：

我有以下代码：

<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 并接收回复以在模态窗口上显示错误？

【问题讨论】：

您需要使用 ajax 向服务器发出请求，而无需刷新浏览器。然后，根据您返回的响应，关闭模式或显示错误。

标签： jquery-ui jquery grails grails-plugin grails-controller

【解决方案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>

这样您就可以将响应返回到您的模态窗口。

【讨论】：

cool@ 如何从模态窗口“附加评论”中传递控制：函数到的执行？
我没有正确理解问题，请您简要介绍一下。
好吧，假设我按下了附加评论按钮 --> 那么我如何整合你的表单和对话框点击事件来发布你的表单:)
:) 仍然不确定这个问题，可能是我在想别的东西，我得到的是，你想将提交的值链接回父页面而不是模式，如果是我认为您可以将响应 div 放在该页面本身上，因为可以动态生成多个 cmets 响应 div id。还有一件事，如果您想在多个位置（例如 cmets 部分以及模态）上做出响应，那么您可以在远程表单成功时附加一个触发器，并将相同的内容放在该 div 上。 :) 不确定这是否是您想要的。

【解决方案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" );
        }

【讨论】：