Ajax oldal hívásnál sokszorozódás

Ajax oldal hívásnál sokszorozódás
2022-03-25T10:49:33+01:00
2022-03-27T21:29:09+02:00
2022-08-12T08:10:31+02:00
web
Sziasztok,

Egy olyan problémával állok szembe...

<button type="button" data-felvitelkezdodatum="2022-03-02" class="btn btn-xs btn-success NaptarEsemenyFelvitelBtn">FELVITEL</button>
Az alábbi gombra való kattintást követve betöltetem egy DIV -be Ajax segítségével a lekért oldalt.

$('.NaptarEsemenyFelvitelBtn').click(function(){ $.ajax({ url: 'naptaresemeny/naptaresemeny.php', type: 'GET', data: {kezdodatum: KezdoDatumID}, async: false, cache: false, contentType: false, processData: true, success: function(response){ // Töltsük be a tartalmat a naptarfelvitelModel-body ID be $("#naptarfelvitelModel-body").html(response); }, error: function( xhr, status, errorThrown ) { alert( "Sorry, there was a problem!" ); console.log( "Error: " + errorThrown ); console.log( "Status: " + status ); console.dir( xhr ); }, }); });
Majd az oldalon engedélyezem a div megjelenését.

$( "#NaptarEsemenyFelvitelModal" ).show();
Ezzel úgy nem is lenne probléma még.
A megjelenített DIV-be betöltött tartalom ablakban egy bezárás gomb is van, melyre ha rákattintunk akkor letiltja a DIV -t.

span.onclick = function() { $( "#NaptarEsemenyFelvitelModal" ).hide(); $(document).off('.NaptarEsemenyFelvitelBtn'); location.reload(true); // ezt csak azért, mert sokszorozódik a tartalom

Ezzel sincs probléma, de a probléma az után kezdődik miután bezártam, azaz letiltottam a DIV tartalmat...
Egy újabb másik FELVITEL gombra kattintva, sikeresen betölt a másik dátum szűrt tartalma.
Ebben az ablakba, ha viszek fel egy újabb eseményt, vagy törlök az adatbázisbók akkor elkezdi duplázni, vagy 2x jelenik meg az alert() üzenet. Ha ezt az ablakot is bezárom és egy másik FELVITEL -re kattintok, akkor már 3x fogja ezeket megcsinálni és egy így count szerűen megy tovább......

A fentebb kódba minden ablak bezárást követve újra betöltetem az oldalt, de ez annyira nem jó megoldás, mivel elmegy a szűrt esemény időpontja.

Találkoztatok e ilyen hibával, vagy mi lehet e probléma oka? Cache -t is tiltom pedig.

Köszönöm előre is a segítséget!
Mutasd a teljes hozzászólást!
Mert a hide csak elrejti a div-et. A tartalom azonban benne marad. Erre töltöd rá megint a cuccot. A html töltés előtt nullázd ki a div-et.
Javaslom továbbá az innerhtml-t használni ha már html-t raksz a div-be.
Mutasd a teljes hozzászólást!

  • Szia! 

    Nagyon zavaros amit írsz. 

    1. "Az alábbi gombra való kattintást követve betöltetem egy DIV -be Ajax segítségével a lekért oldalt"

    Tehát a backend egy komplett html stringet ad vissza, amit te ki szeretnél rendereltetni egy divben? Tekintve, hogy jquery hívást használsz, feltételezem nem használsz semmilyen js keretrendszert. Miért nem iframet használsz? Ha iframet használál, akkor miért akarsz iframet használni? Ez egy nagyon régi "technika", manapság csak adatokat szokás szerverről fetchelni, amiből a frontenden generáltatsz magadnak dinamikusan egy mindig változó html-t.

    2.

    $.ajax({
          url: ...
          type: ...
          data: ...
     ->  async: false,
     
    Miért false ez a kapcsoló? Egy végpontot hívsz meg, aminek változó válaszideje van tehát aszinkron hívást kell csinálnod. Áll az egész alkalmazás addig, amíg nem kapunk választ a szervertől? 

    3. "Majd az oldalon engedélyezem a div megjelenését."
    Nem ez történik: a dom-ban szimplán elrejted, de a tartalmat nem törlöd onnan.

    4. "A megjelenített DIV-be betöltött tartalom ablakban egy bezárás gomb is van, melyre ha rákattintunk akkor letiltja a DIV -t."

    Erről sajnos nem tudunk semmit, mert csak spanra írt functiont raktál be, amiben szintén van egy hide, illetve ez: location.reload()  Ez konkrétan olyan, mintha F5-öt ütnél: újratölti az oldalt, tehát az egész frontended resetelődik.

    A kódodat kéne értelmeznünk, hogy miért úgy csinálod ahogy. Miért használsz jquery-t és miért nem jó a modernebb, elegánsabb és szebb ecmascript 12?

    Ha ezeket a kérdéseket nem érted, akkor írd le, hogy mit szeretnél megvalósítani, részletesen. El fogjuk mondani hogyan csináld meg.
    Mutasd a teljes hozzászólást!
  • Mert a hide csak elrejti a div-et. A tartalom azonban benne marad. Erre töltöd rá megint a cuccot. A html töltés előtt nullázd ki a div-et.
    Javaslom továbbá az innerhtml-t használni ha már html-t raksz a div-be.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd