jQuery functie aan ajax resultaat hangen

[Verwijderd]

In een lijstje met rijen records uit de database, sluit ik elke rij af met een href link om het betreffende record te deleten. Als ik die link een class met verwijderbutton geef, dan kan ik daar mooi een confirm dialog mee tonen. Deze gebruik ik daarvoor: https://github.com/Ifnot/PopConfirm

code:

$(".verwijderbutton").popConfirm();

Bovenstaande werkt perfect om de popup te tonen op de links.

Maarrr, dat werkt alleen bij een lijst die ik ophaal op de pagina zelf. Maar mijn lijstje komt uit ajax, en dan krijg ik die popConfirm() maar niet aan de links die daarin zitten gehangen.

Als ik voor een normale functie dit:

code:

$('.verwijderbutton').click(function() {
  alert('click!');
});

vervang door dit:

code:

$('body').on('click', '.verwijderbutton', function () {
  alert('click!');
});

dan werkt dat wel voor elementen uit de ajax lijst.

Maar ik weet dus niet hoe ik deze

code:

$(".verwijderbutton").popConfirm();

kan herschrijven zodat het 'pakt' voor de ajax lijst, of nog beter, deze hieronder, maar dat zal op hetzelfde neerkomen denk ik:

code:

$("[data-toggle='confirmation']").popConfirm({
    title: "Really ?",
    content: "I have warned you !",
    placement: "bottom" // (top, right, bottom, left)
});

Ik loop hier al de hele middag mee te klooien maar waarschijnlijk is het vrij simpel. Ik lees dat bind en live verouderd zijn, en dat waarschijnlijk 'on' moet worden gebruikt, maar ik weet dan niet het event, want het is niet op een click of een change ofzo, het moet er gewoon altijd aan 'hangen'. Maar het lukt me maar niet, ik krijg inmiddels een beetje hoofdpijn van dat gepuzzel. Heeft er misschien iemand tips?

[ Voor 76% gewijzigd door Verwijderd op 13-05-2017 14:14 ]

[Verwijderd]

Dit werkt trouwens ook, als ik de resultaten op dezelfde pagina inlaadt:

code:

    $('.verwijderbutton').click(function() {
        alert('click!');
    }).popConfirm();

Maar onderstaande werkt niet als ik het aan de ajax lijst elementen hang (hij doet de alert dan ook niet):

code:

    $('body').on('click', '.verwijderbutton', function () {
        alert('click!');
    }).popConfirm();

Zonder de popConfirm() eraan vast op het eind, werkt het zoals gezegd wel voor de ajax lijst elementen (hij laat dan wel de alert zien, maar dan mis ik natuurlijk het tussenliggende confirm dialogje):

code:

    $('body').on('click', '.verwijderbutton', function () {
        alert('click!');
    });

Dus die popConfirm() zorgt ervoor dat het ergens breekt. Hmmm, lastig...

[Ramon]

Ik denk dat het probleem is dat .verwijderbutton nog niet bestaat als de code uitgevoerd wordt. JavaScript kan het event dan nergens aan hangen waardoor het niet werkt.

