-
-
Save lautenai/77dd4ee1ab94b58c05e9ba4c157eb581 to your computer and use it in GitHub Desktop.
Fix BootStrap3 modal AJAX caching issues when loading remote content. Yes, I know it's deprecated.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#myModal').on('loaded.bs.modal', function (e) { | |
| $('#myModal').removeData(); | |
| }); | |
| $(document).ready(function(){ | |
| $('body').on('hidden.bs.modal', '.modal', function () { | |
| $(this).removeData('bs.modal'); | |
| }); | |
| }); | |
| $(document).ready(function(){ | |
| $('body').on('hidden.bs.modal', '.modal', function () { | |
| $(this).removeData('bs.modal'); | |
| $("#" + $(this).attr("id") + " .modal-content").empty(); | |
| $("#" + $(this).attr("id") + " .modal-content").append("Loading..."); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="utf-8"> | |
| <title>Modal Multiple Remote Cache BS</title> | |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <a href="one.html" data-target="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Launch first.html in #myModal</a> | |
| <a href="two.html" data-target="#myModal" role="button" class="btn btn-success" data-toggle="modal">Launch second.html in #myModal</a> | |
| <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> | |
| </button> | |
| <h4 class="modal-title">Modal title</h4> | |
| </div> | |
| <div class="modal-body"> | |
| <p>One fine body</p> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-primary">Save changes</button> | |
| </div> | |
| </div> | |
| <!-- /.modal-content --> | |
| </div> | |
| <!-- /.modal-dialog --> | |
| </div> | |
| <!-- /.modal --> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| <h4 class="modal-title">First Remote Modal</h4> | |
| </div> | |
| <div class="modal-body"> | |
| <h1>hello, i am number one!</h1> | |
| <p>Salvia pop-up synth raw denim lomo kogi. Food truck viral ethical, lo-fi skateboard swag mumblecore PBR chillwave trust fund scenester. Vegan swag fanny pack aesthetic. High life hella messenger bag sustainable. Sriracha whatever flexitarian farm-to-table raw denim, brooklyn godard messenger bag fixie keffiyeh occupy lomo. Lo-fi dreamcatcher mumblecore fingerstache, aesthetic 8-bit craft beer ethical DIY. Swag pop-up ennui vinyl, next level letterpress tumblr fixie dreamcatcher forage marfa.</p> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| <h4 class="modal-title">Second Remote Modal</h4> | |
| </div> | |
| <div class="modal-body"> | |
| <h1>hi, i'm second!</h1> | |
| <p>Polaroid craft beer stumptown, ethical lo-fi jean shorts squid pickled. Squid beard pinterest gluten-free tofu, marfa organic whatever photo booth. Letterpress kogi williamsburg you probably haven't heard of them. Cred seitan pitchfork brunch, hella american apparel synth portland flexitarian you probably haven't heard of them. Fanny pack vice umami VHS. Raw denim mixtape craft beer banh mi four loko, mustache irony PBR banksy whatever lomo lo-fi. Art party photo booth shoreditch keffiyeh.</p> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment