CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-3razortwitter-bootstrap
TheWebs
TheWebs

Reputation: 12923

Twitter Bootstrap Modal Not Opening?

I am using the code bellow to create a modal that pops up populated with the page based on the id that then allows you to edit location. How ever the modal wont open. Can some one tell me why?

@model IEnumerable<LocApp.Models.Location>

<table class="table table-bordered">
    <thread>
        <tr>
            <th>Name</th>
            <th>Active</th>
            <th>Actions</th>
        </tr>
    </thread>
    @foreach (var item in Model)
    {
        <thread>
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.active)
                </td>
                <td>
                    <a href="@Url.Action("Edit", "Location", new { id = item.id})" class="edit" data-target="#@item.id">Edit</a> |
                    @Html.ActionLink("Details", "Details", new { id = item.id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.id })
                </td>
            </tr>
        </thread>

        <div class="modal hide fade" id="@item.id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Edit @item.name</h3>
          </div>
          <div class="modal-body">
          </div>
        </div>        
    }
</table>
<script>
    $('a.edit').on('click', function (e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="' + url + '"></iframe>');
    });
</script>

Is there something I am missing?

Upvotes: 0

Views: 1266

Answers (2)

PSL
PSL

Reputation: 123739

You are almost right:- http://jsfiddle.net/wr9sE/1/

you need to specify data-toggle="modal" and data-target="#itemid"

 <a href="@Url.Action("Edit", "Location", new { id = item.id})" data-toggle="modal" class="edit" data-target="#@item.id">Edit</a>

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

Just an alternative suggestion, you can also modify the modal by subscribing to the show event too instead of registering on-click for the link....

$('.modal').on('show',function(){
    var url = $(event.srcElement).attr('href');
      $(".modal-body", this).html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="' + url + '"></iframe>');
});

Upvotes: 3

Alberto Fecchi
Alberto Fecchi

Reputation: 3396

Probably you're missing the inclusion of "bootstrap.js" (or, in the specific, the "bootstrap-modal.js")

Try to make your 'package' here (with the Modals) and to include the javascript in your page: http://twitter.github.io/bootstrap/customize.html

Upvotes: -1

Related Questions