I'm far from an expert at js and jQuery, so I welcome collaboration and corrections on this solution. This is all from the context of a catalog's large product view when using ajax to switch between grouped products.
First, the issue:
- BC updates the product information via an ajax call when you click the 'add to cart' button or make selections between product groupings.
- When BC does this, it entirely reloads page_content.html. The net result: all the script bindings that were attached to those tags are wiped out.
- The scripts are never rebound to the tags because that initially occurs when the DOM is being created. Content changes via an ajax call don't recreate the DOM.
Possible solutions:
- Hardcode the affected scripts inside page_content.html. Don't just link a script file to it. It has to be hardcoded. This is not recommended, as it is bad coding practice to place scripts inline with our html.
- Avoid the use of scripts in that area (good luck
). - Use delegation with .on() to rebind. I believe this is the best option, and it's the one I am going to demonstrate.
To avoid inline scripts, I like using an external script.js file. It keeps my document clean from script clutter and it's easier to manage my scripts. Also, I want a solution I can implement one time, in one place, instead of with every situation I encounter. Below is an example of how my scripts are organized. The areas in bold are the specific solution.
jQuery.noConflict();
function scriptlist() {
var $ = jQuery;
var Engine = {
utils : {
functionName : function(){
// Do stuff in here
},
functionName2 : function(){
// do something else
}
},
ui : {
functionName : function(){
// Do stuff in here
},
functionName2 : function(){
// do something else
}
}
};
if ( $(element).length ) { Engine.utils.functionName(); }
if ( $(element2).length ) { Engine.utils.functionName2(); }
if ( $(element3).length ) { Engine.ui.functionName(); }
if ( $(element4).length ) { Engine.ui.functionName2(); }
};
jQuery('body').on('click.productSubmitInput', function(){
jQuery.ready(scriptlist());
});
scriptlist();
The key here was the use of the .on() jQuery method. Here is how it works:
- I attached on() to the body element on the page with jQuery('body').on()
- It's attached to the body, because the body is outside of page_content.html and won't have it's binding removed during the ajax call. Events register all the way up their ancester elements on the page, so on() can pick up the event all the way up to the body.
- Told it to look for a certain event: 'click.productSubmitInput'
- When the event occurs, it should trigger ready() to refresh the DOM. jQuery.ready()
- and run my functions against it, thereby rebinding my document.
27
Replies
Really fun to google and read articles.
Also side note. I hope people test IE when they do partial refresh stuff, they may notice something if they do not know what IE does 
When you Ajax Adam, basically you have a callback element to it. It is there for a reason 
You really need to google, no where near faster, bit cringe worthy actually I do not think you understood what I said.
You will get double launches on some instances if you do that as well (done similar you see myself, trying to be clever and not research).
Look at the jQuery ajax.
On success as a function you can do stuff. Your code is all objects, what do you need to trigger, what are you actually fetching?
When to use .load, .ajax, .post .get etc. What are you fetching and bringing to the table.
Also you have IE. IE Even in the latest one (but does not generate the issue mind you) heavily caches. MS cheat the speed they have by heavy heavy cache.
You use ajax to refresh an image on a page it will work in all but IE. IE cached it, wont let it go. Even does it with content elements that contain images and other cases.
Think about what you done, Everything always on. Do that with a light switch what happens?
jquery Ajax can set the response as text, html json etc depending on what is returned. You can have html returned and handle it.
But there is always a success and fail. I see heaps of people on BC using ajax and have a blind success and no correct handling.
Take a bc confirmation page from something which is a success or fail. Both those in terms of ajax is a success so you handle that on top.
But a sucess function is something you run anything in.
If a function or object of yours ends due to an ajax load you only need to relaunch that, not everything or have everything live.
You also need to consider that inline scripting in some calls will actually run. IF you have html response and just dump it in a element it will execute and screw up.
Your method will also run into endless loops as wll in some cases.
http://api.jquery.com/jQuery.ajax/
http://jqfundamentals.com/chapter/ajax-deferreds - Read the asynchronous bit
AdChoices