jQuery wachten op element (web automation)

[Verwijderd]

Ik ben via een browser control een aantal acties op wat websites aan het automatiseren.
Het meeste gaat goed. Ik kan velden scrapen en invullen etc.
Nu zitten er een paar lastige dingetjes tussen: Er zijn dropdownboxen die een ajax request uitvoeren en adhv die output nieuwe content presenteren.
Nu weet ik wat die content gaat worden, maar als ik gewoon een lijst met methods afvuur zijn die nog niet beschikbaar.

Ik heb gekeken naar de .when() en .then callbacks maar daar moet je zelf je ajax meegeven.
Ik heb zelf niet de source van die sites, dus ik ben niet degene die de request doet.
Wat ik gewoon wil doen is item selecteren, wachten tot bepaald element beschikbaar is en dat element dan invullen.

Ik heb al zitten denken aan fugly hacks als settimeout enzo, maar het moet veel beter kunnen.
Kan iemand mij een duwtje in de richting geven waar ik naar moet zoeken?

[NeoPhire]

Je kan bij jQuery aan een ajax call ook meegeven wat er daarna moet gebeuren met behulp van .done. Dit wordt pas uitgevoerd als de ajax call afgerond is (zoals het nu deprecated onSuccess)

Voorbeeld:

code:

$.ajax({
  url: "ajaxurl.php",
}).done(function (data) {
  // Code or methods to fire here
});

[Cor453]

@NeoPhire, volgens mij zegt hij dat hij niet bij de source van de site kan. Dit moet in de JS van de website, en werkt dus niet.

Ik heb van Stackoverflow.com (link: http://stackoverflow.com/...t-until-an-element-exists) een stukje jQuery plugin Javascript gehaald. Alle credits dus naar de poster daar

Op de pagina van stackoverflow zegt hij dat dit werkt:

code:

(function ($) {

/**
* @function
* @property {object} jQuery plugin which runs handler function once specified element is inserted into the DOM
* @param {function} handler A function to execute at the time when the element is inserted
* @param {bool} shouldRunHandlerOnce Optional: if true, handler is unbound after its first invocation
* @example $(selector).waitUntilExists(function);
*/

$.fn.waitUntilExists    = function (handler, shouldRunHandlerOnce, isChild) {
    var found       = 'found';
    var $this       = $(this.selector);
    var $elements   = $this.not(function () { return $(this).data(found); }).each(handler).data(found, true);

    if (!isChild)
    {
        (window.waitUntilExists_Intervals = window.waitUntilExists_Intervals || {})[this.selector] =
            window.setInterval(function () { $this.waitUntilExists(handler, shouldRunHandlerOnce, true); }, 500)
        ;
    }
    else if (shouldRunHandlerOnce && $elements.length)
    {
        window.clearInterval(window.waitUntilExists_Intervals[this.selector]);
    }

    return $this;
}

}(jQuery));

[Verwijderd]

Die dingen had ik ook al gevonden, maar ik maak zelf niet de ajax call.
Ik doe bijv gewoon een $('#item2vancombo").click() om 'm te selecteren en daar zit ergens in de site een trigger die een ajax call doet, maar die kan ik dus niet meegeven als parameter omdat ik 'm zelf niet afvuur.

[Cor453]

@Roonat kan het stukje JS dat ik postte werken?

[Verwijderd]

@Cor453 Bedankt. Ik denk dat dat wel zou kunnen werken.
Dus toch met timers in de weer. Ik ben pas een dag begonnen met jQuery (doe nooit iets met web eigenlijk) dus ik hoopte dat er gewoon iets voor was in jQuery zelf.
Kennelijk niet dus.
Evengoed bedankt

edit:

Hij is wel redelijk conform jQuery stijl qua werking, dus daarin elegant.
Heb soms ook nodig dat het niet gaat of een element bestaat maar aan een bepaalde class hangt, of property heeft etc. Maar die kan ik dan zelf wel op dezelfde manier bouwen.

Dus ik ga het zo doen, nogmaals bedankt.

[ Voor 37% gewijzigd door Verwijderd op 18-01-2013 12:55 ]

[Cor453]

Geen punt, beter goed gejat dan slecht verzonnen toch?

[MueR]

Javascript mag in Webdesign, Markup & Clientside Scripting, dus een schopje die kant op

[Bosmonster]

Dit lukt idd alleen als je gaat pollen, aangezien er geen browser-compatibele manier is om DOM-changes te zien (misschien de nieuwere browsers inmiddels wel, dan kun je dat als progressive enhancement toepassen).

Als je dat een beetje netjes wilt oplossen zou je een soort van stack bij kunnen houden met dependencies voor bepaalde calls door kunnen gaan.

[iH8]

In Dojo kun je zoiets doen:

JavaScript:

require(["dojo/Deferred"], function (Deferred) {

    function asyncProcess() {
        var deferred = new Deferred();
        setTimeout(function () {
            deferred.resolve("success");
        }, 1000);
        return deferred.promise;
    }

    var process = asyncProcess();
    process.then(function (results) {
        console.log(results);
    });

});

Weet zo niet of JQ ook zoiets heeft, kan het zo snel niet vinden iig.

[R4gnax]

iH8 schreef op vrijdag 18 januari 2013 @ 19:57:
Weet zo niet of JQ ook zoiets heeft, kan het zo snel niet vinden iig.

Ik zie de direct toegevoegde waarde voor deze discussie eigenlijk niet. Deferred objects en promises bieden inderdaad een elegante oplossing voor het opzetten van asychrone operaties, maar het gaat er hier niet om dat de TS niet asynchroon een operatie zou kunnen plannen. Het gaat er om dat de TS een manier nodig heeft om te weten wanneer een extern stuk script waar de TS geen toegang tot heeft een bepaalde DOM mutatie gedaan heeft.

Dat probleem los je inderdaad op door met de hand polling logica te bouwen die de DOM in de gaten houdt, en waar mogelijk DOM mutation events of DOM mutation observers te gebruiken.

jQuery heeft trouwens inderdaad ook deferred objects / promises aan boord:

JavaScript:

require([ "jquery" ], function( $ ) {

  function asyncProcess() {
    return $.Deferred( function( def ) {
      setTimeout( $.proxy( def.resolve, def, "success" ), 1000 );
    }).promise();
  }

  var process = asyncProcess();
  process.then(function (results) {
    console.log(results);
  });
});

(Als je op Google op 'Deferred' zoekt staat api.jquery.com zelfs boven aan. Interessant dat je dat niet even snel hebt kunnen vinden...)