jQuery .load() bootstrap modal and show

Question

I am trying to .load() a bootstrap modal in my page and show it immediately. Below is the code I have written (which isn't working as the modal opens but can then never be closed)!

Basically I am trying to .load() a list of players in a modal when you click on a team name (with the class .team), I've tried various ways of calling $($this).empty() with no success.

Here is my function:

 $(function () { $('.team').on('click', function () { var target = $(this).data('target'); $('#results-modals').load('/team-players.html ' + target, function (response, status, xhr) { if (status === "success") { $(target).modal({ show: true }); } }); }); });

Here is the html anchor and example modal:

<a class='team' data-toggle='modal' data-target='#20'>Real Madrid</a>

Data held in external file team-players.html:

<div id='20' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <p>Player 1: Ronaldo</p> </div> </div> </div>

That returns a 'Uncaught ReferenceError: show is not defined' — Matt D. Webb
– Matt D. Webb, Commented Aug 4, 2014 at 23:28
Rename your variable to anything else!, that doesn't start with $. — Kosh
– Kosh, Commented Aug 4, 2014 at 23:30

Harikumar A · Accepted Answer · 2015-01-12 12:32:39Z

$(function(){ var url = "url of the modal window content"; $('.my-modal-cont').load(url,function(result){ $('#myModal').modal({show:true}); }); })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Modal Window Container --> <div class="my-modal-base">	<div class="my-modal-cont"></div> </div> <!-- Modal Window content --> <div id="myModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog">	<div class="modal-content">	<div class="modal-header">	<button type="button" class="close" data-dismiss="modal">×</button>	<h3>Modal header</h3>	</div>	<div class="modal-body">	<p>My modal content here…</p>	</div>	<div class="modal-footer">	<button class="btn" data-dismiss="modal">Close</button>	</div>	</div> </div> </div>

Trevor Hutto · Accepted Answer · 2014-08-05 00:18:58Z

Instead of $($this).modal({ show: true }); try $(this).modal('show');

To hide the modal, you can use $(this).modal('hide');

Felix Jacob Borlongan · Accepted Answer · 2018-10-26 02:35:51Z

1

You can do $(this).modal("toggle") if it open it will close and vice versa.

answered Oct 26, 2018 at 2:35

Felix Jacob Borlongan

523 bronze badges

Comments

Love Kumar · Accepted Answer · 2019-07-09 05:47:20Z

jQuery .load() bootstrap modal and show

for show $(#ID).modal('show');

for hide $(#ID).modal('hide');

Collectives™ on Stack Overflow

jQuery .load() bootstrap modal and show

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related