I run an eCommerce website. On our order confirmation page we run a third-party javascript that automatically executes an optional survey.
The problem with the survey is that it takes twenty seconds to execute and slows down the rendering of the crucial 'Order Complete' page.
I am wanting to prevent loading of this script until the customer clicks a button.
Ideally, the page will load without executing the script. There will be some text on the page that says, "Would you like to take a survey? If yes, click here." Then the page will call the third-party javascript to execute the survey code.
Below is the third-party javascript. The first script tag just collects variables, and the second script tag actually runs the survey code.
<script language="JavaScript">
// var passin_x =; //comment out to default center or adjust horizontal position by pixel
// var passin_y =; //comment out to default center or adjust vertical position by pixel
var orderId='##order_id##';
// var z_index =; //default 9995
var cartTotal='##purchase_total##';
// var billingZipCode=;
// Pass up to 5 products from customer shopping cart
//var productsPurchased= 'URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=';
</script>
<script type="text/javascript" src="https://eval.bizrate.com/js/pos_xxxxx.js">
</script>
How can I dynamically load the script after the click event?
I used jQuery.getScript to dynamically load the script after the click event.
Specifically, I used the technique shown here:
http://www.tutorialspoint.com/jquery/ajax-jquery-getscript.htm
Which looks like this:
$(document).ready(function() {
$("#driver").click(function(event){
$.getScript('/jquery/result.js', function(jd) {
// Call custom function defined in script
CheckJS();
});
});
});
Why would you want to do this anyway? This will slow down your site for calling an external link to fire off your js and if anything happens to the external site then your js functions will be voided and the site may break. This is not a good coding practice you should obtain a copy of the js file and store it locally within your hosting server...
This is just my opinion anyway.
-Epik-
Related
First I used include('pageName.php'); for every page I wanted to load.
Now I decided to rewrite everything and to load a page in a <div id="page_content"></div> with the jQuery function: $('#page_content').load(pageurl, {access:true});
I hope this is the best practice. Because I want to reduce load time on my web application by not refreshing the whole website with all CSS and JS files but just to refresh content when clicked on a new page.
Currently I am using the following function to load pages into the division and to pushState to history:
//Dynload pages
$("a[rel='dynload']").click(function(e) {
e.preventDefault();
var page = $(this).attr("page");
var pageurl = "pages/" + page + ".php";
$('#page_content').load(pageurl, {access:true});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',page);
}
//stop refreshing to the page given in
return false;
});
This works perfectly.
I have this button that triggers this function and gives for attribute page="index_content" . The function will load this page to the division and the state is being pushed into the history.
However. We get an url something like this: https://mywebsite.com/index_content
The problem is, when I load this specific URL into my browser I get : "Page not found" ofcourse, because it is trying to search for the index_content folder which does not exist.
Is there a way to check the url by my PHP/jQuery script and to load the correct page into the division? If not, how can I solve this for a generic case.
When I add a new page, I want to spend no- to very less time on the pageswitcher function.
In that way I can also handle non-existing pages.
Thanks in advance!
I work in advertising. I have a client who has a tracking tag implemented on page load on their advertiser's site. The tracking tag is just a script that calls the JavaScript contained within.
The client is running into a dilemma because they want to trigger another tag when a specific button on the page is clicked on. I don't know the reasoning, but the advertiser's web developers said that it would take them weeks to make the change and the client is aiming to get the tracking set up as soon as possible.
The client's only means of access to the advertiser's page is through the tracking tag called on page load. The client wants to call some JavaScript from the tag that fires on page load that executes a certain function with the button is clicked on. I guess this would involve writing some JavaScript to the document so that it is usable when the button is clicked on.
Questions:
1) Is this possible? In other words, can I take some JavaScript that executes on page load and use it to modify elements on the page?
2) If the button already has another onclick function attached, can we add a second one? The button has a 'class' attribute attached, so could I develop some JavaScript to search for that class attribute and append a second onclick to it? Or would that override the first one?
Note: I cannot use document.write. Would document.appendchild work? Any tips would be appreciated.
To clarify what I want to do again:
1) Trigger JavaScript file on page load.
2) From within that JavaScript file, send a function to the document/page, and attach the reference to that function to a button with a specific class attribute on the page via an onclick attribute.
3) I do not want to override any existing onclick function on the button.
Thanks,
Update:
Here's what I have so far.
<html>
<head>
<script>
function myFunction (){
//do something
}
document.getElementsByClassName('test').onclick = myFunction();
</script>
</head>
<body>
<button class="test"> Submit Request </button>
</body>
</html>
I want to make it so that when the script in the header loads, myFunction is called from the button with class "test". Am I on the right track?
Update 2: Would using setAttribute work?
<html>
<body>
<script>
function myFunction (){
//do something
}
document.getElementsByClassName('test')[0].setAttribute("onclick", "myFunction()");
</script>
<button class="test"> Submit Request </button>
</body>
</html>
I am using the following code to load the bar on click but I can't figure our how to load it on page load automatically.
<script>
var autohide;
$('body').prepend('<div id="bn-bar"><b>DON\'T MISS OUT!</b> Only 9 seats remain for the Google Tag Manager training on May 22! Book Your Seat Today!<div id="hider"> </div></div>');
$(document).ready(function(){
$("#hider").click(function(){
$("#bn-bar").animate({
top: "-50"
}, "fast","linear", function(){});
})
$("#bn-bar").mouseover(function(){clearTimeout(autohide);});
setTimeout(function(){$("#bn-bar").animate({top: "0"}, "slow","linear", function(){});},2500);
autohide = setTimeout(function(){$("#bn-bar").animate({top: "-30"}, "fast","linear", function(){});},10000);
})
</script>
Basically I am trying to load a the message when user enters my website and I will be inserting it via Google Tag Manager. Below is a page where I found the code:
Creative Tag Manager – Ads, Promotions, and Visitor Messaging -Lunametrics
Setting the firing rule for this tag to the default 'All pages' rule will cause it to be included on every page load. To fire it only on the first pageview of the session or based on other conditions, look into the When We Fire Them section of the Lunametrics page you linked.
I want apply load-mask in view page. while launching the application, some view pages are taking time to load data later it will display, so if its taking time to load in that time i want show load-mask to users with some messages like "loading....". from some sample i have applied load-mask, but it is shows that message every time whenever i hit that page. this is bad way because here setting time. i need apply load-mask like this if don't have data it should show the load-mask to the user, until page getting the data. please any one help me. how to achieve this one
My code is here: at controller level i am taking the id of load-mask and setting the property as shown below code
onCompanyPageLoad: function () {
var loader = Ext.getCmp('mask');
loader.setMessage("Loading...");
loader.setIndicator(true);
loader.setTransparent(false);
loader.show();
setTimeout(function () {
loader.hide();
}, 1000);
}
The answer of user978790 is formal way to show and hide a loading mask in Sencha Touch 2.
If you can't make it work, it's very likely that you're doing something like:
Ext.Viewport.setMasked({xtype:'loadmask',message:'your custom loadmask'});
... then do something here
Ext.Viewport.setMasked(false);
Note that Javascript is asynchronous, so it does NOT make sure that the code lines are run in above order. Then there is a possibily that Sencha Touch initializes your loading mask and destroys it right then. In order to use loading mask correctly:
Initialize a loading mask as above.
Put the Ext.Viewport.setMasked(false); in special functions which are ensured to be launched after loading mask initialization, eg. event handler, or success function of your JSONP/AJAX request.
I do it the following way:
Ext.Viewport.setMasked({xtype:'loadmask',message:'your custom loadmask'});
Then you can use
Ext.Viewport.setMasked(false);
To stop showing a loading mask
This also works on components if you only want to show a mask on part of a view
Just remove all this.I have nice idea how to use loader.First on main page html just add loader
<div id="loader"></div>//add id#loader with background loading image
after your page loads just add on contoller Ext.get('loader').destroy();//when you page full load then it will load your loading div
I found this nice jQuery preloader/progress bar, but I cannot get it to work as it is supposed to. The problem is that it first loads my page and after my whole page is loaded the 0%-100% bar displays quickly, after that it reloads my page again. So it does not show the progress bar BEFORE the page loads and it loads the page a second time as well.
Here is my implementation code:
<head>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").queryLoader2();
});
</script>
</head>
<body>
My content...No other reference in here for the Jquery preloader
</body>
Thanks for any help in advance.
I could be very, very wrong here, but in my opinion:
The plugin is flawed.
You have some issue in your page that causes a redirect.
I have created a test fiddle and found out the following:
If there are no images on the page, then the plugin's private function completeImageLoading(); is never called because it is only bound to the image elements. When there are no images -> there's no binding -> no triggering -> nothing completes -> you stay with overlay 0% as demonstrated by the fiddle that is NOT RUN (jsfiddle doesn't see relative images when the page is not run).
The plugin doesn't take into consideration remote images. So if you declare them like so <img src="http://example.com/image.jpg"> - then it won't work because the plugin doesn't recognize them. In fact it is using $.ajax to load images which, obviously, generates a error when trying to access another domain.
The plugin doesn't reload the page (at least in Google Chrome)... check your console output while in the fiddle. It displays the message once per click on Run.
Suggestions:
Make sure you provide at least one relative or background image (though I haven't tested backgrounds...) for the plugin to work.
Show us more code. The fiddle demonstrates that the plugin does NOT cause page reload (at least in Chrome... are you using another browser?). It must be something you made that interferes here.
Specify some options for the plugin (behaves weird when there are none).
Edit regarding preloader
Regarding preloader... if displaying progress is not mandatory for you, then you can just use a window.onload trick. On DOM ready $(...) you create an opaque page overlay with a "Please wait..." message and some animation if you fancy it. Then you wait for window.onload event which "fires at the end of the document loading process... when all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading." When window.onload triggers, you just remove your overlay and voila - the page is ready!
Edit 2 regarding preloader
Actually, you don't even need $(...)... what the hell was I thinking? Just create your overlay (a simple div with a unique id) in your html, style it so that it fills the screen and give it a z-index:1337 CSS attribute so that it covers the entire page. Then, on window.onload:
window.onload = function () {
// Grab a reference to your overlay element:
var overlay = document.getElementById('myOverlay');
// Check if the overlay really exists
// and if it is really appended to the DOM,
// because if not - removeChild throws an error
if (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
// Remove overlay from DOM:
overlay.parentNode.removeChild(overlay);
// Now trash it to free some resources:
overlay = null;
}
};
Of course, it's not really a preloader, but simply an imitation.
Here's a working fiddle you can play with.
P.S. I personally don't appreciate preloaders, but that's just me...
Try out this(Remove the document.ready event and simply call this):-
<script type="text/javascript">
$("body").queryLoader2();
</script>