I load this javascript file dynamically in the <head/> of my document like this
<script type="text/javascript">
if (window.screen.width <= 1600)
{
console.log("start");
var jsref1 = document.createElement('script');
jsref1.setAttribute("type", "text/javascript");
jsref1.setAttribute("src", "/javascript/mobileFunction.js");
document.getElementsByTagName("head")[0].appendChild(jsref1);
}
console.log(end)
</script>
In my all my javascript file I have this custom event called which is at the end of $(document).ready
$(document).on("xsltready", function () {
...more code....
console.log("event alled here " + a variable);
The problem is that I see the output for the two console from the dynamically loaded javascript and when I check the resource folder under the script folder in web-inpector(I am using mobile safari and remote web inspector) the file is there. The problem is that sometimes when I refresh the page it looks like the file is not loaded since none of the console.log() from inside the script is executed and. But if I refresh a few times again it comes back. Is this a behavior with loading javascript dynamically?
Note
I can still call the method inside the dynamically loaded JS file, but the custom event I trigger at the end of $(document).ready is not executed at all.
Thanks to #Levi, his comment is above he helped me go in the right direction. He was correct in that the the $(docuemnt).ready is fired before the script has loaded. the DOM does not wait for the script to load, before it is ready. ~ Levi. So what I did was instead of firing my custom event in the $(docuemnt).load it is fired in the $(window).load event, which solve the problem. But now I have a performance issue.
Related
tl;dr
I use ajax to fetch new content. The content is fetched and added to the page. However, scripts don't "re-fire" because their calls are outside of the ajaxed div.
The scripts load and fire without any problem on initial page load but not when I add new content via ajax. I get no console errors and there are no issues if I visit the URL directly.
Related:
Forcing Script To Run In AJAX Loaded Page - Relates to one specific script. I want to fix (refire) all scripts including dynamic ones from Cloudflare apps
Using jQuery script with Ajax in Wordpress - Same as above, this relates only to one specific script
ajax loaded content, script is not executing
Intro:
I use Ajaxify WordPress Site(AWS) on a WordPress website.
The plugin lets you select a div by its id and then fetches new content inside that div using ajax
html markup
<html>
<head></head>
<body>
<div id="page">
<header></header>
<main id="ajax"> <!-- This is what I want to ajaxify -->
<div class="container">
main page content
</div>
</main> <!-- end of ajaxfied content -->
<footer></footer>
</div> <!-- #page -->
</body>
</html>
Problem
The plugin works and I get fresh content loaded and styled but there is an issue. Some of my page scripts and function calls are outside of the div that I use ajax on. I have two examples
1- Masonry is loaded and called in the <footer>
<html>
<head></head>
<body>
<div id="page">
<header></header>
<main id="ajax"> <!-- This is what I want to ajaxify -->
<div class="container">
main page content
</div>
</main> <!-- end of ajaxfied content -->
<footer></footer> <!-- Masonry script is loaded and called here -->
</div> <!-- #page -->
</body>
</html>
2- Google maps call is in the <head>
<html>
<head></head> <!-- Google maps is called here -->
<body>
<div id="page">
<header></header>
<main id="ajax"> <!-- This is what I want to ajaxify -->
<div class="container">
main page content
</div>
</main> <!-- end of ajaxfied content -->
<footer></footer>
</div> <!-- #page -->
</body>
</html>
These are just two examples. There are others in other locations. As you can tell, such scripts won't be re-called as the only thing that reloads on the page is <main id="ajax">. While the new content inside <main> is there, some of the scripts required to render it properly are not re-called and so I end up with missing elements / broken layout.
I am not the only one who has faced this problem; a quick look at the plugin's support forum on wordpress.org shows that this issue is common.
Note: I wouldn't try to fix this if the plugin had many other issues. It works for me I just need the scripts to re-fire.
The official response is that it's possible to reload / re-fire scripts by adding the following into the plugin's php files:
$.getScript(rootUrl + 'PATH TO SCRIPT');
Which works. It works well. for example if I add
$.getScript(rootUrl + '/Assets/masonry.js');
Then the masonry function calls get re-fired when the ajaxed content is fetched even if masonry.js is loaded outside of the ajaxed div
I refer you to the plugin's files on github for more clarity on what the fix actually does (I can't make sense of what happens when $.getScript is used)
In summary
The official fix works fine if you have 3-4 scripts that need to be re-fired on ajaxed content.
This does not work for my goal because
it's too rigid and hard-coded
Some of the scripts are added to the page dynamically via Cloudflare apps
A possible solution might involve adding an event mimics the trigger that causes the scripts to fire at the bottom of the ajaxed div
Question:
How do I force all scripts - including dynamically added ones - to re-fire when only a certain part of the page has been reloaded via ajax?
Notes:
I am trying to avoid calling out scripts one by one as that would require knowledge of their calls before hand. I am probably talking way over my head but...
I am trying to mimic the page load and / or document ready events - at which most conditional scripts are fired (correct me if I'm wrong) - at the end of <main> in my html when new ajaxed content is added but without affecting the document when the page is loaded via using the url directly...or any other similar approach.
Just for a bit of context, here is a list of some the event listeners on the page while the plugin is off. I know there are things in there I won't have to trigger. I just added this for reference. Also, please note that this is a sample taken from one of the pages. other pages may differ.
DOMContentLoaded
beforeunload
blur
click
focus
focusin
focusout
hashchange
keydown
keyup
load
message
mousedown
mousemove
mouseout
mouseover
mouseup
mousewheel
orientationchange
readystatechange
resize
scroll
submit
touchscreen
unload
The solution you choose here will have to depend on how the scripts are initialized. There are a couple common possibilities:
The script's actions are evoked immediately upon loading of the script. In this case, the script might look something like this:
(function() {
console.log('Running script...');
})();
The script's actions are evoked in response to some event (such as document ready (JQuery) or window onload (JavaScript) events). In this case, the script might look something like this:
$(window).on('load', function() {
console.log('Running script...');
});
Some options for these two possibilities are considered below.
For scripts that run immediately on loading
One option would be to just remove the <script> elements you want to trigger from the DOM and then reattach them. With JQuery, you could do
$('script').remove().appendTo('html');
Of course, if the above snippet is itself in a <script> tag, then you will create an infinite loop of constantly detaching and re-attaching all the scripts. In addition, there may be some scripts you don't want to re-run. In this case, you can add classes to the scripts to select them either positively or negatively. For instance,
// Positively select scripts with class 'reload-on-ajax'
$('script.reload-on-ajax').remove().appendTo('html');
// Negatively select scripts with class 'no-reload'
$('script').not('no-reload').remove().appendTo('html')
In your case, you would place one of the above snippets in the event handler for AJAX completion. The following example uses a button-click in lieu of an AJAX completion event, but the concept is the same (note that this example doesn't work well within the StackOverflow sandbox, so try loading it as a separate page for the best result):
<html>
<head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script class="reload-on-ajax">
console.log('Script after head run.');
</script>
<body>
<button id="reload-scripts-button">Reload Scripts</button>
</body>
<script class="reload-on-ajax">
console.log('Script after body run.');
</script>
<script>
$('#reload-scripts-button').click( () => $('script.reload-on-ajax').remove().appendTo('html') );
</script>
</html>
Note that if the scripts are not inline (e.g. fetched via the src attribute), then they will be reloaded from the server or retrieved from browser cache, depending on the browser and settings. In this case, the best approach is probably to remove all the <script>s that operate on the AJAX-loaded content, and load/run them via something like JQuery's getScript() function from an AJAX completion event handler. This way you will only be loading/running the scripts once at the appropriate time (i.e. after the AJAX content is loaded):
// In AJAX success event handler
$.getScript('script1.js');
$.getScript('script2.js');
A potential problem with both variants of this approach is that asynchronous loading of the script is subject to cross-origin restrictions. So if the scripts are hosted on a different domain and cross-origin requests are not allowed, it won't work.
For scripts that run in response to an event
If the scripts are triggered on window load, then you can just trigger this event:
$(window).trigger('load');
Unfortunately, if the scripts themselves use JQuery's document ready event, then I'm not aware of an easy way to trigger it manually. It's also possible that the scripts run in response to some other event.
Obviously, you can combine the above approaches as necessary. And, as others have mentioned, if there's some initialization functions in the scripts that you could just call, then that's the cleanest way.
If you can identify a global initialising function or code block in your external scripts, you could take a look at the 'ajaxComplete' event. You can put this code in your page head and put the initialising function calls or code blocks inside the ajaxComplete callback.
$(document).ajaxComplete(function(){
module1.init();
$('#my_id').module2_init({
foo : 'bar',
baz : 123
});
});
When the scripts you are talking about don't have such easy-to-use exposed initialising functions, but initialise themselves on scriptload, I think there will be no out of the box method that works for all scripts.
Here's what you can try -
Most of the scripts like masonry or Google Map are set to re-init on window resize. So, if you trigger the resize event after ajax complete, it will help to re-fire those scripts automatically.
Try the following code -
$( document ).ajaxComplete( function() {
$( window ).trigger('resize');
} );
This will force the scripts to re-init once ajax is completed as it will now trigger the resize event after the content is loaded.
Maybe risky, but you should be able to use DOMSubtreeModified on your <main> element for this.
$('#ajaxed').bind('DOMSubtreeModified', function(){
//your reload code
});
Then you should be able to just append all your scripts again in your reload area
var scripts = document.getElementsByTagName('script');
for (var i=0;i<scripts.length;i++){
var src = scripts[i].src;
var sTag = document.createElement('script');
sTag.type = 'text/javascript';
sTag.src = src;
$('head').append(sTag);
}
Another option could be create your own event listener and have the same reload code in it.
$(document).on('ajaxContentLoaded', function(){//same reload code});
Then you could trigger an event in the plugin once the content had been updated.
$(document).trigger('ajaxContentLoaded');
Or possibly a combination of editing the plugin to trigger a listener and adding to your codebase to re-run anything you feel you need to have re-ran off that listener, rather than reload anything.
$(document).on('ajaxContentLoaded', function(){
//Javascript object re-initialization
myObj.init();
//Just a portion of my Javascript?
myObj.somePortion();
});
A solution could be duplicating all the scripts...
$(document).ajaxSuccess((event, xhr, settings) => {
// check if the request is your reload content
if(settings.url !== "myReloadedContentCall") {
return;
}
return window
.setTimeout(rejs, 100)
;
});
function rejs() {
const scripts = $('script[src]');
// or, maybe alls but not child of #ajax
// const scripts = $('*:not(#ajax) script[src]');
Array
.prototype
.forEach
.call(scripts, (script, index) => {
const $script = $(script);
const s = $('<script />', {
src: $script.attr('src')
});
// const s = $script.clone(); // should also work
return s
.insertAfter($script)
.promise()
.then(() => $script.remove()) // finally remove it
;
})
;
}
I had this exact problem when attempting to use ajax to reload a page with browser states and history.js, in wordpress. I enqueued history.js directly, instead of using a plugin to do that for me.
I had tons of JS that needed to be "re-ran" whenever a new page was clicked. To do this, I created a global function in my main javascript file called global_scripts();
Firstly, make sure this JS file is enqueued after everything else, in your footer.php.
That could look something like this:
wp_enqueue_script('ajax_js', 'url/to/file.js', 'google-maps', 1, true);
My javascript that I enqueue is below.
jQuery(document).ready(function($) {
// scripts that need to be called on every page load
window.global_scripts = function(reload) {
// Below are samples of the javascript I ran that I needed to re run.
// This includes lazy image loading, paragraph truncation.
/* I would put your masonry and google maps code in here. */
bLazy = new Blazy({
selector: '.featured-image:not(.no-blazy), .blazy', // all images
offset: 100
});
/* truncate meeeee */
$('.post-wrapper .post-info .dotdotdot').dotdotdot({
watch: 'window'
});
}
// call the method on initial page load (optional)
//global_scripts();
});
I then hooked into the JS that ran whenever a page was loaded with history.js and called global_scripts();
It seems as though the plugin you are using also uses history.js. I haven't tested it with your plugin specifically, but you can try what I posted below (which is what I use in my app).
This would go in the same JS file above.
History.Adapter.bind(window, 'statechange', function() {
global_scripts();
}
My code is a bit more complicated than what is simply pasted above. I actually check the event to determine what content is being loaded, and load specific JS functions based on that. It allows for more control over what gets reloaded.
note: I use window.global_scripts when declaring the function because I have separate JS files that hold this code. You could chose to remove this if they are all in the same.
note2: I realize this answer requires knowing exactly what needs to be reloaded, so it ignores your last note, which asks that this doesn't require such knowledge. It may still help you find your answer though.
Short answer:
It is not possible to this in a generic way. How should your script know which events needs to be fired?
Longer answer:
It is more like a structural question than a programmatic one. Who is responsible for the desired functionality? Lets take masonry as an example:
Masonry.js itself does not listen to any events. You need to create a masonry instance by your own (which is most probably done on domready in your Wordpress plugin). If you enable the resize option it will add a listener to the resize event. But what you actually want is some listener on "DOM content change" (see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver for possible solution). Since masonry.js does not provide such a function you have the following options:
Wait for the implementation (or do it yourself) in masonry.js
Wait for the implementation (or do it yourself) in masonry Wordpress plugin.
Add the functionality somewhere else (your template, your ajax plugin, etc.)
4.
As you can see every option includes some work to be done and this work needs to be done for every script you want to listen to your AJAX invoked DOM changes.
I have code I'd like to run before the page is rendered. For example updating dates from absolute time to relative time or converting raw text (or markdown) to html. If I reload the page several times I can see occasionally there's flickering updating the changes. How do I run the code as it's drawn instead at the end where it needs to redraw everything?
I tried document.addEventListener('beforeload' it appears that event is depreciated and no longer supported in chrome
You'll need to think about your page lifecycle.
When your page is being loaded, if a <script> tag is encountered, it will immediately be executed, and prevent any more content being rendered until that script is complete. This isn't recommended practice.
But, to answer your question, you could do something like this:
<p>Your next reward will be available in <span id="nextRewardTime">3600</span>.</p>
<script type="text/javascript">
var $el = $('#nextRewardTime');
$el.text(format($el.text());
</script>
<p>Come back soon!</p>
Now, immediately after the first <p> is downloaded by the browser, it'll hit the <script> tag and execute the JS. Only once that is complete will it download the next <p> tag ('Come back soon!').
You can't attach an event handler to the Javascript before it's been rendered on the DOM, because... well... it's not on the DOM.
The better way of doing this is to format the thing correctly on the server in the first place.
Edit: Also, scattering script tags throughout your page makes your code really unmaintainable!
I would use document.readyState and a self-invoking function:
<body>
<script>
function executeFunction() {
//do stuff - such as check for anchor tags
$("a").html('Replaced');
if (document.readyState === 'loading') executeFunction(); // repeat to ensure all the tags get innerHTML-ed
}
(function(){
if (document.readyState === 'loading') executeFunction();
})();
</script>
<!-- more HTML -->
</body>
It seems that you want JS to execute as the page is loading. You may also want to try using uninitialized as the ready state (which occurs before "loading").
I would like to track if a toast (or any "popup element") gets displayed using Google Analytics Event Tracking via GTM.
Whether or not the toast gets displayed is defined by jQuery code and based on cookie information like so
function ShowToast(Msg){
$('#toast-msg').html(Msg);
$('#toast').animate({ left: '-10px' });
}
called by
<script type="text/javascript">
$(function() {
ShowToast("SOME HTML");
});
</script>
This is what I got in GTM so far using a custom variable
function(){
if(document.querySelector("#toast #toast-msg").length > 0){
return true;
}
}
with a trigger listening for this variable to be true and the usual Universal Analytics Event Tag. The idea is to simply check if the toast-msg is shown or not, which works fine in preview mode.
Now to the problem: The tag is listening to gtm.js (pageview), but the jQuery code from the toast might load only after gtm.js is ready. Hence, sometimes the toast is not yet displayed when the tracking code is ready to fire and the event is not recorded.
Is there a way to use GTM and Javascript / JQuery to make sure all JQuery is loaded before GTM variables/triggers/tags are resolved? Or a completly different approach?
Make Sure you have the dataLayer initialized in the <head> of your document by including this line of code: <script>window.dataLayer = window.dataLayer || [];</script>
Add this code to your jQuery toasts (or whatever else you want to track) dataLayer.push({'event': 'event_name'});
Create a Custom Event trigger in GTM with the event_name you chose above.
Create a GA Tag of type event with the above trigger
One method is to push an event to dataLayer when the popup is loaded.
the other method is you can fire your code and gtm.dom or gtm.load(when the page is completely loaded)
Check the related article for more details http://marketlytics.com/analytics-faq/control-gtm-tags-to-wait
While using the dataLayer works, as suggested by others, I also found that my code works using two alterations:
Change errenous code: document.querySelector("#toast #toast-msg").innerHTML.length > 0 I forgot the innerHTML attribute
In order to ensure that jQuery has loaded I changed the trigger type to gtm.dom, which triggered the event reliably thus far.
I recently added a feature to our ASP.NET MVC web application. There's a page that is displayed when the user clicks on an item in a table. The page uses AJAX to display a partial view in a single div in the page's HTML. The partial view uses the Telerik Kendo UI to define and display dialogs and DropDownList controls. This is complicated in that the JavaScript imports are all on the View for the page, while the PartialView just builds the HTML to be displayed in the div.
The JavaScript I wrote on the page includes a jQuery document.ready event handler:
$(document).ready(
function () {
if ( $('#details-map').val() != '' )
$('#details-map').remove();
var urlTail = '?t=' + (new Date().getTime());
// Make the AJAX call and load the result into the details box.
$('#detailsbox').load('<%= Url.Action("Details") %>' + '/' + '<%: Model.Id %>' + urlTail, displayDetails);
}
)
This works fine when I run the application on my localhost. The problem appears when I deploy the page to our development server. In this case, there's an additional document.ready event handler that's emitted to very end of the page by the Telerik Kendo / ASP.net MVC extensions:
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
if(!jQuery.telerik) jQuery.telerik = {};
jQuery.telerik.cultureInfo=...;
});
//]]>
</script>
On this page, the $(document).ready event handler I wrote runs before the Telerik handler, and my code clearly depends on the Telerik handler running first. When mine runs first, I get a JavaScript error that says "jQuery.telerik.load is not a function'.
Since this does not happen on my localhost, how do I make sure that the second document ready event handler is run first?
Edit:
After more research, I've found that the problem is that the two scripts mentioned in my answer, which are supposed to be written to the page via the following line in the Master Page used by my page:
<%= Html.Telerik().ScriptRegistrar().Globalization(true).jQuery(false).DefaultGroup(group => group.Combined(false).Compress(false)) %>
Are not being loaded. In other words, the above line does nothing. It works on another page that uses the same Master Page, though. I've placed a breakpoint on the line and it is executing. Does anyone have any ideas?
You're either going to have to make it show up after the second one on the page OR do something I hate to suggest:
$(document).ready(function() {
function init {
/* all your code that needs to be run after telerik is loaded */
}
if ( $.telerik ) {
init();
} else {
setTimeout(function check4telerik() {
if ( $.telerik ) {
return init();
}
setTimeout(check4telerik, 0);
}, 0);
}
});
So, if $.telerik is loaded, it runs, otherwise it polls until it's set, and when it is set, it runs the code. It's not pretty, but if you don't have more control, it's probably your only option, unless $.telerik emits some kind of event that you can hook into.
After spending a few hours working on this, I finally got it to work. The problem turned out to be that two JavaScript files that are used by the Telerik DropdownList control and Window control were not being loaded.
In spelunking through the JavaScript on the page, I came across this script that was generated by Telerik:
if(!jQuery.telerik){
jQuery.ajax({
url:"/Scripts/2011.3.1306/telerik.common.min.js",
dataType:"script",
cache:false,
success:function(){
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}});}else{
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}
This script was emitted by a call to Html.Telerik.DropdownListFor() in my partial view. I'm guessing that the code to include for the two JavaScript files mentioned in the code, telerik.common.min.js and telerik.list.min.js, was not emitted since the call was on a partial view. Or I was supposed to include them all along & didn't know it (I'm very new to these controls). Oddly, everything worked when I ran it locally, so I don't get it.
In any case, I added two <script> tags to my View to include these files and everything started working. That is, I added the following tags to my page:
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.common.min.js"></script>
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.list.min.js"></script>
Live and learn.
I have a script that will be inserted into an unknown page at an unknown time. Is it possible to tell from this script if window.onload has fired yet?
I have no control over the host page. I can't add any markup or scripts to it. All I know is that my script will be inserted into the page at some point. It could be before window.onload or after; and I need to detect which side of that event I'm on.
Updated Answer:
Look at this site. He uses a trick by seeing if the last element of document.getElementsByTagName("*") is defined or not. It seems to work in Opera and IE.
Original Answer:
You can't check, but you can do:
window.setTimeout(function () {
// do your stuff
}, 0);
That will do your stuff definitely after the page has loaded.
jQuery's ready() will queue a function to be fired when the document is loaded, or fire immediately if the document is already loaded:
$(document).ready(function() {
//your code here
});
Just be sure jQuery is included before your script block. If you can't include any script resources directly, you can always copy the body of jQuery-min in your script itself.