Develop Reference

Reload javascript on html change

In my site's index.html I have a div element that changes when a menu item gets clicked (with jquery). The pages that get inserted into this element all have some javascript functions in them. However, I load my javascript files in the index.html right before the body closes. These files don't 'reload' when this div element changes, so the javascript doesn't work on these pages. How would I fix this issue? Do I have to reload the javascript files on the change of the element? And if so, how?
edit:
Sorry, these are the codes for the page inserts:
$("li.load-page").click(function() {
var pagina = $(this).data("page") + ".html";
console.log(pagina);
$("#main-content").load(pagina);
});
main-content is an empty div in index.html.
In one of the pages that gets inserted I use the jquery accordion in my html for example, but it doesn't work since it's included in the head, and the page doesn't refresh on insertion:
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
heightStyle: "content"
});
});
EDIT2: I have simulated my problem here: https://jsfiddle.net/ktoeon2f/2/

<script type="text/javascript" id="jsid">
//your script here
</script>
after onchange call
eval(document.getElementById("jsid").innerHTML);
after load
$("li.load-page").click(function() {
var pagina = $(this).data("page") + ".html";
console.log(pagina);
$("#main-content").load(pagina);
eval(document.getElementById("jsid").innerHTML);
// give an id (jsid) to script tag inside your loaded page
});

The problem was solved in this thread: jQuery: Changing the CSS on an element loaded with ajax?
The solution was to load the other function(s) in the succes function of an ajax call:
$('#main-content').load(
url,
function(){
accordionFunction();
}
);

Execute jQuery script after its being loaded in via jQuery .load

In page Index.html there is a selectbox called #choose_content_to_load and a div called #get_loaded_content
<select id="choose_content_to_load">
<option>Some content from page content.html and div #content</option>
</select
<div id="get_loaded_content">
As seen in the selectbox option there is a page called content.html that contains a div called #content. In the current situation the div #content get loaded into #get_loaded_content when click on the option by using this script:
$(document).ready(function(){
$("#choose_content_to_load").change(function(){
var selectedOption = $('#choose_content_to_load :selected').val();
$containerDiv = $('#get_loaded_content');
$containerDiv.html("");
switch (selectedOption)
{
case "Some content from page content.html and div #content":$containerDiv.load( "content.html #content" , function(){$(document).trigger("reload_javascript");});break;
}
return true;
});
});
As you see the script also trigger a "reload" of all the scripts "reload_javascript". This is becuse the div #content have some more design elements that needs to be executed at the load in. These scripts looks like this:
$(document).on("ready reload_javascript" ,function() {
script
});
This works fine and all the loaded elements initializes and works, this becuse Index.html and content.html share the same design scripts (same .js file) so the scripts just need to "run again" to work. Now to the problem, the div #content need to have a larger script that only execute when the div is being loaded into #get_loaded_content in Index.html. Its not good to have the script in the .js file that both index.html and content.html share becuse its alot of code.
So the new script need to be put direct into the #content html using tags and execute when this div is being loaded in.
First I thought the new script will run just by adding the reload_javascript but then I realised that dident execute the script just initialize it (I think). I hope somebody can help me with this and please have in mind that I try to learn jQuery (beginner at coding).
Thanks alot.

If i understand you correctly you are loading <script> tags into content and wish for it to execute? If so call this function i made a while back after insertion.
/**
*This function is supposed to execute script after script insertions
*/
function execute(){
$('#content script').each(function() {
var _script = document.createElement('script');
_script.type = 'text/javascript';
_script.setAttribute('async', 'true');
/**
*IEFIX (IE does not support .innerHTML on createElement)
**/
if(!_script.innerHTML){
_script.text=$(this).html().replace('\\\\',"\\");
}else{
_script.innerHTML = $(this).html().replace('\\\\',"\\");
}
document.body.appendChild(_script);
});
}

Dynamically load fancybox and attach it?

