Loading external data (multiple fields) into Twitter Bootstrap modal

Question

This is my first bootstrap/jQuery application.

I have an app that displays multiple addresses for a person and each address is editable by an Edit button.

I cannot figure out a way to click "edit" and then have ajax call a script to load that specific data from the database and then place it in a twitter modal window.

The edit button code is:

a class="btn btn-small open-EditAddress" data-toggle="modal" data-id="#custom.addr_id#"         href="##edit_address_modal"><i class="icon-pencil"></i> Edit</a>

Each edit button passes the Addr_id , which would then trigger a twitter modal window with the data filled in for editing.

I have the modal edit firing, but not sure what to do next to load the external data into the modal for updating.

Can anyone assist with the jQuery to call the external data and load it in the modal?

Answer 1

update your Edit link to look like this so that it does not trigger showing a modal when clicked:

<a class="btn btn-small open-EditAddress" data-id="#custom.addr_id#" href="/ControllerName/ActionNameToGetAddressInfo/[locationId]" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#ModalEditAddress"><i class="icon-pencil"></i> Edit</a>

You don't want to do that because you will be triggering that separately via JQuery after loading your form. Also notice all these extra data attributes. They will enable an ajax call to populate your modal div with needed information.

Somewhere on the page you should have your modal element:

<div id="ModalEditAddress" class="modal hide fade">
</div>

It is empty because it will be populated with an ajax call to the following Action:

public ActionResult ActionNameToGetAddressInfo(int id) // locationId
{
    var model = [get all the address information from DB or however you get it];
    return View("~/Views/[ControllerName]/_EditAddress.cshtml", model);
}

Here is your partial view _EditAddress.cshtml :

    @using(Ajax.BeginForm("[ActionNameToSaveAddress]","[ControllerName]", new AjaxOptions{...}))
    {
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Edit Address</h3>
        </div>
        <div class="modal-body">
            [all the form related inputs]
        </div>
        <div class="modal-footer">
            <input type="submit" value="Save Address" />
        </div>
    }
    <script type="text/javascript">
        $('#ModalEditAddress').modal('show');
    </script>

So far when you click on the edit link, it will trigger an Ajax call Action ActionNameToGetAddressInfo and put its results into div with id="ModalEditAddress" . When this happens it will run the script at the very buttom of the partial view and show the modal.

You will have to write another action to save address and some JQuery to hide modal when its saved.

This is all pseudo code so some adjustments may need to be done to it so that it works.