Ajax functie return

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Liefhebber Laravel

Liefhebber Laravel

19/01/2018 12:00:05
Quote Anchor link
Hoi,

Ik heb een vraag mbt de return van een ajax waarde uit een functie.

Dit is mijn functie:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getPrice(productcode, quantity, specifications){
    var url = "api-url-with-security-token";
    var call = $.ajax({
        type: "POST",
        url: url,
        data: {
            productcode: productcode,
            quantity: quantity,
            specifications: specifications
        }
    });
    call.done(function(data){
        var result = JSON.parse(data);
        if ('status' in result) {
            console.log(result.prices.total);
            price = result.prices.total;
            return price;
        }else{
            console.log("ERROR price request");
            return 0;
        }
    });
}


Als ik deze functie aanroep zoals dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
var price = getPrice('CODE1', 5, '');
console.log(price);


Dan wordt in mijn console de variabele price 'undefined', terwijl de console.log functie IN mijn functie wel degelijk de correcte waarde teruggeeft.

Dit is waarschijnlijk omdat de functie al een return doet, nog VOOR de ajax-request een antwoord heeft gegeven. Maar hoe zorg ik ervoor dat de functie pas een return mag doen wanneer de ajax correct is uitgevoerd en een antwoord heeft gegeven?

Bedankt!
Gewijzigd op 19/01/2018 12:35:59 door Liefhebber Laravel
 
PHP hulp

PHP hulp

01/10/2022 20:39:32
 
- SanThe -

- SanThe -

19/01/2018 12:05:08
Quote Anchor link
Geef de return op regel 20 ook eens een waarde.
 
Rob Doemaarwat

Rob Doemaarwat

19/01/2018 12:09:17
Quote Anchor link
De functie getPrice() retourneert niks, die maakt alleen een asynchrone call. Pas in de done heb je je antwoord, maar dan is de getPrice call allang verleden tijd. Wat je dus met de price van regel 16/17 wilt doen zul je daar moeten doen (of een callback functie meegeven aan getPrice().
 
Liefhebber Laravel

Liefhebber Laravel

19/01/2018 12:35:29
Quote Anchor link
@ Rob Doemaarwat: Maar ik roep deze functie aan vanuit een ander script, en moet dan met die prijs verder om nog andere berekeningen te doen. Is een callback functie dan de beste oplossing?
En hoe pas ik dit dan toe in mijn voorbeeld?
 
Rob Doemaarwat

Rob Doemaarwat

19/01/2018 14:17:19
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
function getPrice(a,b,c,callback){
  //...
  call.done(function(data){
    //...
    callback(price);
  });
}

//vanuit ander script
getPrice(1,2,3,function(price){
  //doe ding met price
});

Je kunt ook je "call" object retourneren, en dan in je "andere script" de done() d'r aan knutselen. Maar in beide gevallen zul je niet "synchroon" (= direct) een antwoord krijgen. De asynchrone call heeft even tijd nodig, en de code waarin je getPrice() hebt aangeroepen loopt gewoon door.
 
Liefhebber Laravel

Liefhebber Laravel

19/01/2018 14:44:18
Quote Anchor link
@Rob Doemaarwat: dus de code waarin ik m'n getPrice() aanroep, kan onmogelijk 'on-hold' gezet worden tot deze asynchrone call volledig uitgevoerd is?
 
Nick Vledder

Nick Vledder

19/01/2018 15:42:20
Quote Anchor link
Dat zogenaamd on-hold zetten kan wel, maar bereik je in JS niet door het 'een regeltje lager' te zetten. Kenmerk van JS is namelijk dat het non-blocking is, dus het wacht niet tot de asynchrone AJAX-call ( :-) dat was eventjes dubbelop) klaar is.

Via callback, promises, etc. bereik je wat je wilt bereiken, nl verschil tussen 'nu' en 'later'.

PS er bestaat ook iets als blocking AJAX, maar dat terzijde
Gewijzigd op 19/01/2018 15:43:00 door Nick Vledder
 
Liefhebber Laravel

Liefhebber Laravel

19/01/2018 16:06:22
Quote Anchor link
Danku voor de uitleg Nick,

Ik wil eigenlijk gewoon een functie (die in de scripts.js staat) die ergens via een API een prijs ophaalt, en die prijs teruggeeft. Daarna wil ik in mijn algemene pagina een script onderaan toevoegen die gewoon dit doet in deze stappen:

- een 'on-hold' div zichtbaar maken (met een zandlopertje en tekst "prijs wordt opgehaald")
- de functie van hierboven aanroepen om de prijs aan te vragen
- als de prijs binnen is, DAN PAS de on-hold div onzichtbaar maken
- de binnengekomen prijswaarde met jQuery in het veld plaatsen (iets zoals $('#price').val(price);)

Dit moet toch op een relatief eenvoudige manier te bouwen zijn?

Graag had ik hiervan een mooi voorbeeld gehad...

Bedankt alvast!
 
Thomas van den Heuvel

Thomas van den Heuvel

19/01/2018 19:49:36
Quote Anchor link
Je geeft zelf de oplossing al - bouw gewoon de AJAX-call in in het gedeelte waar je je prijs-animaties regelt. Dit kan best in een hardcoded snippet JavaScript, omdat dit toch heel erg specifiek is - dit lijkt mij ook te speficiek om die in een "scripts.js" op te nemen, tenzij je dit op een heleboel plaatsen gaat gebruiken? En dan zou je misschien aan een generiekere oplossingen moeten gaan denken die je in een price.js stopt ofzo.

Maak anders eens een simpele proof of concept, in principe heb je alle bestanddelen al.
 
Nick Vledder

Nick Vledder

19/01/2018 20:06:50
Quote Anchor link
In aansluiting op opmerking Thomas... deze vraag kun je geheel zelf oplossen door in etappes te werken. Ik heb wel wat suggesties:
1. loader kan met puur css,
2. in html kun je een div maken met een class="loader" en id="response" (voorbeeldnamen),
3. in één simpele AJAX-snippet (in JS) kun je het PHP-script aanroepen en zodra de response er is:
A. de class="loader" verwijderen;
B. de HTML-response van de server in de div met id="response" plaatsen;

Voorbeeldje in JS:
$.ajax({url: "<url>script.php", success: function(result){
$("#response").removeClass();
$("#response").html(result);
}});

That's it.

PS In vbd even een method: "GET", maar met method: "POST" is het voorbeeld niet wezenlijk anders
Gewijzigd op 19/01/2018 20:27:34 door Nick Vledder
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.