Javascript file not executing after AJAX call -


when make ajax call replace div, response contains script tag pointing external .js file. however, can't returned js execute. i've tried eval() response didn't work. tried call function inside external .js file within oncomplete callback, not work. not sure else do. i'm using mootools core 1.4.5

main page's js

window.addevent('domready', function(){        function ajaxfunc(i)     {         return function(e){             e.stop();             var requestdata = new request({                url: 'blah.php?cat=' + i,                evalscripts: true,                evalresponse: true,                    oncomplete: function(response){                        $('rt-main').set('html', response);                    }             });             requestdata.send();         };     }      var total = $('cat_table').getchildren('div').length;     for(var i=1; i<=total; i++)     {        $('catclick'+i).addevent('click', ajaxfunc(i));     }   }); 

the returned html

<script src="listings.js" type="text/javascript"></script> ...(other markup, etc) 

and inside listings.js file

window.addevent('domready', function(){        function gotoitem(i)     {        return function(e){           e.stop();           var id= i;           var requestdata = new request ({              url: 'blah.php?id='+id,              oncomplete: function(response){                 $('rt-main').set('html', response);              }           });           requestdata.send();        };     }     $$('.itembox').each(function(el){       el.getelement('a.itemclick').addevent('click', gotoitem(el.id));     });  }); 

the environment i'm working in joomla 3.1 in case affects anything.

no domready fire second time per listings.js, dom ready.

you manually window.removeevents('domready') beforehand, load via xhr , window.fireevent('domready') run it.

if use event delegation can avoid having run js after initial ajax requests, you'd need this.

window.addevent('domready', function () {     var ct = document.id('cat_table'),         divs = ct.getchildren('div'), //need more qualified selector         rtmain = document.id('rt-main');      divs.each(function(el, i){         // store index, if don't have attribute id, rel or data-id         el.store('index', i);     });      ct.addevent('click:relay(div)', function(e){ // needs more qualified also.         e && e.stop();          new request({             method: 'get', // not post, check - faster             url: 'blah.php?cat=' + this.retrieve('index'),             evalresponse: true,             oncomplete: function(){                 rtmain.set('html', this.response.text);             }         }).send();     });      // delegation, assumes .itembox children of rtmain - delegate other parent otherwise.     rtmain.addevent('click:relay(.itembox)', function(e){         // reliance on index in collection bad, try change response above contain data-id.         e.stop();          new request({             method: 'get',             url: 'blah.php?id=' + this.get('data-id'),              oncomplete: function(){                 rtmain.set('html', this.response.text);             }         }).send();     }); }); 

keep in mind had reliance on index of item in elements collection, less safe. use hard db id, provided backend. insecure, ppl can mod dom, delete elements , ids should not see. not can't otherwise but...

bringing in scripts via xhr , evaling responses anti-pattern , gives vector of attack on page xss, don't forget that.


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -