Unable to have multiple bootstrap modals on the same page

Question

I'm completely stumped. I have separate separate triggers all very similar

Montenegro protesters decry opposition's use of Serbian symbols


Katarina Panic: Montenegro elections-The real winners are citizens

The modals are as below:

And the javascript which populates those modals.

//SOUNDCLOUD MODAL SCRIPT
$('#audio_modal').on('show.bs.modal', function (event) {
  var source = $(event.relatedTarget); // Button that triggered the modal
  console.log(source + "Audio Modal JS");
  var title = source.data('title');
  var soundcloudurl = source.data('soundcloud-url'); // Extract info from data-* attributes

  //MODIFY THE SOUNDCLOUD URL TO INCLUDE THE EMBED PART OF THE URL STRING
  var iframeLink = soundcloudurl.replace(soundcloudrurl, 'https://w.soundcloud.com/player/?url=$1');

  //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
  var modal = $(this);
  modal.find('.modal-title').text(title);
  modal.find('.audio-iframe').attr("src",iframeLink);

})

//YOUTUBE MODAL SCRIPT
$('#video_modal').on('show.bs.modal', function (event) {
  var source= $(event.relatedTarget); // Button that triggered the modal
  console.log(source + "Video Modal JS");
  var title = source.data('title');
  var youtube_url = source.data('youtube-url'); // Extract info from data-* attributes

  //MODIFY THE YOUTUBE URL TO INCLUDE THE EMBED PART OF THE URL STRING
  var iframeLink = youtube_url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, 'www.youtube.com/embed/$1');

  //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
  var modal = $(this);
  modal.find('.modal-title').text(title);
  modal.find('.youtube-iframe').attr("src",iframeLink);

})

Strangely, the YouTube modal appears and populates absolutely fine. However the sound-cloud modal isn't triggered at all.

I'm pretty sure I've got the classes and id's correct (because the YouTube modal works). But there's something I'm just not taking into account. Any suggestions?

Always Helping · Accepted Answer

You do not need two separate modals on your page at all. I have refactored your code to have one modal which works for multiple things.

You can assign an id to your a element and check which one triggered the modal by checking it attr and you can apply the data accordingly to that modal.

Ideally, less code is always better to have dynamic results.

Live Working Example:

//SOUNDCLOUD MODAL SCRIPT
$('#myModal').on('show.bs.modal', function(event) {

  var modal = $(this)
  var button = $(event.relatedTarget) // Button that triggered the modal  

  if (button.attr('id') == 'soundcloud') {
    var title = button.data('title');
    var soundcloudurl = button.data('soundcloud-url'); // Extract info from data-* attributes
    //MODIFY THE SOUNDCLOUD URL TO INCLUDE THE EMBED PART OF THE URL STRING
    var iframeLink = soundcloudurl.replace(soundcloudurl, 'https://w.soundcloud.com/player/?url=$1');

    //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
    modal.find('.modal-title').text(title);
    modal.find('.iframe').attr("src", iframeLink);
  } else {
    var title = button.data('title');
    var youtube_url = button.data('youtube-url'); // Extract info from data-* attributes

    //MODIFY THE YOUTUBE URL TO INCLUDE THE EMBED PART OF THE URL STRING
    var iframeLink = youtube_url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, 'www.youtube.com/embed/$1');

    //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
    modal.find('.modal-title').text(title);
    modal.find('.iframe').attr("src", iframeLink);
  }
})

#youtube {
  background: green;
  cursor: pointer;
}

#soundcloud {
  background: Yellow;
  cursor: pointer;
}










Youtube



Sound Cloud

Unable to have multiple bootstrap modals on the same page

Answers (2)

Related Questions