jQuery: getJSON nem hívja a függvényt

Internet: PHP, CGI, stb.

var getSablon = function(sablon) {
  ...
  $.getJSON(url, send, function(result){
    1. itt pl. módosítom a HTML tartalmát
  });
};

var getData = function() {
  ...
  $.getJSON(url, send, function(data){
    getSablon(data['key']);
    2. itt felhasználom a "getSablon" eredményét
    ...
  });
};

Az a bajom, hogy amikor a getData függvényt használom, az nem az elején hívja meg a getSablon függvényt, hanem "egyszercsak" - kb. amikor a függvénytörzsnek vége van. Mit csinálok rosszul?

szaszi

  • 5694 megtekintés

( atomheart v | 2014. 07. 01., k – 13:22 )

"az nem az elején hívja meg a getSablon függvényt, hanem "egyszercsak" - kb. amikor a függvénytörzsnek vége van."

Akkor fogja meghivni, amikor a .getJSON() hivas megkapja az eredmenyt. A harmadik parameter egy callback, ami "majd egyszer" meghivodik, aszinkron modon. A getSablon() eredmenyenek a felhasznalasa is hibas, az AJAX hivas aszinkron mivolta miatt amire lefut a getSablon(), meg nem biztos, hogy meglesz az eredmeny.

----------------------
"ONE OF THESE DAYS I'M GOING TO CUT YOU INTO LITTLE PIECES!!!$E$%#$#%^*^"
--> YouTube csatornám

Szinkronra? Hogyan? JS-t nem jó ötlet megakasztani, elég egy kis hálózati csuklás, és a böngésző lövi is le az oldalt, hogy unreszponzív lett. JS-ben az a jó, hogy nagyon könnyű az aszinkron dolgokat kezelni, te is tudsz saját callback-et csinálni, függvényeket ide-oda adogatni, csak a this változóval kell észnél lenni.

-- 


var getSablon = function() {
  ...
  $.ajax({
    url: url,
    dataType: 'json',
    async: false,
    data: send,
    success: function(result){
      1. itt pl. módosítom a HTML tartalmát

Ugyanazt csinálja a függvény, csak van itt egy "async: false". Így valóban "megakasztja", de ez egy helyi gépen futó alkalmazás, itt fut a json-t szolgáltató háttérfolyamat is: nem nagy veszteség. Így egyszerűbbnek tűnik a megoldás, mint egy körbehívott aszinkron műveletsor "kiegyenesítése".

szaszi

PS: szerintem a "nagyon könnyű"-höz azért kellene még tanulnom. Nem szoktam ilyesmiket csinálni, hogy ennél mélyebben beletanuljak, csak ezt kellett összebarkácsolnom.

Kb. ennyi az átírás, kommentezett helyeken módosítottam: 


var getSablon = function(sablon, callback/*kap egy callbacket*/) {
  ...
  $.getJSON(url, send, function(result){
    1. itt pl. módosítom a HTML tartalmát
    callback(eredmeny); /*végrehajtja a callbacket, valamit át is ad*/
  });
};

var getData = function() {
  ...
  $.getJSON(url, send, function(data){
    getSablon(data['key'], function(eredmeny) { /*a folytatólagos rész callbackben átadva, eredmeny-ben jön a válasz*/
      2. itt felhasználom a "getSablon" eredményét
      ...
    });
  });
};

--

No ezt még nem egészen értem, de akkor a részletek:
Ez egy iskolai bizonyítvány nyomtatásához egy keret.

- A "getData" egy diák adatsorát kapja vissza, benne a sablon neve és az összes adata.
- A sablonnév alapján a "getSablon" lekéri a sablon adatait: milyen mezők vannak és mennyi, azok hol vannak - ez alapján elkészíti a bizonyítványt, kirakja az üres html elemeket.
- Az elkészített html elemekbe a getData már be tudja pakolni az adatsor többi részét - addig nem, ezért kell, hogy befejeződjön a getSablon futása.

(Diákonként változhat, hogy milyen típusú bizonyítványa van.)

Ilyen feltételekkel is működik a megoldásod?

Az egyik lehetőség, ha kezdetben meghívod a getSablon()-t, megvárod, míg lefut, és ha lefutott, akkor kezded el a getData()-kat hívogatni. Vagy maradsz a megoldásomnál, annyi különbséggel, hogy ha egyszer már meghívódott a getSablon(), akkor elteszi valahova az eredményt, és legközelebb nem hív a szerverre, hanem rögtön visszatér, illetve rögtön meghívja a callback-et.

Igazából bárhogy meg lehet oldani, ki kell találni a hívások és események sorrendjét, aztán ha egy dolog véget ért, onnan lehet hívni a következőt. Az a jó a JS-ben, hogy ugyan aszinkron, de csak egy szálon fut minden, bevárják egymást a dolgok, nem kapsz akkor agyfaszt tőle, mint általában a párhuzamos programozástól.

Vagy akár megírhatod szerver oldalon is az egészet. Ezt csak azért írom, mert ennyiből még nem lehet tudni, hogy globálisan nézve mi a legjobb megoldás az adott problémára.

De ha már sablonokról van szó, és szeretnél valami igazán jót csinálni és tanulni, akkor erre vannak előre megírt JS rendszerek. Nekem az AngularJS jön most be nagyon, szinte csak megmondod neki, mit hova tegyen, ő letölti a sablont és behelyettesíti az adatokat, meg általában sok másban is segít. De van jQuery UI-ban is ilyen, Knockout, stb. Demó oldal: http://angular.github.io/angular-phonecat/step-6/app/ alig pár soros kóddal megy az egész.

--

> ha egyszer már meghívódott a getSablon(), akkor elteszi valahova az eredményt

Végül ez lett belőle. Minden (sync) getSablon() után eltárolja az adatokat, valamint a hozzá tartozó képeket, és ha kell, előveszi. (Szerencsére (egyelőre) csak négy féle bizonyítvány van, ennyi különféle sablont kell használni.)

> De ha már sablonokról van szó...

Szerintem ezek csak nevükben közösek :-) Nálam a sablon különféle mezőket takar és _pontos_ pozíciókat (tized mm.), mert a bizonyítvány formanyomtatványon 1 mm csúszás már csúf tud lenni. (Úgy láttam, ezek a JS sablonozó rendszerek nem erre vannak kitalálva.)

Ezen adatokból készül el egyrészt a böngészőben megjelenő oldal, másrészt generálom a pdf-et, amit nyomtatóra küldök (reportlab).

Köszönöm a támogatásokat, segített!

szaszi