5

Let's say I have the following link that's generated X times by a loop.

<a class="btn" data-toggle="modal" data-target="#view_more" href="/item/view/<?php echo $item_id; ?>">Launch Modal</a>

Here's the JS script that initiates the modal.

$(document).ready(function () {
    $('#view_more').modal({
        remote: '/item/view/1',
        show:false
}); // Start the modal

It works when the remote url is hardcoded, but I would like it to be dynamic depending on what gets passed to it.

sdot257
  • 10,046
  • 26
  • 88
  • 122

1 Answers1

9

The Modal plugin executes the load() method in it's constructor, so really the only way to change the remote content of a Modal (other than manually doing the AJAX yourself) is to destroy it before doing another call:

$('#view_more')
  .removeData('modal')
  .modal({
    remote: someURL,
    show: false
  });

There are more details in answer to a similar post: Twitter bootstrap remote modal shows same content everytime

Community
  • 1
  • 1
merv
  • 67,214
  • 13
  • 180
  • 245
  • ok but how do i pass the correct URL into the `remote` field? If I have multiple links, they each call their own respective URL. – sdot257 Sep 12 '12 at 02:12
  • 1
    If you are including the remote url's in the `href` attributes of the anchors, the modal plugin will automatically use them as the `remote` value on initialization. The problem is that you need to destroy the modal object each time to get it to reinitialize on subsequent clicks. The option I suggested in the other answer I linked to is to destroy the modal object when a **hidden** event is fired. – merv Sep 12 '12 at 02:22
  • I got it, I didnt realize the `href` gets passed automatically. Your solution works perfectly, thanks! – sdot257 Sep 12 '12 at 02:23