JS not working in Ajax page

hey, i use an "Image swap" (onmouseover image change/slideshow) script in my Ajax powered (pagination) page.

here's the JS codes:

/***** M U L T I S W A P *****

scripterlative.com

Usage: new MultiSwap( image ID, period (ms), 'first_image.gif'[, other images] );

** DO NOT EDIT BELOW HERE ***/

function MultiSwap(imgRef, period) 
{
 this.period=period;  
 this.timer=null;
 this.index=0;
 this.theElem=document.getElementById(imgRef);
 this.defSrc=this.theElem.src;
 this.imgData=[];

 for(var i=2,j=0; i<arguments.length; i++,j++)
 {
  this.imgData[j]=new Image();
  this.imgData[j].src=arguments[i];
 }

 this.trigElem = (this.theElem.parentNode.tagName=='A' ? this.theElem.parentNode : this.theElem);

 this.trigElem.onmouseout=this.trigElem.onblur=(function(obj){ return function()
 { clearInterval(obj.timer);
   obj.theElem.src=obj.defSrc; 
   obj.index=0;
 }})(this);

 this.trigElem.onmouseover=this.trigElem.onfocus=(function(obj){return function()
 {
  obj.trigElem.onmouseout();
  obj.timer=setInterval( (function(inst){return function(){inst.swap()}})(obj), obj.period);
 }})(this);

 this.swap=function(/*73637269707465726C61746976652E636F6D*/)
 {
  if(this.index==this.imgData.length)
   this.index=0;  
  this.theElem.src=this.imgData[ this.index++ ].src;
 }
}

/** End **/

Code (markup):

& here's what i use in BODY to apply that script

<img src="1.gif" id="img1" />

<script type='text/javascript'>
new MultiSwap('img1', 300, '2.gif','3.gif','4.gif','5.gif','6.gif','1.gif');
</script>

HTML:

as i said i use it in a Ajax pagination powered page, its working nice in page 1 (that means still ajax is not used)
but then its not working (that means ajax is on, so this script not working)

plz help me

 

You need to post the other script.

 

what other script?
u mean the AJAX page??

nothing else there...almost same as the main file, just a pagination line

 

Okay, well maybe the ajax script is overwriting this script as it loads new data... If this script is working fine by itself then it is the ajax script which is causing the problem...

 

yes u r right. it works nice in main script. but not in Ajax script.
somehow its causing problem...maybe replacing or something.

can u help me? shud i giv the orginal codes of two files?

 

If you can upload the whole thing and post a URL would be best.

 

look its very simple.

think about it.

[PAGE + SOME IMAGE CONTENT]  -> [javascript that relates to specific image content]
    |
[AJAX UPDATES CONTENT] -> [javascript previously relating to images that are now gone needs a restart]

Code (markup):

you instigate it through new MultiSwap('img1', 300, '2.gif','3.gif','4.gif','5.gif','6.gif','1.gif'); which is probably only correct in the context of the first page. in particular - this.theElem=document.getElementById(imgRef); - does 'img1' get replaced by the ajax pagination?

 

chk ur PM plz

 

you need to parse and eval() script from XHR load,
loading script tag into html via XHR wont run it,

 

i did and frankly, it has little to no meaning here, i dont have your css, images etc. why can't you just deploy your code to a url we can view, sending people files via PM is bad form really. =D

 

can u explain plz...with an example
i think im novice in this case

 

My couple of thoughts.
Check if your javascript is executed when you receive content by ajax.
As far as I undestand slideshow is not working with images that are located in html received by ajax.
I have two ideas:

1. JS frameworks like jQuery usually have callbacks that are fored when data is recieived. Try to reinit your slide show in this callback like:

function ajaxcallback(){
  new MultiSwap('img1', 300, '2.gif','3.gif','4.gif','5.gif','6.gif','1.gif');
}

HTML:

Actually I'm not sure with it but try this.

2. Again using jQuery you have several ways to use ajax.
Let me assume that html in data variable in javascript is the following:

some text content
<script type="text/javascript">
alert('from ajax');
</script>

HTML:

If you get html contents like this:

<script>
$.get(url,function(data){
		$('#'+id).attr('innerHTML',data);
	});
</script>

HTML:

you will not get alert.
If you use ajax like this:

<script>
$('#'+id).load(url);
</script>

HTML:

you'll get an alert.