0
76
ViewsDynamic Pages using Jquery .load conflicts
I'm trying to make a single page website that loads pages to a div with a id of #content however sometimes my form elements gets mess up like datepickers and autocompletes not rendering. So i suspected that there's to many scripts to load and it cause conflicts since all of my pages has source links.
My first adjustment was to remove all source links from my child pages and move it to the main page. but when child pages load using jquery .load i get a bunch of errors on my consoles like autocomplete is not a function and Synchronous XMLHttpRequest. Any suggestions to fix this?
//My code to load pages.
$(".click").on("click",function(){
var page = $(this).data('link');
$("#content").html("<img src='img/142.gif' width='150' />").load(page);
//console.log('Click function was called');
});
1 answers
Answer question0
There are errors because the javascript source files loaded after but your javascript code executed first. You can use iframe element and in order to load new page dynamically change the src then reload the iframe.
$(".click").on("click",function(){
var page = $(this).data('link');
var iFrame = $('iframe');
iFrame.html("<img src='img/142.gif' width='150' />");
iFrame.load(page);
});