I am trying to dynamically load fancybox via getScript and then attach it to a element. I have the fancybox dynamically load inside of a document ready...
So it goes.
documents ready -> getScript
But it doesn't seem to want to attach to my a tag (.fancybox) if I do a console.log jQuery('.fancybox') I get a [] but the element is already loaded? And if I type in jQuery('.fancybox').fancybox(); in the console in Google Chrome it still doesn't work?
Any idea what I am doing wrong?
jQuery.getScript("/fancybox/jquery.fancybox.pack.js", function() {
console.log(jQuery(".fancybox"),jQuery("a"));
return jQuery(".fancybox").fancybox();
});
The element is a simple a tag wrapping an image, and it is NOT dynamically loaded.
<div class="youtube"><img height="181" src="images/youtube-video.png" width="326"></div>

document ready is too early try wrapping it in $(window).load(function(){//CODE HERE}); instead because it needs to run only after DOM has loaded so it can apply your fancybox to your DOM element.

Try this:
jQuery.getScript("/fancybox/jquery.fancybox.pack.js", function() {
jQuery(document).ready(function() {
jQuery(".fancybox").fancybox();
});
});
EDIT: function call fixed

How to .load() just a specific div from a page into a a target div, not the whole page

I have the following script that loads a page into a div and not just the targeted div. This is most evident when going back to my index and my header and footer are jammed into the <div id="contentspace"></div>.
I read on here somewhere that the div needs to be placed in it's own page prior to being displayed. Not sure which method would do that. Is this possible without hashtags Thanks for your help
<script type="text/javascript">
$(function() {
$('#header a').click(function() {
$('#contentspace').empty();
$("#contentspace").load(this.href, function(response){
console.log($('#content', response).html())
event.preventDefault();
});
});
});
</script>

The method .load() can load page fragment, simply by specifying a valid jquery selector next to the url.
$('myelement').load('page.html #content', function() {
...
});
Note that when loading page fragments, jquery will remove any SCRIPT element it might contain.
In you example, you would do:
$("#contentspace").load(this.href + ' #content', function(response){
...
});

Did you read the documentation at all? Take a look at the section titled Loading page fragments in the jQuery API for .load(). Essentially you just pass a selector along with the URL of the page to load as the first argument of the method.

Loading Indicator in Ajax

I know this has been asked and answered many times in this forum. But it does not work in what I am looking for.
I want to display a loading indicator while the ajax div is loading. There are cases when it takes a few minutes to load so it would be good to let the user know that the is loading.
From what I gathered it can be done in jquery. I am not too familiar with jquery yet. With this code the loading works but only for the first page.
$(document).ready(function() {
$('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});
My page is structured like this
Header Page
-Div (display ajax here)
-Another div within the first loaded page(Load another page through ajax here)
I need it to display the loading indicator in the second div while it's loading. I am assuming that jquery "body" appends it to the main page body once and doesn't run again as it's within the same page. I did try to create a div and instead of body, load the div in jquery but it doesn't work.
Any help will be greatly appreciated.

I found that the easiest way to add the loader gif to specific elements is to create a CSS class with the loader as a background instead of appending an actual image:
.ajax-loader {
background: url(ajax-loader.gif) center center no-repeat;
}
Then you just add that class to the element you are loading and remove it when it is done:
// Removes any loaded images on Ajax success
var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
{
$('.ajax-loader').removeClass('ajax-loader');
};
// Add the ajax loader to a specific element and remove it when successful
$('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);

considering that the div you want to load your image has an id="theDiv"
$(document).ready(function() {
$('#theDiv').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});

Is there a reason you're appending your "ajaxBusy" div via Javascript? Why not just include the HTML on the page itself?
<div id="main">
<div id="ajaxBusy">
<p><img src="ajax-loader.gif"></p>
</div>
</div>
Try binding the ajaxStart and ajaxStop to the ajaxBusy div instead of the document.
$('#ajaxBusy').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});