Integrating Jquery and Django

Question

How is possible to integrate Jquery-ui dialog with a django function?

I mean... I have a form coded in jquery-ui dialog. I wish that jquery call a django function when this form is submitted, but without passing any variables in the URL. Is it possible?

Can anyone give me a clue?

Thanks

[UPDATED] I just figured out that the code is correct, but Django is return erro 403, probably because CSRF protection. How can I fix it without disable this protection? Here is my jquery-ui code:

$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 430,
        width: 350,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Confirm": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( name2, "name2", 6, 80 );
                bValid = bValid && checkLength( email, "email", 6, 80 );


                bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "some-error-msg..." );

                if ( bValid ) {
                    $( "#users tbody" ).append( "<tr>" +
                        "<td>" + name.val() + "</td>" + 
                        "<td>" + email.val() + "</td>" + 
                        "<td>" + name2.val() + "</td>" +
                    "</tr>" ); 


                    $.post("", {'csrfmiddlewaretoken':'{csrf_token}}'}, function(data) {

                        alert(data);// ---> data is what you return from the server
                    }, 'json');

                    $( this ).dialog( "close" );
                }
            },
            "Cancel": function() {
                $( this ).dialog( "close" );
            }
        },

        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

Answer 1

You need to use POST HTTP method instead of GET. POST will not add parameters in URL in will post parameters base64-encoded and they will not be visible in URL.

Just serialize any Django object in json format example and return json via view.

Full stack example (sorry for unpleasant colors on the site).

Answer 2

You need 2 pieces to make this work.

• On the django end, write your function that you want to be called on form submission. A good place to keep it is views.py. Now add an entry to urls.py so that django knows to call this function whenever that url is accessed.
• On the client side, catch the cubmit event of the form and make an ajax call to the url you added in urls.py above.

This is a very simple outline of what you need to do. If you get stuck at some place, try the django tutorial for help with first part and jquery ajax documentation for help with second.