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

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

Related

Alternative to hide/show content with JS?

is there a better way to replace this kind of js function by simply collapse/toggle a div and show/hide its content?
$(function() {
$('#destselect').change(function(){
$('.dest').hide();
$('#' + $(this).val()).show();
});
});
The reason this is happening is because your js file is called on the head of your page.
Because of this, when you document.getElementsByClassName('collapsible');, colls result in an empty array, as your elements in body are not yet created.
You could either create a separate js file and add it at the end of your body (in that way you make sure your colls are created when your javascript is executed), or just wrap your code on a DOMContentLoaded event listener that will trigger your code once the document has completely loaded.
My guess would be that you are loading your script before browser finishes loading dom conetent and so when it runs the elements it is trying to add event listeners to, don't yet exist.
Try wrapping all you javascript in that file in this:
document.addEventListener("DOMContentLoaded", function(event) {
// all your code goes here
});
The above makes sure that your script is run after loading all elements on the page.
You could add a script tag to the header of your HTML file, this will import the JS file into your current page as follows
<script src="File1.js" type="text/javascript"></script>
Then call the function either in onclick in a button or in another script (usually at the bottom) of your page. Something like this:
<body>
...
<script type="text/javascript">
functionFromFile1()
</script>
</body>
Seems like your script is not executing properly due to a missing variable.
In this script https://www.argentina-fly.com/js/scripts.js
Naves variable in function UpdateDetailsDestination() is not defined.
I think you should resolve this first and then check your further code is working on not.
Please take a look into Console when running page. You'll see all JavaScript related errors there.

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

How to bind a future event when using jQuery Mobile external page linking?

In jQuery Mobile, the external page is linked via Ajax (i.e. the content of the external page is loaded into current page via Ajax).
The problem is: How to bind a event on the future (i.e. to be loaded) content?
Let say the content to be loaded has the following HTML input
<input type='text' id='foo' name='foo'>
How to bind a input event on it?
With just static HTML, the following code would work
$('#foo').on('input', function () {
...
Now it didn't work now since the DOM is loaded dynamically, I tried to use delegation but also not work
$(document).on('#foo', 'input', function () {
...
Any idea?
You can include the script in the external page as long as the script tag is within the data-role="page" div (Only the content of the first found data-role="page" element is loaded into the current page.
$(document).on("pagecreate", "#extpagedivid", function(){
$(document).on("input", "#foo", function(){...});
});
You can also include this code in the pagecreate handler of the main page as long as you are using event delegation. Make sure the ID of the input is unique across all pages that will be loaded into the main page.
How about using var
var myFunc = function() { ... }
$(document).ready(function() {
$('#foo').on('input', myFunc );
});

HTML & JS Markup - better way possible?

I'm loading my html files into a #content div in order to avoid the complete page to reload when clicking on a link. I'm doing this by calling the following in my index.html:
[...]
<div id="content">
<script type="text/javascript">$("#content").load("home.html");</script>
</div>
The problem is that no javascript in my global.js will be executed if it's related to one of the html files that will be loaded into my #content div.
In order to handle that fact I simply put the js of the related html file right into that specific one by posting it with the <script> command, e.g. like this:
<script type="text/javascript">
$(document).ready(function () {
$(".faq").click(function () {
$(this).find(".faq_answer").toggle();
});
});
</script>
I'm totally unhappy with it and so my question is: is there a way I could put my js back in my global.js file?
If I understand correclty your question, you need to use even delegation to assign event handlers to elements that doesn't exist yet
$(document).on("click",".faq", function (){ ... })
Where document can be replaced by any container of .faq that exists at bind time.
For more details check "Direct and delegated" section here
Try to load the page through your global.js inside of keeping it in your html page.
Keep the script that will load the content first.
This should work

How to make a div onload function?

I want to load an HTML page as a div inside my webpage by removing its HTML and body tags. But the HTML page has a <body onload=" ... " > , I need this function to continue working. Seems <div onload=" ... " > is not working. How can I insert this onload function into my website's body (on this page only) without directly editing my original website code (php)?
Have you used jQuery before? If so, just get the id of your div (let's say "SomeDiv") and then use the "ready" method like this:
$("#SomeDiv").ready(
function(){
//do stuff
});
you can use jQuery.load to load the contents of the page into your div
$(document).ready(function() {
$("#containing-div").load("[url of page with onload function]");
});
the code above goes in the page that contains the div. the page with the onload function doesn't get changed.
You can add an additional Javascript tag at the end of the loaded page (once inserted inside the div) which will executing as soon as it's loaded. Like this:
<div>
Insert the inner html content of that pages here and add this script at the bottom and add the onload function of the original html to this script.
<script type="javascript">
alert("hello world");
</script>
</div>
Just remember to have the javascript available to your page. What I mean is that if the javascript function called which is called inside onload="..." is defined in the <head> of the loading html document and you're throwing the <head> out then this won't work.
Not the best but one way is to check the div periodically if it's loaded:
var myInterval = setInterval(function () {
if ($('.mydiv') && $('.mydiv').width() > 0) {
// write your logic here
clearInterval(myInterval);
}
}, 3000);
If you want to add the onload event on a div, you cannot, but you can add onkeydown and trigger the onkeydown event on document load.
<div onkeydown="setCss();"></div>
$(function () {
$(".ccsdvCotentPS").trigger("onkeydown");
});

Categories

Resources