Question

I can use some help to understand jQuery and jQuery UI dialog a bit better.

I’m using jQuery v1.8.18 UI Dialog and jQuery v1.7.1 to load an html page that contains a form. The form itself was generated by a Django template. After filling out the form and click on ‘Submit’, I looked at the HTTP request as seen on the Django server side. The server sees it as an ajax request of type GET with empty GET and POST dictionaries.

The expected result would be a POST with actual submission data in it. Can someone help me understand how UI Dialog changed a POST request into a GET? I’m using Firebug but need some debugging ideas. Thanks.

This is how I created the UI Dialog:

<script>
        $(document).ready(function() {
          var $dialog = $('<div></div>').load('/friend-request/').dialog({autoOpen:false, title:'Friend Request', modal:true});
         $('#friend-request').click(function() {
            $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;});

        });
</script>

The element #friend-request is just an HTML anchor. My form loaded just fine into the dialog. Here is the HTML form code that was generated.

<form id="id-friendreq" method="post">
    <div style="display:none"><input type="hidden" value="12a94012df543b050d69f46f0012345" name="csrfmiddlewaretoken"></div>
    <div class="ctrlHolder" id="div_id_to_user">
        <label for="id_to_user">
            To user<span class="asteriskField">*</span>
        </label>
        <input type="text" maxlength="15" name="to_user" id="id_to_user">
    </div>
    <div class="ctrlHolder" id="div_id_message">
        <label for="id_message">
            Message<span class="asteriskField">*</span>
        </label>
        <textarea class="textarea" cols="40" id="id_message" name="message">Hi, please add me as your friend.</textarea>
    </div>
<div class="buttonHolder">
       <input type="submit" id="submit-id-submit" class="submit submitButton button white" value="Submit" name="submit">
</div>
</form>

Answer 1

If you aren’t setting the ajax option type to “POST” or using a convenience method like $.post(), default is “GET”

http://api.jquery.com/jQuery.ajax/