views:

56

answers:

5

I'm trying to watch for an element to load on the page from an ajax call. I don't have access to the jquery that's making the ajax call. So, when some new html is loaded onto the page, I'd like to apply some changes to it.

I'm currently trying to use the .load() function:

$( '.autosuggest_keyword' ).load( 
    function()
    { 
        $( this ).val( 'load test' );
    }
);

Which isn't doing anything. I even tried making that a live binding, which doesn't really make sense, but I thought I'd give it a try.

The selector is correct.

Any ideas?

A: 

The .load() function expects an URL to which to send the AJAX request, fetch the data from the server and update the given element in the selector. So you need to pass an URL:

$('.autosuggest_keyword').load('/foo');
Darin Dimitrov
So then that's the wrong function for what I'm trying to do. Any ideas on the right one?
hookedonwinter
This is just wrong. .load can take a URL, but it can also take a function. See: http://api.jquery.com/load-event/
Scott Reynen
A: 

Do you know what is calling the inital ajax? if so you could call a function using the same event. Though this could cause some confusion if you're trying to change something that the ajax is loading.

Shaded
Ya I can figure out what's calling the initial function. But I need to change an element returned by that initial call. Option right now is to do a setTimeout, which I'd really rather not do :)
hookedonwinter
hm. Then I'm not too sure about what you could do, it's going to require some ugly hacking to do though. Kiss and make up with whoever is keeping you away from the ajax call and use that :D
Shaded
Ya, looks like that's the solution. I was hoping there was some cool function that would go "whoa! that element loaded! let's mess with it!" Ah well.
hookedonwinter
A: 

Duck punching might be the answer:

should('duck-punch ajax success handler', function() {
    var origAjax = $.ajax;

    $.ajax = function(settings) {
        if(settings.url === 'the/request/page') {
            var origSuccess = settings.success;
            settings.success = function(responseHTML) {
                origSuccess.call(this, responseHTML);
                //apply some changes to html
            }

        }
        origAjax.call(this, settings);
    }
});
Gutzofter
Duck punching. lol, I don't even know if you're kidding or not... What's "should"?
hookedonwinter
I aliased the `QUnit.test function` like this `Qunit.should = Qunit.test;`. So I used this as a execution runner. Google duck-punching. I was rolling when I ran across this. *If it doesn't quack like a duck, then punch it till it does.* Sweet!
Gutzofter
A: 

When you call .load, it's binding that event handler to elements that match your selector at the time you're calling it. Since the element is added after that, it's never bound. The .live function solves this problem by binding to currrent and future elements matching a selector. I think what you want is something like this (untested):

$( '.autosuggest_keyword' ).live('load', 
    function()
    { 
        $( this ).val( 'load test' );
    }
);
Scott Reynen
I tried that too, actually. nothing happened. But, I was able to get into the original ajax call, which circumvented the entire issue.
hookedonwinter
A: 

I was able to get access to the original ajax call, so this question is moot now. I'm leaving it up for others to find, however, in case one of these answers helps them.

hookedonwinter