рельсы 3 и форма jQuery Dialog

Question

Я в Google, но все еще не могу найти информацию или учебник. У меня есть ссылка с элементом, я хочу JQuery диалоговое окно, нажмите на элемент / редактировать этот элемент и отправить. Как я могу это реализовать? Все учебные пособия принимают форму из HTML, я хочу взять ее из представления, и поля должны быть заполнены существующими значениями.

Answer 1

Формы в диалоге ведут себя как обычные формы - в них нет ничего особенного.

Если у вас есть форма, которую вы используете для редактирования элемента, оберните ее в <div> и присвойте ейидентификаторНапример:

<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 в параметрах формы.

Это должно сделать это.Убедитесь, что ваша форма работает, прежде чем пытаться поместить ее в диалоговое окно (т. Е. Подготовить первый div / форму, прежде чем пытаться подключить диалог javascript)

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>