jQuery and asp.net not playing nice together

Question

Please refer to this page for reference: http://loadedgranola.valitics.com/_product_83484/blackberry_lime

I have a jQuery script that runs to replace the h1 tags with a background image. It works great when the document loads but when I click "add to cart", after the javascript alert the jQuery styling breaks. Due to CMS restrictions I have no direct access to their javascript or any of the ASP files but I assume there has to be an easy fix to this.

The code I'm using:

jQuery(document).ready(function(){

            var textReplacer = document.title.replace(/ /g,'');
            jQuery("h1").addClass('replaced').css("background","url(../images/h1/" + textReplacer + ".png) no-repeat 0 0");
    });

I have also tried using the function pageLoad(sender, args) { magic but no luck.

Answer 1

Here is what is happening:

When you submit the shopping cart it's doing an AJAX call. The result of that call replaces most of the HTML on the page. Any changes you made before that get replaced.

Possible Solution

You would have to run that replace script again after the AJAX call is complete.

Questions

Why are you replacing the H1 tags on load? What problem are you trying to solve? You might be able to find a better CSS solution.

Answer 2

Here you go ..

jQuery(document).ready( function() {
       jQuery('<style type="text/css" media="screen">h1{text-indent:-9999px!important;background:url(../images/h1/'+document.title.replace(/ /g,'') +'.png) no-repeat 0 0!important;}</style>').appendTo('head');
});

what it does is add a new css rule that pushes the text way out of the box and adds the background image