2013-06-24 129 views
2

我有以下代碼:創建Grail Jquery模態窗口並使用ajax創建表單?

<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並接收返回的響應我的模態窗口在模態窗口上顯示錯誤?

+1

你需要使用ajax向服務器發出請求而不刷新瀏覽器。然後,根據您收到的回覆,關閉模式或顯示錯誤。 – Gregg

回答

1

好使用實施案例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"); 
     } 
2

您可以使用遠程窗體或遠程鏈接或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> 

這樣,您就能夠得到響應返回給你的情態窗口。

+0

cool @如何從模態窗口傳遞controll「Attach Comment」:函數執行? – danielad

+0

我沒有得到正確的問題,請您簡單介紹一下。 –

+0

好吧,讓我說我附上評論按鈕 - >然後我如何整合你的表單和對話框點擊事件發佈你的表格:) – danielad