I am looking for a way to have JavaScript dynamically loaded after an ajax call to load a dialog/pop up.
I would like the dialog to load it's own JavaScript files and any in-line JavaScript.
I have seen examples that use a method to do an ajax call to load html into the DOM then have "complete" callbacks that the loading method will call after the html is loaded.
However, using this approach prevents any JavaScript on the dialog from executing and requires that the initiating JS know details about the dialog in order for it to attach events, etc.
Is the only way to accomplish this to have the dialog load the source of the document into an iframe so that it can run the JavaScript?
It is possible to load external HTML in an iframe and have its JavaScript executed.
See those questions:
How to load page dynamically in iframe
Loading external sites into Iframe dynamically - is there a better way?
How to dynamic load the document content into an iframe?
When loading an html page via ajax, will script tags be loaded?
Related
I want to load an external page into a div using Jquery AJAX and that page contains lots of external jquery plugins. I am able to load the page but plugins are not working. I want to load those jquery plugins when external page is loaded through jquery AJAX. Is there any way to do it? Please provide me the link of snippet if available.
I assume you are doing something like this.
$.get(url,data).done(function(response){
var html = response.html;
$('selector').append(html);
$('carousel').init();//example of how to manually trigger a plugin
});
Usually the plugins init method are called on an event, either a dom ready or dom load event, however in your case that init method is never triggered.So,
you need to manually trigger the plugins after loading the content.
In the example above once the content is loaded I have provided an example of how a plugin(here carousel) could be triggered.
If you want to download the html code of a site, you can use the .ajax (), like this
$.ajax({url: 'https://somesite.com'})
But what if the site uses lazy load?
When you try to download site via .ajax, you get a page without dynamically loaded content.
Are there any way to get the html code for the site after it fully loads all the content?
You have to attach the loaded HTML to the DOM, then it will be parsed and any JS scripts will be executed which leads to lazy loaded content being downloaded.
$('.content').append(theDownloadedContent);
I'm using a bootstrap theme that requires a few javascript files. On some of my pages I load quite a bit of content from the server which means not all the html will be on the page at the time the javascript files are evaluated.
This prevents the event handlers from binding to the html that's loaded after the javascript is evaluated. So far I've fixed the problem by loading the scripts after the ajax call is finished, but this seems pretty hokey to me. Here's my function:
$.get("/path/to/rest/call", function(data) {
$('#htmlElement').html(data);
}).done(function() {
$.getScript("/path/to/js/file.js");
});
I feel like there's a better way to do this. Is there?
There may be a cleaner way of solving this than dynamically loading the metroui library. It looks like it depends upon jQuery's .ready() to know when the page is loaded and when it can initialize it's things. But, that doesn't work for you because you are dynamically loading content via Ajax.
What you can do is you can hold off the jQuery ready() notification until after your ajax content is loaded. This will then hold off the firing of metro's initialization until after your dynamic content is loaded. This would allow you to load metro in a stock <script> tag in the <head> section like their doc suggests. The way this works is you add this to the <head> section, after jQuery is loaded:
<script>
jQuery.holdReady(true);
</script>
Then, after your ajax code has succesfully completed, you do this (from the success handler, after you've put your new content into the page):
jQuery.holdReady(false);
which then releases jQuery to call it's .ready() handlers and metro will do it's thing after your content is loaded.
See jQuery doc for jQuery.holdReady(...).
I have an issue with dynamically loaded content.
I'm using ajax calls to load in HTML content without refresh the browser, and pages have their own JavaScript libraries that need to load in order for them to work. So I embed that JavaScript content into the HTML which I load with ajax.
The problem is, that even though the HTML that had the embeded JavaScript gets removed, the functionality of those JavaScript functions is still loaded no matter if the HTML along with the JavaScript is removed.
That means, that if a certain page is loaded more than once, actions will fire the same amount of times that the pages has been loaded.
How do I make sure that JavaScript libraries get only loaded into the browser once, retaining the functionality of loading the source of the JS libraries with the ajax call, not just having source file links and then loading them again after the ajax call along with the required HTML is loaded? (load the JS files along with/before the HTML is loaded with ajax)
Once you load a JavaScript file into your browser's memory, it remains there until you load another page.
So... it doesn't matter how do you load it (through AJAX, or just once when page load through script link, or just embedding it into your raw HTML), once it's there it will remain there until you go to another page.
If you want your client code to execute only under certain circumstances you need to control that.
From my point of view your best option is to just load once your libraries and determine by code when execution should start, end, and repeat (if needed).
Here's my conundrum:
My website uses PJAX to load HTML into the '#main' container for each page.
Each page has its own specific javascript file. E.g: 'dashboard.index.js', 'inbox.index.js' and so on.
Note: All libraries are preloaded on the first load of the page through PreloadJS to avoid javascript compilation overhead.
The first load of the page is perfect, no worries, since it is a normal HTML load.
However if i come back to this page again, PJAX won't reload the javascript file, given it's already in the DOM.
What i tried so far & didn't work perfectly:
Place javascript file at the bottom of 'main' container. PJAX transfers it to the 'HEAD' of the DOM and won't load it the second time around.
Place in-line scripts in the 'main' container to execute functions of each page. Fails since the code is executed before JS libraries are loaded.
Bind 'PJAX success' event and execute function. Unable to determine which function to execute based on current loaded page.
Hence, my question:
Is there any strategy to load specific javascript files associated to each page?
When loading HTML from pjax, i added a 'data-js' attribute to the div, which contained the name of the function to call upon successfully loading HTML.
Then it was just a matter of using the 'pjax:success' event to call the function.