[jQ/js] return een ajax result in een function

[F.West98]

Hallo,

Ik zit nu met een aardig ingewikkeld probleem. Ik wil een functie maken die de result uit een ajax request (jQ) returnt. Dus, dan kan je de functie aanroepen met var result = functienaam(parameters);
Allemaal leuk enzo, maar de rest van de code in de functie wacht niet op de ajax, dus is de return leeg.
Returnen in de success van de ajax ($.ajax({success:function(){}}); ) gaat ook niet, dan krijg je de result niet terug.

Dus ik zat met twee problemen:
1. Je kan de response (data) van de server niet UIT de success functie krijgen in een normale var.
2. De rest van de code wacht niet en gaat gewoon verder.

Probleem 1 heb ik fugly opgelost door jQ aan te passen en aan het jqXHR object een extra item toe te voegen met success. Na de ajax request kan ik de responsedata dus zo aanspreken:

JavaScript:

var submit = $.ajax({.....});
console.log(submit.modification.success);

Voor probleem 2 is er een oplossing, namelijk async: false als optie setten, maar helaas is dat niet mogelijk icm jsonp. Ik kan ook niet een lokaal PHP bestand maken en die de externe laten includen (lelijk), want Cloud9 ondersteunt geen PHP files, en daar moet ik het helaas maken.

Op internet komen er veel oplossingen voor like:

JavaScript:

function doSomething(data) {
    /* Do something with your data */
}

$.ajax({
    /*.....*/
    success: doSomething
});

Maar, dan krijg je de data alsnog niet gereturned uit de hoofdfunctie.
Ook een setTimeout werkt niet, want 1. dan kan de request nog bezig zijn en 2. dan return je naar die function en niet naar een var...

Hoe los ik dit dus op?

JavaScript:

function getData(sendData) {
    var request = $.ajax({
        url: 'foobar.php',
        dataType: 'jsonp',
        data: sendData,
    });
    /* DIT IS DUS TE VROEG EN MOET PAS NA DE REQUEST */
    var data = request.modification.success.item;
    return data;
}

console.log(getData({'option': 'value'}));

En voor wie een demo wil zien:
https://c9.io/fwest98/roosterpgplus (code + demo)

[orf]

Je hebt nog niet uitgelegd waarom je wilt dat het resultaat gereturned moet worden. Zo werkt het nu eenmaal niet met het dynamisch toevoegen van een <script> tag en wachten op resultaat. Dat wil je in de meeste gevallen niet blocking maken.

[F.West98]

orf schreef op zondag 17 februari 2013 @ 22:27:
Je hebt nog niet uitgelegd waarom je wilt dat het resultaat gereturned moet worden. Zo werkt het nu eenmaal niet met het dynamisch toevoegen van een <script> tag en wachten op resultaat. Dat wil je in de meeste gevallen niet blocking maken.

Dat wil ik omdat het een plugin is, maar vooral omdat dit voor een schoolprojectje is en de rest vh groepje zo makkelijk mogelijk wil maken (hebben totaal geen ervaring)

[orf]

Kun je niet gewoon een referentie mee geven aan de functie/plugin? Dan call je die asynchroon:

JavaScript:

var callback = function(result){
  alert(result);
}

$('#selector').plugin(callback);

[F.West98]

orf schreef op zondag 17 februari 2013 @ 22:32:
Kun je niet gewoon een referentie mee geven aan de functie/plugin. Dan call je die asynchroon:

JavaScript:

var callback = function(result){
  alert(result);
}

$('#selector').plugin(callback);

Dat wordt te moeilijk helaas. Ik wil dat ze zo kunnen doen:
$.plugin('actiongroup', 'action', {options});

En dat is al moeilijk voor hun (ze hadden 0,0 kennis)

[GlowMouse]

Je moet met callbacks werken; wat jij wilt kan niet. Sowieso werkt jsonp met een callback.


Ik snap ook niet wat je probleem hiermee te maken heeft:

JavaScript:

$.plugin('actiongroup', 'action', {options});

[F.West98]

GlowMouse schreef op zondag 17 februari 2013 @ 22:35:
Je moet met callbacks werken; wat jij wilt kan niet. Sowieso werkt jsonp met een callback.


Ik snap ook niet wat je probleem hiermee te maken heeft:

JavaScript:

$.plugin('actiongroup', 'action', {options});

dat is de notatie van mijn plugin, doet er eigenlijk niet toe (maar om duidelijk te maken dat hiermee de action kan worden uitgevoerd en je de result terugkrijgt)

[R4gnax]

Heb ik hier iets gemist of is het gewoon een gevalletje handleiding lezen en promises gebruiken?

JavaScript:

function getData( params ) {
    var xhr = $.ajax({
      url      : "foobar.php",
      dataType : "jsonp",
      data     : params
    });

    xhr = xhr.pipe( function( result ) {
      return result.modification.success.item;
    });

    return xhr.promise();
}

getData({ "option" : "value" }).done( function( result ) {
  console.log( result );
});

Als je groepsleden niet snappen hoe jQuery werkt, maar wel jQuery willen gebruiken, dan hebben ze wat extra huiswerk te doen. Punt uit.

Wat jij in deze thread vraagt in elkaar te kunstelen is eigenlijk een thread sleep en dat bestaat in JavaScript gewoonweg niet.

[ Voor 9% gewijzigd door R4gnax op 18-02-2013 00:03 ]

[F.West98]

R4gnax schreef op maandag 18 februari 2013 @ 00:00:
Heb ik hier iets gemist of is het gewoon een gevalletje handleiding lezen en promises gebruiken?

JavaScript:

function getData( params ) {
    var xhr = $.ajax({
      url      : "foobar.php",
      dataType : "jsonp",
      data     : params
    });

    xhr = xhr.pipe( function( result ) {
      return result.modification.success.item;
    });

    return xhr.promise();
}

getData({ "option" : "value" }).done( function( result ) {
  console.log( result );
});

Als je groepsleden niet snappen hoe jQuery werkt, maar wel jQuery willen gebruiken, dan hebben ze wat extra huiswerk te doen. Punt uit.

Wat jij in deze thread vraagt in elkaar te kunstelen is eigenlijk een thread sleep en dat bestaat in JavaScript gewoonweg niet.

Ik denk dat ik dan toch zoiets moet gaan gebruiken...
Overigens, dit is voor een schoolprojectje en we moeten als gewone klas (iedereen 0 ervaring) iets met jQ Mobile gaan bouwen...

[R4gnax]

Ik zie niet echt in waarom dat je zou vrijwaarden. Juist voor een schoolproject is het de bedoeling dat je iets leert, toch?

Zelfs als het leren werken met het jQuery (Mobile) framework niet specifiek het doel van het project is, dan is het nog steeds een afspiegeling van hoe het er in de praktijk later aan toe zal gaan; je zult niet alle kennis paraat hebben en je zult zowel bereid als voorbereid moeten zijn daarin te investeren.