JQuery PHP-loadban lévő gomb

JQuery PHP-loadban lévő gomb
2013-12-30T01:08:36+01:00
2013-12-30T12:57:45+01:00
2022-10-15T22:41:43+02:00
Miazma
Egy komplex problémára keresem a megoldást ezen a példán keresztül. A index.html -ben lévő jQuery forráskódot szeretném elindítani a sys.php gombjával.

index.html
<!DOCTYPE HTML> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myDiv").load("sys.php"); }); </script> <script type="text/javascript"> $("#gomb").click(function(){ alert("Gomb!"); }); </script> </head> <body> <div id="myDiv">Betöltetlen!</div> </body> </html>

sys.php
<?php echo"<input type='submit' id='gomb' name='gomb' value='Gomb!' />"; ?>

A helyzet az, hogy csináltam egy pár száz soros weblapot, ami mySQL-ből szedi ki az adatokat és azt berakja egy űrlapba, amit a php generál. (Módosítás/Törlés gombok...) Nem is volt vele addig gond, amíg ki nem találtam, hogy felrobbantom és automatikusan kitöltővé nem teszem az űrlapomat. :D

Ha onclick-et +js functiont használok úgy megy a dolog, de gyönyörű lebegőablakaim vannak az űrlap sorainak hibaüzeneteihez, amikben sok munkám volt :)

