JQuery - download dynamically loadable site - javascript

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);

Related

Loading an external page with some external JS files using jquery AJAX

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.

Facebook comments plugin in handlebars script

I want to use the Facebook comments box on my WordPress page where I use "handlebars js", which dynamically loads my HTML content with a script on my page.
When I add the Facebook html code:
<div class="fb-comments" data-href="http://mysite/mypage/" data-numposts="5" data-colorscheme="light"></div>
anywhere on the page it works fine, but when I use it within the handlebars script, it does not (except for like 1 time out of 20!).
I have tried changing the Facebook JS SDK to load asynchronously, as I suspect the issue has to do with the order in which my scripts are loaded, but still no luck.
You need to parse the plugin with FB.XFBML.parse after appending the Handelbars content to the DOM. Btw, that´s another topic, but you should ALWAYS load the JS SDK asynchronously, and make sure it is loaded before using FB.XFBML.parse.
Make sure to call the parse function after appending the Template content to the DOM.

jQuery/JS not removing JS functions on HTML wipe?

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).

Changes made from js files are not being rendered and cannot be debugged

I have a html page (inicio.html) which loads some js scripts. Then from a js script there is a navigation to another page in a different html file (test.html) and a different set of js files.
The problem is that when I do the changePage ($.mobile.changePage("test.html");) and the new page is loaded the new js files are kept in files like
http://localhost:8080/cdmWEB/resources/scripts/jquery/2.0.3/jquery-2.0.3.min.js/eval/seq/2
The js functions are being executed because the console.log messages in them are shown. But the changes the js scripts should do in the page are not rendered and the js cannot be debuged (using firebug).
I am loading the js scripts with the tag in the html file, but I have also tried the $.getScript function with the same result.
I am using jQuery 2.0.3 and jQuery-mobile 1.3.1.
From what I saw the reason why the js files are kept like that is because they are retrieved using ajax. Is there a way to prevent this and retrieve the file "normally"? or is there something I am missing (probably)?
Have a look here:
Jquery Mobile - $.mobile.changepage not loading external .JS files
You should consider loading the needed JS in the main page, and not in the page your changing to.
I ended up using window.open('test.html','_self','',true); to make the transition. This loads the new scripts when the transition is made and the jquery appends keep working fine.

Injecting JavaScript after ajax call

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?

Categories

Resources