Solution: Scripts not working after Ajax replaces part of page

an .on on the body is really nasty Adam. You nto see why?

Google , heaps of articles out there on how you do it the right way Adam.

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.

What happens when you run a script, when you want it, not constant as you shown here. Google, honestly. You wont see ajax re-iniitlsement done in this way. I really would never do it like this ever.

I will do try find time to do a demo with your method and one of the correct ways and get you to run it in chrome and actually see how much more time your method has and load on it.

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

Hi Adam,

There seems to be a total disconnect in this thread.

You originally posted "BC updates the product information via an ajax call when you click the 'add to cart' button or make selections between product groupings."

With a BC ajax call and there is no way to access a call back, not that I've found anyway.

The .on() solution works. There may be a slight performance penalty but there are situations where it seems to be unavoidable to make the UI work.

So the problem simply stated is: "BC ajax breaks jQuery bindings and there is no way to rebind without access to a callback."

If there is in fact a way to rebind without .on() or a similar approach I would love to hear about an ACTUAL SOLUTION.

Can we please see a serious discussion of this issue and hear from BC developers?

It is a real problem trying to implement the myriad work arounds necessary to create a quality shopping experience with your hands tied.

Your getting there Adam

Is there an example for using jQuery.Deferred() to hook into ajax callback?

function executeCallback(callback,param){

        if (typeof callback === 'function') {

                var deferred = $.Deferred();

                if (param) deferred.resolve(callback(param));

                else deferred.resolve(callback());

                return deferred.promise();

        }

}

$.ajax({

        type: 'POST',

        url: 'my/action/path',

        data: $('#myForm').serialize(),

        success: function(response) {

                executeCallback(myScript,response);

        }

});

Just for future people you might want to update the original post as you figured out that the entire page isn't refreshed just the container DIV. You have the correct methods with rebinding everything on content reload.

Wish I could. I can't edit the original post.

Although it would be nice to handle shopping cart behavior as part of the BC framework, I was able to finally implement work arounds to do what I needed to get control over a number of validation\UI scenarios. Thank you Adam\Liam, your posts helped guide the way.

To do this, I wrapped the entire cart contents in a DIV and gave it an ID of "catCartDetails" so I can bind to it's onChange event. In the query onChange function I then bind the ajax monitoring to receive the ajax submission events made by BC when the shopping cart page is changed. This is important to handle multiple iterations based on user interactions. Inside the ajax monitor I have function calls to handle whatever is needed, in my case;

1) I have a function to handle multiple checkout validations with corresponding UI behavior and Google Analytics calls to implement the new eCommerce Checkout Funnel.

2) Correct implementation of "Continue Shopping" link that returns customer to the last page they were on.

3) Function that rebuilds mobile specific cart behavior.

<script type="text/javascript">

      $("#catCartDetails").on("change", function() {

            $.when( $.ajax( "/ajaxpro/CMS.OrderRetrievev2,Catalyst.Web.CMS.ashx") ).then(function( data, textStatus, jqXHR ) {

                     shippOptionsValidate();

                     setContinueShopping()

                     mcartBuild();

               });

        });

     //Click on BC generated "Remove" link was not changing my DIV, but rather the table cell contents it creates, so needed to

     //bind to the remove link click event to run same logic.

     $(".mcart-remove").click(function(){

            $.when( $.ajax( "/ajaxpro/CMS.OrderRetrievev2,Catalyst.Web.CMS.ashx") ).then(function( data, textStatus, jqXHR ) {

                  shippOptionsValidate();

                   mcartBuild();

                   setContinueShopping();

            });

      });

</script>

SOME ADDITIONAL NOTES:

To run code specific to mobile and testing I setup a new domains, i.e. mobile.mywebsite.com and test.mywebsite.com; and created a utility controller that helps manage running code for mobile, testing, other, etc.

To not hose up your Google analytics with development\test traffic, setup filters to exclude hostname test.mywebsite.com.

To test your Google eCommerce functionality, setup a new view in Google Analytics for your domain, call it "Testing" or something like that and apply the reverse logic; by filter only include traffic from  test.mywebsite.com

Glad you guys have solutions, Interest use of .when and .then - Not actually what they are there to use for though. I have a youtube channel I will be doing videos on jQuery, BC and one of the first is what you would use .when for example. But interest use.

The method I will be a git about and not sure to solve all BC dom activity issues is actually so simple. IF your app building for example as well (and if not it is a great way to learn activity, the dom, binding etc) you will lean a lot about binding and not just trying to keep things a live but how you keep states or reactivate states etc.

I will defiantly be doing  the .when and .then and show everyone the tricks people miss with .on though.