Bootstrap3 remote content using jQuery

Question

I have some bootstrap modals that need to load remote content not on click, but when a page loads. To try and accomplish this I have a php variable that is grabbing the right url's dynamically and then putting them in the page as a paragraph tag.

like so

<?=$page = 'dynamic string grabbing from url and other places'?> <p class="valu"><?= $page ?></p>

and then I'm setting the modal in the jquery to grab the string and then load the modal with the right content, except that there seems to be issues getting the right page. It's just reloading the page that it is being redirected to.

the jquery I have looks like this

var val = $('valu').text(); $(window).load(function(){ event.preventDefault(); var myModal = $('.largeModal'); var modalBody = myModal.find('.modal-content'); modalBody.load(val); myModal.modal('show'); });

Now if I put the direct string within the modalBody.load it seems to work, although I really need it to be that variable. I thought that maybe it wasn't seeing the text as a string and that was why I was not working, but neither casting the value as a string or concatenating quotes around it worked.

Any help would be much appreciated!

var val = document.getElementsByClassName('valu').textContent; -> this is better than using jQuery, cause it's the native use of it — HellBaby
– HellBaby, Commented May 2, 2014 at 13:15
@HellBaby It's not better, jQuery uses native JS too. In fact, jQuery is better to use because it is as cross-browser-compatible as it gets. Besides that, jQuery selectors return jQuery objects which can be used later in the script. — Daniel W.
– Daniel W., Commented May 2, 2014 at 13:19
@DanFromGermany isn't better at all to use jQuery cause instead to call your element directly you pass your request in jQuery who parse it and after that calls same thing as my version...so jQuery lose points on performance and wins on cross-browser... Also the standard js returns objects cause js is an object base language — HellBaby
– HellBaby, Commented May 2, 2014 at 13:22
@HellBaby how many selectors do you need to call until the "performance-loss" is noticeable? Ain't it a good trade-off, minimal, not even noticeable performance loss against cross-browser-compatibility without any further coding effort? — Daniel W.
– Daniel W., Commented May 2, 2014 at 13:29
@DanFromGermany function test(){ var ds1=new Date(); var js=document.getElementsByTagName('a'); var de1=new Date(); console.log(dateDiff(de1,ds1)); var ds2=new Date(); var jq=$('a'); var de2=new Date(); console.log(dateDiff(de2,ds2)); } function dateDiff(de, ds) { return de.getTime() - ds.getTime(); } test(); - please execute in your console on this page...and see why you should avoid jQuery, when you can use same thing faster... now all is about speed ... a framework will never beat native stuffs — HellBaby
– HellBaby, Commented May 2, 2014 at 14:03

haxxxton · Accepted Answer · 2014-05-02 13:10:28Z

You should declare your val property inside the load event. Also you have a typo in your selector, you forgot the .

$(window).load(function(){ var val = $('.valu').text(); var myModal = $('.largeModal'); var modalBody = myModal.find('.modal-content'); modalBody.load(val); myModal.modal('show'); });

PS. It is always advised to use proper PHP tags rather than the short hand <?php //something ?>

jackfrankland · Accepted Answer · 2014-05-02 13:51:56Z

As a possible better solution, you can set the URL in the attribute data-remote on the modal itself, like this:

<div class="modal fade hide" id="myModal" data-remote="<?= $page ?>">

This will load the content for you, and all you have to do is show the modal:

$(window).load(function(){ $('#myModal').modal('show'); });

The following docs give you more information about passing options via data- attributes:

Bootstrap

I actually could not use this in this case because I'm doing this across frames (not my idea!). That was why in my question I said I was trying to do it through jQuery. In an other case this would be the correct solution.
@zazvorniki OK then. It does seem though that $('.valu') is in the same frame as $('.largeModal'). Otherwise, you wouldn't be able to access them both like this. Are you sure you are not able to populate the HTML of the modal element instead of the paragraph?

Collectives™ on Stack Overflow

Bootstrap3 remote content using jQuery

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related