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
Post a Comment