Open Django template in bootstrap Modal

Question

I'm trying to open a Django template in Twitter-Bootstrap Modal. Earlier I did it using JavaScript but it only opened once.

I read somewhere that Bootstrap Modals are more customizable, so giving it a try, I referred to an already answered question. I've the same problem and I've tried the same solution but it doesn't work for me. The only thing I get is blackened screen.

The flow goes like this:

• A Django template is rendered which has several worker's details.
• In that template, I've links to "Add advance" for every worker.
• Clicking on which I want to open Modal.
• In that Modal, I want to open another Django template containing a form.
• Filling the form, either close or press enter.
• For any of these events on Modal, save the data from the form.

What I've done is here:

Template where the link is clicked: form.html

<a class="contact" href="#" data-form="/popupadvance/?worker_id={{value.worker_id}}&year={{year}}&month={{month}}" title="Advance"> Add advance</a>
<div class="modal hide" id="contactModal">

<script>
  $(".contact").click(function(ev) { // for each edit contact url
    ev.preventDefault(); // prevent navigation
    var url = $(this).data("form"); // get the contact form url
    alert(url);
    $("#contactModal").load(url, function() { // load the url into the modal
        $(this).modal('show'); // display the modal on url load
    });
    return false; // prevent the click propagation
})
</script>

The template which should open: popup.html

<div class="modal hide" id="contactModal">
<form id="form" class="well contact-form" action='/popupadvance/?worker_id={{value.worker_id}}&year={{year}}&month={{month}}' >
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
    </div>
    <div class="modal-body">
        {% csrf_token %}
        {{worker_id}} <br />
        {% for a in old_advances %}
        {{a.advance_amount}} {{a.advance_date}}<br />
        {% endfor %}
        <input type="integer" id="popupadvance_{{worker_id}}" placeholder="Advance ++" class="popupadvance" >
    </div>
    <div class="modal-footer">
        <input class="btn btn-primary" type="submit" value="Save" />
        <input name="cancel" class="btn" type="submit" value="Cancel"/>
    </div>
</form>

Clicking on the link: "Add advance", the only thing I get is the alert I've added closing which I get blackened screen over which the Modal should appear but neither the Modal, nor the form is rendered there. But pressing forward button on browser, I get the popup.html rendered on a new page, which probably tells that the URL is working on clicking the link, but only the Modal doesn't open.

I would like to tell that the input field in pupup.html is able to save data to database with OnChange event as I did when I opened up the dialog box using JavaScript.

Any help to find the problem will be greatly appreciated. As I don't see any error on Browser console.

Thanks.