-1

I have a project where we have multiple modals on same page. So the idea is to get the id from the button that is clicked and append that id to the modal. Example is:

Here is my code in plunker: bootstrap modal 

 <button class="btn btn-readmore" data-toggle="modal" href="modals/serv-cutting.html" data-target="#vividCutting">read more</button>

 <button class="btn btn-readmore" data-toggle="modal" href="modals/serv-color.html" data-target="#vividColor">read more</button>

then add that id attribute to:

 <div class="modal fade" tabindex="-1" role="dialog" aria-  labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content"></div>
    </div>
</div>

So I have quite a few modals and i came up with this jQuery as if I dont remove the id first, then all the buttons that trigger modals just keep opening the same modal:

$('button.btn-readmore').click(function() {
    var newId = $(this).attr('data-target').slice(1);
    console.log(newId);
    if($('.modal').prop('id', newId)){
        $(this).removeProp('id', newId);
    } else {
        $('.modal').prop('id', newId)
    }
});

I think Im close but need a little advice.

jmccommas
  • 567
  • 2
  • 12
  • 31
  • code you have will change id of all `.modal` . Really not clear what you want to accomplish by changing ID's – charlietfl Mar 24 '15 at 00:31
  • Not entirely clear what you're trying to achieve. It looks like you're trying to add the same ID to a lot of nodes. Every ID should be unique though, and every node should only have 1 ID. I suppose you need a class? – Soronbe Mar 24 '15 at 00:32
  • I have 6 buttons all with unique ID's, none of them are the same – jmccommas Mar 24 '15 at 00:33

1 Answers1

1

Based on your comments on my previous answer and the updates to your question, it looks like you want to re-use the same modal and have it loaded with remote content depending on which button is clicked.

HTML:

<button class="btn btn-readmore" data-toggle="modal" href="modals/serv-color.html" data-target="#modal1">read more 1</button>
<button class="btn btn-readmore" data-toggle="modal" href="modals/serv-cutting.html" data-target="#modal1">read more 2</button>
<div id="modal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>

JavaScript that destroys the modal after it his hidden in order to allow the remote content to be loaded every time it is re-created, courtesy of Twitter bootstrap remote modal shows same content everytime

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
Community
  • 1
  • 1
Benjamin Ray
  • 1,855
  • 1
  • 14
  • 32
  • I tried your example, but same issue, it keeps opening the first modal that was opened no matter which button is clicked. Heres a plunker example: http://embed.plnkr.co/HqcgtGSt7gGHlkgSjs9m/preview – jmccommas Mar 24 '15 at 00:47
  • You only have one modal in the example, and your request was to change the id of the modal, not open a modal based on id. Is your intention to have several modals and open the one with the id that matches the value in data-target? That wasn't very clear in your question. – Benjamin Ray Mar 24 '15 at 00:49
  • Yes, that's exactly what Im trying to do!! I'll have about a dozen modals and I'm trying to keep the code to a minumum – jmccommas Mar 24 '15 at 00:50
  • Well, that works, but Im trying to avoid adding the modal dialog html multiple times, like you have it there twice. Maybe there is no way to achieve what I'm trying to do? – jmccommas Mar 24 '15 at 00:56
  • Are the modal dialog contents different? If so, you'll need to have each version of the contents written somewhere. This way it's in HTML which makes it a bit easier to manage. If it's a simple string, you could create an array in JavaScript and re-use the same modal, inserting the string into the body of the modal each time. But then you've got html in a JavaScript array, which might be more complicated than just having multiple modals. – Benjamin Ray Mar 24 '15 at 00:58
  • It would be helpful to know how one modal window would be different from another. Can you add a couple of examples? – Benjamin Ray Mar 24 '15 at 01:01
  • If you notice in my plunker example, each button has a remote url for the modal content. So when clicked it should grab the remote html content and add it to the modal dialog shell that is in the index.html file at the bottom – jmccommas Mar 24 '15 at 01:04
  • Updated answer yet again. – Benjamin Ray Mar 24 '15 at 01:34