0

When I make an AJAX call to replace a div, the response contains a script tag pointing to an external .js file. However, I can't get the returned JS to execute. I've tried to eval() the response but that didn't work. I also tried to call a function inside the external .js file from within the onComplete callback, but this also does not work. Not sure what else to 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 that 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 is Joomla 3.1 in case that affects anything.

Improve this question
8
  • Is the .js script file a new ajax call? Commented Aug 1, 2013 at 7:36
  • Is that script tag the rendered html? If not can you post your blah.php, in the part were you parse the script. Might be something to do with escaping the tags. How does response look like? Commented Aug 1, 2013 at 7:38
  • In the 2nd .js file, it is indeed another AJAX call. I wanted to add new event listeners when the 2nd page is called through AJAX. The script tag you see is part of the rendered HTML. The script tag from within blah.php is hardcoded directly (in MVC, I hardcoded it into the view). i.e. I don't use echo to output this script tag. Commented Aug 1, 2013 at 7:45
  • Are you calling the gotoItem(i) function somewhere? Commented Aug 1, 2013 at 8:31
  • Yes, that is in the event listener. $$('.itemBox').each(function(el){ el.getElement('a.itemClick').addEvent('click', gotoItem(el.id)); }); Commented Aug 1, 2013 at 8:43

2 Answers 2

Reset to default
2

No domready will fire a second time for you as per listings.js, your DOM is already ready.

You could manually do window.removeEvents('domready') beforehand, then load via XHR and do window.fireEvent('domready') to run it.

If you use event delegation you can avoid having to run any js after initial ajax requests, all you'd need is something like this. 

window.addEvent('domready', function () {
    var ct = document.id('cat_table'),
        divs = ct.getChildren('div'), //need a more qualified selector
        rtMain = document.id('rt-main');

    divs.each(function(el, i){
        // store the index, if you don't have it as an attribute like 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 are children of rtMain - just delegate to other parent otherwise.
    rtMain.addEvent('click:relay(.itemBox)', function(e){
        // reliance on index in collection is bad, try to change response above to 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 you had a reliance on the index of the item in the Elements collection, which is less than safe. use a hard db id, provided by the backend. this is insecure, ppl can mod their DOM, delete elements and get to ids they should not see. Not that they can't do so otherwise but...

Bringing in scripts via XHR and evaling responses is an anti-pattern and gives a vector of attack on your page for XSS, don't forget that.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the reply! How exactly would you provide the script a hard db id without retrieving it from the markup? The way I understand it, is the only way for any script to get ids is this path: DB > PHP > HTML > JS. Or are you saying it's better to have an id that is obscure to avoid attacks?
0

It looks like the script in the linked .js is wrapped in a 'domready' event, but (I'm assuming a little here) the dom would already have fired the ready event. Try removing the window.addEvent('domready', function(){ ...} wrapper.

EDIT since you say that is not the case could it work for you if instead of returning the script tag, you simply returned the script and appended it to the page like this:

onComplete: function (response) {
    //
    var script = document.createElement('script');
    script.innerHTML = response;
    document.getElementById('rt-main').appendChild(script);

}

EDIT I've just played with this a little, and it seems I have an inelegant solution fiddle.

Improve this answer

7 Comments

Thanks for answering. I've also tried this, but to no avail. I've tried looking through Firebug to see if the script was loaded into the DOM. Looks like it isn't.
hmm...can I safely assume that you are calling the function that is returned from 'ajaxfunc' ie: var n = ajaxfunc(event); n();
This question can be taken in 2 ways. 1) The return value of ajaxfunc is another function. This is done this way because of using loops with closures. So yes, this function returned is indeed being called, and is evidenced by the functioning AJAX call. 2) The AJAX response's .js file does not have a function to call. Instead I want it to automatically fire the event listeners. However, this doesn't work. I click on an anchor and it goes nowhere.
Does it need to be returned from the server in a script tag? If not, I've edited my answer with a possible solution
Well, the response contains the script tag, which links to the external JS file, as well as HTML and dynamic content. Your updated solution would work if I was only returning JS.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.