Jquery ui 使用ajax创建GrailjQuery模式窗口和表单发布？_Jquery Ui_Jquery_Grails_Grails Plugin_Grails Controller

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

jquery-ui jquery grails

Jquery ui 使用ajax创建GrailjQuery模式窗口和表单发布？,jquery-ui,jquery,grails,grails-plugin,grails-controller,Jquery Ui,Jquery,Grails,Grails Plugin,Grails Controller,我有以下代码： <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=

我有以下代码：

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


$（函数（）{
$（“#对话框窗体”）.dialog({
自动打开：错误，
身高：300，
可调整大小：false，
宽度：350，
莫代尔：是的，
按钮：{
“附加注释”：函数（）{
警报（“假设它已提交”）；/？？这一次我可以添加什么来将表单发布到控制器attachComments并发布commentArea。
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
},
关闭：函数（）{
警报（表单已克隆！）；
$（此）.dialog（“关闭”）；
}
});
$（“#创建用户”）
.按钮（）
。单击（函数（）{
$（“#对话框窗体”）。对话框（“打开”）；
});
});

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

您可以使用远程表单、远程链接或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>


请输入您的评论
您将在这里收到您的回复

通过这种方式，您将能够将响应返回到模式窗口。

确定使用实现案例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向服务器发出请求，而无需刷新浏览器。然后，根据您得到的回复，关闭模式或显示错误。cool@如何将控件从模式窗口“Attach Comment”：函数传递到执行？我没有正确理解问题，请您简要介绍一下。好的，假设我按下了“附加注释”按钮-->那么如何整合表单和对话框单击事件以发布表单：）：）仍然不确定这个问题，可能是我在想其他事情，我得到的是，您希望将提交的值链接回父页面，而不是模式，如果是，我认为您可以将response div放在该页面上，因为可以动态生成多个注释response div id。还有一件事，如果您希望在多个位置（如comments部分和modal）上响应，那么您可以在form remote成功时附加一个触发器，并在该div上放置相同的内容：）不确定这是否是您想要的。