Delegation ( $('body').on('click', '.verwijderbutton', function () .. ) lost dat doorgaans op, maar aangezien popConfirm z'n eigen event handlers wil gebruiken, als ik de docs mag geloven, werkt dat in jouw geval nog steeds niet.

Ik denk in jouw geval dat de makkelijkste oplossing is om $(".verwijderbutton").popConfirm(); uit te voeren als de ajax geladen is en weergegeven wordt op het scherm.

Succes!

[Verwijderd]

Ramon schreef op zaterdag 13 mei 2017 @ 15:13:
Ik denk dat het probleem is dat .verwijderbutton nog niet bestaat als de code uitgevoerd wordt. JavaScript kan het event dan nergens aan hangen waardoor het niet werkt.

Dankje, Ramon. Effe voor de zekerheid, je bedoelt hier toch dat hij nog niet bestaat als de popConfirm code uitgevoerd wordt? Want de alert binnen die functie doet het wel gewoon vanuit de ajax als ik popConfirm weglaat.

Ik denk in jouw geval dat de makkelijkste oplossing is om $(".verwijderbutton").popConfirm(); uit te voeren als de ajax geladen is en weergegeven wordt op het scherm.

Okee, ik heb nu even aan het eind van de ajax-uitspuug-PHP-pagina onder alle <tr><td>...</td></tr> regels onderstaande functie toegevoegd:

code:

<script>
jQuery(document).ready(function() {
    
$('body').on('click', '.verwijderbutton', function () {
        alert('click!');
    }).popConfirm();
    
});
</script>

Dit script staat dan nog voor de afsluitende </table> tag, maar helemaal onderaan alle resultaten. Maar helaas, hij doet weer niets, terwijl je zou zeggen dat de ajax dan is ingeladen, want dit is direct wat er door de ajax php pagina wordt uitgespuugd en de verwijderbuttons staan er dus allemaal boven. Als ik hier .popConfirm() weer weglaat, dan werkt de alert wel weer.

Zal het niet toch wat anders zijn? Of is er een mogelijkheid hoe te checken of de ajax is ingeladen? Dan kan ik dit scriptje/functie weer uit de ajax-resultaten halen en op de normale pagina zetten. Ik ken eigenlijk alleen (document).ready(function() maar dat is voor een normale pagina natuurlijk. Ik ben niet zo'n javascript/jQuery held.

[ Voor 3% gewijzigd door Verwijderd op 13-05-2017 15:43 ]

[Ramon]

Kan je even een uitgeklede testcase maken in https://jsfiddle.net/, dan kunnen we er wat beter naar kijken.

Wellicht ook handig om je te wijzen op de "done" functie van jquery's ajax functie:

JavaScript:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

[ Voor 55% gewijzigd door Ramon op 13-05-2017 15:51 ]

[watercoolertje]

Het werkt nu inderdaad niet zoals je verwacht, wat er nu staat bij jouw code is eigenlijk dit:

JavaScript:

$('body').on('click', '.verwijderbutton', function () {
    alert('click!');
});
$('body').popConfirm();

Oftewel die on functie veranderd niks aan de werking van popConfirm wanneer die aan een DOM element wordt toegevoegd. Het zijn 2 compleet losstaande functies, het chainen van die functies veranderd daar in dit geval niks aan.

Zou je dit eens kunnen proberen:

JavaScript:

$('body').on('click', '.verwijderbutton', function () {
    $(this).popConfirm();
});

Als bovenstaande werkt is dat mooi, maar gezien ik popConfirm niet ken zou dit misschien ook nog kunnen werken:

JavaScript:

$('body').on('click', '.verwijderbutton', function (e) {
    if(!$(this).attr('data-hasPopConfirm') {
        e.preventDefault();
        $(this).attr('data-hasPopConfirm', 1);
        $(this).popConfirm();
        $(this).trigger('click');
    }
});

[ Voor 34% gewijzigd door watercoolertje op 13-05-2017 16:13 ]

[b2vjfvj75gjx7]

http://jsfiddle.net/m002acph/5/

[ Voor 6% gewijzigd door b2vjfvj75gjx7 op 13-05-2017 16:34 ]

[Ramon]

Of zo http://jsfiddle.net/dd3LpuhL/...

[b2vjfvj75gjx7]

Ramon schreef op zaterdag 13 mei 2017 @ 16:55:
Of zo http://jsfiddle.net/dd3LpuhL/...

Kan inderdaad ook; mijn setup ging van hetzelfde principe uit -> alleen had ik een 'fired' class toegevoegd, omdat ik niet weet of die API anders de functie dubbel ging uitvoeren (op reeds fired elements).

Ik heb de code blind geschreven, niet naar de source gekeken - dus wellicht zat die check er al in...

http://jsfiddle.net/m002acph/7/

Feitelijk is het maar één regeltje, dat je hoeft te schrijven (na AJAX of initialisatie van de nieuwe button).

[ Voor 13% gewijzigd door b2vjfvj75gjx7 op 13-05-2017 17:13 ]

[Verwijderd]

@watercoolertje Bedankt voor de opheldering. Maar helaas, dat werkte ook niet.

@b2vjfvj75gjx7 en @Ramon Super bedankt! Ik ben daardoor in de tussentijd al wat verder, de confirm wordt getoond, maar de normale actie (een on click delete actie) wordt niet meer uitgevoerd. Komt goed, nog effe puzzelen hier, en zo niet, dan zal ik een jsfiddle gaan (proberen te) maken.

[ Voor 13% gewijzigd door Verwijderd op 13-05-2017 17:40 ]

[b2vjfvj75gjx7]

Verwijderd schreef op zaterdag 13 mei 2017 @ 17:22:
@watercoolertje Bedankt voor de opheldering. Maar helaas, dat werkte ook niet.

@b2vjfvj75gjx7 en @Ramon Super bedankt! Ik ben daardoor in de tussentijd al wat verder, de confirm wordt getoond, maar de normale actie (een on click delete actie) wordt niet meer uitgevoerd. Komt goed, nog effe puzzelen hier, en zo niet, dan zal ik een jsfiddle gaan (proberen te) maken.

@Verwijderd

http://jsfiddle.net/m002acph/10/

Hier kan je met 'toekomstige' buttons een functie uitvoeren, nadat er op 'confirm' is geklikt...

Veel code is niet nodig, en puur om de buttons aan te maken of een fake SQL#ID te verwijderen...

- edit - Vreemd; het werkt enkel op de meest recente aangemaakte button, anders geeft het 'confirm' script een fout;

code:

Uncaught TypeError: Cannot read property 'preventDefault' of undefined

Dus daar lijkt aan de kant van de plugin iets mis te gaan...

[ Voor 22% gewijzigd door b2vjfvj75gjx7 op 13-05-2017 18:25 ]

[Verwijderd]

b2vjfvj75gjx7 schreef op zaterdag 13 mei 2017 @ 18:09:
[...]

- edit - Vreemd; het werkt enkel op de meest recente aangemaakte button, anders geeft het 'confirm' script een fout;

code:

Uncaught TypeError: Cannot read property 'preventDefault' of undefined

Dus daar lijkt aan de kant van de plugin iets mis te gaan...

Is dat ook als je 10 buttons ineens inlaadt, ipv 1 voor 1? Ik vind het erg lastig allemaal. Ik ben te slecht in jQuery merk ik.

Via een functie Showdata() laad ik namelijk met ajax een paar regels in, in: $('#mijnregels').html(response);
Daarin zitten een aantal regels met in elke regel dit: class='ajaxdelete btn btn-xs btn-red verwijderbutton'
Ik kan onderin de Showdata() functie gewoon dit $(".verwijderbutton").popConfirm() zetten en dan is de dialog popup al te zien voor alle buttons.

Maar hij zou vanwege de class ajaxdelete ook een functie

code:

    $('#mijnregels').on('click','.ajaxdelete',function() {
        // delete record uit database
    });

moeten uitvoeren, en zonder de popConfirm doet hij dat ook, maar die werkt met popConfrm dus niet meer.

Ik had gehoopt dat popConfirm alleen een simpel ding is dat tussen een actie in ligt, met 'die actie doen' bij een 'ja' of 'die actie negeren' bij een 'nee'. Maar dat is hier dus helaas niet het geval.

Op het laatst dacht ik, ik doe dan maar een gewone javascript dialog hier ipv die popConfirm, deze

code:

onclick="return confirm('Weet je zeker dat je dit artikel wilt verwijderen?')"

die overal werkt, maar vreemd genoeg als ik dan op 'Cancel' klik, dan voert ie de actie toch uit. Dat zal wel komen door die ajaxdelete class dan, dat ie toch sowieso wordt gefired.

Nou, na ruim 7 uur klooien ben ik erg gaar, ik ga maar stoppen voor vandaag met mijn gepruts.

[ Voor 17% gewijzigd door Verwijderd op 13-05-2017 18:59 ]

[b2vjfvj75gjx7]

Verwijderd schreef op zaterdag 13 mei 2017 @ 18:47:
[...]


Is dat ook als je 10 buttons ineens inlaadt, ipv 1 voor 1?

Dan werkt het wel;

http://jsfiddle.net/m002acph/11/

Bovenstaand voorbeeld spuugt er 25 tegelijk uit die allemaal werken...

Sowieso is het mogelijk, wat jij voor ogen hebt - maar als de plugin in de core op zijn bek gaat, hoeft het niet altijd aan jou / mij / wij te liggen

In dit soort gevallen zou ik liever zelf iets schrijven, dan terugvallen op codes van derden / een plug-in..

[Verwijderd]

b2vjfvj75gjx7 schreef op zaterdag 13 mei 2017 @ 18:59:
[...]

Dan werkt het wel;

http://jsfiddle.net/m002acph/11/

Bovenstaand voorbeeld spuugt er 25 tegelijk uit die allemaal werken...

Sowieso is het mogelijk, wat jij voor ogen hebt - maar als de plugin in de core op zijn bek gaat, hoeft het niet altijd aan jou / mij / wij te liggen

In dit soort gevallen zou ik liever zelf iets schrijven, dan terugvallen op codes van derden / een plug-in..

Ha, mooi! Wederom bedankt voor al je hulp. Misschien als ik jouw $(this) door mijn $('#mijnregels') kan vervangen dat ik er dan ben. En dan zal ik mijn oude deletefunctie waarschijnlijk binnen jouw functie moeten verplaatsen, of kopieren.

[b2vjfvj75gjx7]

Verwijderd schreef op zaterdag 13 mei 2017 @ 19:05:
[...]


Ha, mooi! Wederom bedankt voor al je hulp. Misschien als ik jouw $(this) door mijn $('#mijnregels') kan vervangen dat ik er dan ben. En dan zal ik mijn oude deletefunctie waarschijnlijk binnen jouw functie moeten verplaatsen, of kopieren.

Of je doet het zonder plugins minder mooi, werkt wel 100% goed

http://jsfiddle.net/buxjuuty/4/

Kwam deze ook nog tegen, maar goed...

http://bootboxjs.com/examples.html#bb-confirm-dialog

[Ramon]

http://jsfiddle.net/dd3LpuhL/1/ Als je $().popconfirm(); na je onClick set werkt het wel zoals zou moeten.

[Verwijderd]

b2vjfvj75gjx7 schreef op zaterdag 13 mei 2017 @ 19:12:
[...]
Of je doet het zonder plugins minder mooi, werkt wel 100% goed
http://jsfiddle.net/buxjuuty/4/

Kwam deze ook nog tegen, maar goed...
http://bootboxjs.com/examples.html#bb-confirm-dialog

Ja, ik vind de standard dialog minder mooi. En die Bootbox is weer een hele modal, die wat verder weg zit. De popConfirm is mooi, compact en zit lekker dichtbij.

Ramon schreef op zaterdag 13 mei 2017 @ 19:32:
http://jsfiddle.net/dd3LpuhL/1/ Als je $().popconfirm(); na je onClick set werkt het wel zoals zou moeten.

Wat ook hielp was om de juiste onclick te gebruiken. $('.delete').on('click',function() is toch iets anders dan $('#mijnregels').on('click','.delete', function()

Maar hoera! Het is dus inmiddels gelukt met jullie hulp! Dat was weer leerzaam. Thanks!