pl.: 1-10 -ig számnál nincs a lebegőablakban hiba. Felette classot cserél. (Ebből nem készítettem miniverziót, mert már a másik sem ment)
$(document).ready(function() { $('input[type=text]').bind('click keyup', function() { var num = $(this).val(); if ( num < 11 && num.match(/[0-9]/) || num=="" ) { $(this).closest( "span" ).removeClass('invalid1').addClass('valid1'); } else { $(this).closest( "span" ).removeClass('valid1').addClass('invalid1'); } ...

A segítséget előre is köszönöm!
Mutasd a teljes hozzászólást!
Ha jól látom AJAX-al betöltesz egy tartalmat aminek az elemeire szeretnél eseményeket kötni. Akkor a jQuery live() vagy on() kell neked, nem s sima click(), az csak a meglévő elemekre alkalmazható.
Mutasd a teljes hozzászólást!

  • Ez
    <input type='submit' id='gomb' name='gomb' value='Gomb!' />
    jól mutat a </head> előtt?
    Vagy valamit én néztem el?...
    Mutasd a teljes hozzászólást!
  • Ha jól látom AJAX-al betöltesz egy tartalmat aminek az elemeire szeretnél eseményeket kötni. Akkor a jQuery live() vagy on() kell neked, nem s sima click(), az csak a meglévő elemekre alkalmazható.
    Mutasd a teljes hozzászólást!
  • Te nézted el, ez AJAX-al jön be a BODY-ban lévő DIV-be. :)
    Mutasd a teljes hozzászólást!
  • Kösz, már látom...
    Biztos "csipásak" voltak még a szemeim...
    Mutasd a teljes hozzászólást!
  • Nekem is, hajnali 9-kor. :)
    Mutasd a teljes hozzászólást!
  • Mivel nem vagyok "nagy JQ-is" ezért egy kicsit utána "bogarásztam" és ezért még egy kérdés...
    A válaszod -> "live() vagy on()" -> mennyiben befolyásolja a következő?
    "live() Removed in version 1.9. Adds one or more event handlers to current, or future, selected elements"

    *******************
    A kérdező kódjában a "jquery-1.9.1.js" szerepel...
    INFÓ: LINK...
    Mutasd a teljes hozzászólást!
  • Módisítottam erre, de így sem megy.
    <script type="text/javascript"> $("#gomb").on("click",function(){ alert("Gomb!"); }); </script>
    Nem elrejteni akarok dolgokat gombnyomásra, hanem lefuttatni nagy sok PHP scriptet, amiket kozzákötök a JQ-hoz. (Ez a hozzákötés nagyon találó!)

    Keresgélek ajaxos példákat. Szerintem (ugye mivel a JQ egy nagy function) lehet, hogy valami globális változókat nem ad át küldéskor.
    Mutasd a teljes hozzászólást!
  • Közben találtam egy hibát! csináltam még egy gombot, hogy megnézzem betölt-e még php nélkül és nem...

    index.html frissítve:

    <!DOCTYPE HTML> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myDiv").load("sys.php"); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#gomb").click(function(){ alert("Gomb!"); }); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#gombhtml").click(function(){ alert("Gomb!"); }); }); </script> </head> <body> <div id="myDiv">Betöltetlen!</div> <input type='submit' id='gombhtml' name='gombhtml' value='HTML Gomb!' /> </body> </html>
    Mutasd a teljes hozzászólást!
  • 1. tedd az on()-t a $(document).ready(function(){ ... }); részbe, hogy akkor fusson le, amikor a DOM betöltődött.

    2. on()-nál most a 3 paraméteres verziót kellene használni:

    $("...").on("click", "...", function(){ alert("Gomb!"); });

    manual
    Mutasd a teljes hozzászólást!
  • WWWWWWWWWWWWWÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁÁ!!!!!!!!

    Szóval én már tudom! Az utolsó teszt változtatás hibája segített. Ha valakinek nagyon kellene a hasonló probléma miatt ne aggódjon. A nap végén felteszem a megoldást is. Addig lehet küzdeni az 50 pontért! (Nem cseréltem kapcsolót. Egy "szót" kell átírni )
    Mutasd a teljes hozzászólást!
  • Lehet, hogy lekéstem?...
    De nekem így megy
    <script type="text/javascript"> $(document).ready(function(){ $( "#myDiv" ).load( "sys.php", function() { $("#gomb").click(function() { alert("Gomb!"); }); }); }); </script>

    Bár lehet, hogy megint elnéztem valamit, bár már nem csipás a szemem...
    Mutasd a teljes hozzászólást!
  • A pontokat szerintem így is, úgy is DJ_Tacee 9:16-os hozzászólásához kellene adni, ugyanis leírta a megoldást, az már kérdés, hogy nem tudod alkalmazni. live dokumentációjából ki lehetne indulni, hogy hogy kell átírni on()-ra a live()-ot. Adhattam volna copy-paste-t is, de abból meg nem tanulsz semmit.
    Mutasd a teljes hozzászólást!
  • Próbálgatom miket írhatok a ...-ok helyére de nem akar összejönni 2. megoldásnak.
    Mutasd a teljes hozzászólást!
  • bizonyítsd és megkapja! (már bocs)
    Az lenne akkor tényleg az 1. megoldás. (DJ_Tacee)
    Enyém a második és
    szabofe -é a 3., de ha DJ_Tacee -é nem jó átadom a pontot szabofe -nak és felteszem mind a 3 megoldást. Nagyon érdekel ez az on() dolog mostmár :)
    Mutasd a teljes hozzászólást!
  • Szóval:
    $("#gomb").click(function(){ alert("Gomb!"); });
    ugyanaz mint a
    $("#gomb").on("click", function(){ alert("Gomb!"); });

    itt a jQuery megkeresi a #gomb elemet és konkrétan az elemre rakja rá az eseménykezelőt. A gond ott van, hogy ez a betöltéskor még nem létezik, csak a load() után lesz ilyen elemed, így nem csinál semmit (szabofe 11:47-es kódja amiatt működik sima click-el, mert ott akkor rakja rá, amikor már bent van az elem).

    Anno volt egy live() dolog:
    $("#gomb").live("click", function(){ alert("Gomb!"); });
    ami már deprecated lett - 1.9-ben ki is vették - itt a trükk az, hogy az eseménykezelőt nem a #gomb-ra rakja rá, hanem a document-re ami biztos létezik. Amikor kattintasz valahol, akkor keletkezik egy esemény, ami szülőről-szülőre ugrálva felfele megy a DOM-ban (erről egy kis infó) - amikor eléri a document-et, akkor a jquery megnézi, hogy mi volt az esemény forrása, és hogy az illik-e valamelyik live()-os figyelőre, ha igen, akkor lefuttatja az eseménykezelőt.

    A fenti live()-nak az on()-os verziója ez lenne:
    $(document).on("click", "#gomb", function(){ alert("Gomb!"); });
    amiatt cserélték le a live()-ot on()-ra, mert ez annyival jobb, hogy itt már meg tudod adni azt a konténer elemet, ami majd figyelni fog, pl a #myDiv-et:
    $("#myDiv").on("click", "#gomb", function(){ alert("Gomb!"); });
    így a jquery nem fog minden kattintásnál vizsgálódni, csak akkor vizsgálódik, ha valahova a #myDiv-en belül kattintasz, pl a #gomb-ra.
    Mutasd a teljes hozzászólást!
  • Ha jól értem amit írsz, akkor így?
    <script type="text/javascript"> $(document).ready(function(){ $("#myDiv").load("sys.php"); $("#myDiv").on("click", "#gomb", function(){ alert("A betöltött gombra klikkeltél!"); }); }); </script>
    Mivel csak én is "tanulgatom" a JQ-t...
    Mutasd a teljes hozzászólást!
  • Aszta! Nagy vagy!
    Ezek szerint DJ_Tacee kapja a pontot :)

    Pont meglettem én is az on()-os, de a hátterét nem ismertem.
    index.html
    <!DOCTYPE HTML> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myDiv").load("sys.php"); }); </script> <script type="text/javascript"> $(document).ready(function() { $( "#myDiv" ).on( "click", "#gomb", function() { alert("Gomb PHP!"); }); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#gombhtml").click(function(){ alert("Gomb HTML!"); }); }); </script> </head> <body> <div id="myDiv">Betöltetlen!</div> <input type='submit' id='gombhtml' name='gombhtml' value='HTML Gomb!' /> </body> </html>
    sys.php
    <?php echo"<input type='submit' id='gomb' name='gomb' value='PHP Gomb!' />"; ?>

    Közben felfedeztem valamit, amit a te leírásod magyarázhat. 1.-re nekem így jött ki az alert:
    <script type="text/javascript"> $("#myDiv").ready(function() { alert("Click ready"); $("#gomb").click(function(){ alert("Gomb PHP!"); }); }); </script>
    Érdekes, mert ha kiveszed belőle a plusz alertet, akkor nem megy. Gondolom az 1. alert létrehozza a load()-ot :D

    Köszönöm a segítséget!
    Mutasd a teljes hozzászólást!
  • Érdekes, mert ha kiveszed belőle a plusz alertet, akkor nem megy. Gondolom az 1. alert létrehozza a load()-ot :D


    Nem teljesen A load egy aszinkron betöltést csinál és egy kis versenyhelyzet van: nálad a load hamarabb lefut, mint a
    $("#myDiv").ready(function() {
    így amikor a click()-et rárakja akkor már bent van az elem - de ha egy kicsit lassítod a load-ot pl. php-ben egy sleep(1)-el akkor már a ready győz és rögtön nem működik
    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