CODEWITHSUNDEEP
javascriptruby-on-railsjquery-uijquery
Petya petrov
Petya petrov

Reputation: 2213

rails 3 and jQuery Dialog form

im google it, but still can't find info or tutorial. I have a link with item, im wanna jquery dialog form onclick with item/edit this item and submit. How can im implement this? All tutorials take form from html, im wanna take it from the view and fields need to be filled with existing values.

Upvotes: 2

Views: 6189

Answers (2)

DefyGravity
DefyGravity

Reputation: 6011

alot of this code below is from http://jqueryui.com/demos/dialog/#modal-form

i hope my added comments in the code explain what each part is doing a little better 

    <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 to make the above work, again from the demo 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>

Upvotes: 2

u2622
u2622

Reputation: 3011

Forms in the dialog behave just like regular forms - there is nothing special about them.

If you have a form that you use to already edit the item, wrap that in a <div> and give it an id. E.g.: 

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

And then somewhere you'll want to set up the dialog using javascript:

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

And then hook up the dialog to some link (probably in your public/application.js):

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

And somewhere in your view you will have an element that acts the open dialog button:

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

If you want to the dialog to be an AJAX submit, make sure to use :remote => true in the form parameters.

That should do it. Make sure your form works before you try and put it in a dialog (ie. get the first div/form done before trying to hook up the javascript dialog)

Upvotes: 15

Related Questions