rails 3和jQuery Dialog表单

Question

我谷歌它，但仍然找不到信息或教程。 我有一个项目的链接，我想要jquery对话框表单onclick with item /编辑这个项目并提交。 我怎么能实现这个？ 所有教程都从html中获取形式，我想从视图中获取它，并且字段需要填充现有值。

Answer 1

对话框中的表单就像常规表单一样 - 它们没有什么特别之处。

如果您有一个用于编辑项目的表单，请将其包装在<div>并为其指定一个id。 例如：

<div id="your_dialog">
  <% form_for ... %>
     ... rest of form goes here
  <% end %>
</div>

然后在某个地方你需要使用javascript设置对话框：

<script>
$(document).ready(function() {
  var $your_dialog = $('#your_dialog').dialog({ 
    autoOpen: false, 
    title: 'Edit',
    modal: true,
    draggable: false
  });
});
</script>

然后将对话框连接到某个链接（可能在您的public/application.js ）：

$('#open-dialog').click(function(){
    $your_dialog.dialog('open');
});

在视图的某个位置，您将拥有一个用于打开对话框按钮的元素：

<span id="open-dialog">Click me to open the dialog</span>

如果您希望对话框成为AJAX提交，请确保在表单参数中使用:remote => true 。

应该这样做。 在尝试将其放入对话框之前确保您的表单有效（即在尝试连接javascript对话框之前获取第一个div /表单）

Answer 2

下面这段代码很多来自http://jqueryui.com/demos/dialog/#modal-form

我希望我在代码中添加的注释可以解释每个部分做得更好的内容

    <script>

        //taken from jQueryUI dialog 'form' demo.http://jqueryui.com/demos/dialog/#modal-form
        $(document).ready(function(event){

        var name = $( "#name" ),
                    email = $( "#email" ),
                    password = $( "#password" ),
                    allFields = $( [] ).add( name ).add( email ).add( password ),
                    tips = $( ".validateTips" );
//taken from jQueryUI dialog 'form' demo.http://jqueryui.com/demos/dialog/#modal-form
// validation function message helper
                function updateTips( t ) {
            tips
                .text( t )
                .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }
//taken from jQueryUI dialog 'form' demo.http://jqueryui.com/demos/dialog/#modal-form
// validation function 
        function checkLength( o, n, min, max ) {
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }
          $("#dialog").dialog({
          height: 300,
                    width: 350,
                    modal: true,
                            open : function(event, ui){
                            // not needed b/c of ajax load
    },
                    buttons: {
                        "Save": function() {
                            var bValid = true;
                                            // clear previous validation errors.
                            // perform errror checking on dialog form values            
                            if ( bValid ) {
                                $.post("url/to/save/data", $("#dialog form").serializeArray(), function(data, text, xhr){
    // check for errors saving edits in the 'data' variable
    var hadErrors = true;
    if( data.someWayToCheckForErrors == hadErrors){
       // append an error message to the dialog without closing it, or, append an error message to the main page.
      //$("#dialog").append("<div class='ui-state-error'>you had an error saving</div>");
    }else{
     $( this ).dialog( "close" );
    }
    }); 
                            }
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    close: function() {

                    });



      $(".editLink").click(function(event){
               var theDialog = $("#dialog");
//shorthand ajax call to query server for the Dialog Content in another action.
               theDialog.load("someUrlToGetDataFromYourAction",
               {optional json of url parameters for Action}, 
               function(data, text, jqXhr){
// success 
theDialog.dialog("open");});

          });
        });
        </script>

html进行上述工作，再次从演示http://jqueryui.com/demos/dialog/#modal-form

<div id="yourContent">
<table><!---whatever is in here.  also, this does not need to be a table.--->
<td><a href="#" class="editLink">edit</a></td>
</tr>
</table>

</div>
        <div id="dialog" title="Create new user">
   <!--- content provided by ajax $.load() call in $('.editLink').click() event.--->
        </div>