PHP + JAVA + JQUERY űrlapmező autokiegészítés HIBA!
2014-04-12T19:09:16+02:00
2014-04-12T20:58:25+02:00
2022-08-17T21:40:34+02:00
sztamas1990
Üdv!

Az lenne a feladat, hogy olyan űrlapot készítsek, melynek a beviteli mezője automatikusan felajánlja a lehetséges kiegészítéseket azok közül, amik már rögzítésre kerültek az adatbázisba. Lényegében egy auto kiegészítőről lenne szó.  Ez ideáig rendeben is volt, mindaddig, amíg nem akartam kombinálni egy űrlapelem hozzáadó scriptel. Ennek eredménye az lett, hogy a legelső űrlapmező még megfelelően működik, tehát kiírja a lehetőségeket, azonban a második, harmadik.. n-dik mezőnél amit a javascriptel generál a felhasználó, már nem él az auto-kiegészítés. A kérdésem az lenne, hogy megtudná e mondani valaki, hogy hol lehet a hiba? Én egyszerűen nem tudom megfejteni.. Előre is köszi!



forrás:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test jquery autocomplete</title> <script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $('#megnevezes').autocomplete({source:'suggest_zip.php', minLength:1}); }); </script> <link rel="stylesheet" href="jquery/css/smoothness/jquery-ui-1.8.2.custom.css" /> <style type="text/css"><!-- /* style the auto-complete response */ li.ui-menu-item { font-size:12px !important; } --></style> </head> <body> <div> <h1>KajaNaplo v0.1</h1> <form method="post"> <div id="itemRows"> Megnevezés: <input type="text" id="megnevezes" num="1"/> Mennyiség: <input type="text" id="mennyiseg" /> <input onclick="addRow(this.form);" type="button" value="Add row" /> (This row will not be saved unless you click on "Add row" first) </div> <p><input type="submit" name="ok" value="Save Changes"></p> </form> </div> <script type="text/javascript"> var rowNum = 0; function addRow(frm) { rowNum ++; var row = '<p id="rowNum'+rowNum+'">Megnevezés: <input type="text" id="megnevezes" /> Mennyiség: <input type="text" id="mennyiseg" /> <input onclick="addRow(this.form);" type="button" value="Add row" /> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>'; jQuery('#itemRows').append(row); frm.megnevezes.value = ''; frm.mennyiseg.value = ''; } function removeRow(rnum) { jQuery('#rowNum'+rnum).remove(); } </script> </body> </html>
Mutasd a teljes hozzászólást!
Az a gond azzal amit akarsz, hogy az új dom nem kerül bele. ehhez kell a live().
Próbáld meg így, remélem nem írtam el semit.

(function ($) { $.fn.liveAutocomplete = function (opts) { this.live("click", function() { if (!$(this).data("init")) { $(this).data("init", true).autocomplete(opts); } }); return this; }; }(jQuery)); $('.megnevezes').liveAutocomplete({source:'suggest_zip.php', minLength:1});

Bár a googliban ilyet is láttam, probáld ki.

$('.megnevezes').live("keydown.autocomplete");
Mutasd a teljes hozzászólást!

  • id="megnevezes"

    id egyedi, 1 db inputot jelöl. Legyen inkább class, ha hozzáadod az inputokat
    Mutasd a teljes hozzászólást!
  • jogos, de akkor a Jquery kódot --> 
    $('#megnevezes')
    hogy terjesszem ki, hogy az osztály minden elemére jó legyen?
    Mutasd a teljes hozzászólást!
  • $('.megnevezes') helyette a helyes kijelölés, így az összes megnevezes classú elemre lefut

    jQuery(document).ready(function(){ $('.megnevezes').autocomplete({source:'suggest_zip.php', minLength:1}); });
    Mutasd a teljes hozzászólást!
  • Ez rendben van. A próbléma az, hogy a generált soroknál ennek ellenére nem működik a script. Ha simán a html forrásba teszek be 10 mezőt akkor jó, mert ugye közös osztályba tartoznak, azonban ha generálom, már nem lesz jó. Csak nem derül ki miért, mert elvileg annak ugyan úgy meg kell maradnia megnevezes osztályúnak. Vagy rosszul látom?
    Mutasd a teljes hozzászólást!
  • Hogy generálod le?

    Mi a generált inputok classa? id-t átírtad ott is class-ra?
    A megnevezés mellett mennyiséget és a rowNum-ot is classolni kellene id helyett hisz több lesz belőle.

    var row = '<p class="rowNum'+rowNum+'">Megnevezés: <input type="text" class="megnevezes" /> Mennyiség: <input type="text" class="mennyiseg" /> <input onclick="addRow(this.form);" type="button" value="Add row" /> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>'; jQuery('#itemRows').append(row);
    mondjuk akkor már itt is így kellene inkább szvsz:

    function removeRow(rnum) { jQuery('.rowNum'+rnum).remove(); }
    Mutasd a teljes hozzászólást!
  • Pontosan így lett átírva a script, de még mindig nem jó..

    Én arra gyanakszom, hogy 
    <div id="itemRows">
    miatt nem működik, hisz minden új hozzáadott mező új egyedi id-s div be kerül, de nem tudom hogyan lehetne máshogy kivitelezni.
    Mutasd a teljes hozzászólást!
  • Igen!

    Így nem jó?

    <script type="text/javascript"> jQuery(document).ready(function(){ $('.megnevezes').autocomplete({source:'suggest_zip.php', minLength:1}); }); </script> <style type="text/css"><!-- /* style the auto-complete response */ li.ui-menu-item { font-size:12px !important; } --></style> </head> <body> <div> <h1>KajaNaplo v0.1</h1> <form method="post"> <div class="itemRows"> Megnevezés: <input type="text" class="megnevezes" num="1"/> Mennyiség: <input type="text" class="mennyiseg" /> <input onclick="addRow(this.form);" type="button" value="Add row" /> (This row will not be saved unless you click on "Add row" first) </div> <p><input type="submit" name="ok" value="Save Changes"></p> </form> </div> <script type="text/javascript"> var rowNum = 0; function addRow(frm) { rowNum ++; var row = '<p class="rowNum'+rowNum+'">Megnevezés: <input type="text" class="megnevezes" /> Mennyiség: <input type="text" class="mennyiseg" /> <input onclick="addRow(this.form);" type="button" value="Add row" /> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>'; jQuery('.itemRows').append(row); frm.megnevezes.value = ''; frm.mennyiseg.value = ''; } function removeRow(rnum) { jQuery('.rowNum'+rnum).remove(); } </script>
    Mutasd a teljes hozzászólást!
  • Nem, így egyik funkció se működik, se a sorgenerálás, se a kiegészítés.
    Mutasd a teljes hozzászólást!
  • Az a gond azzal amit akarsz, hogy az új dom nem kerül bele. ehhez kell a live().
    Próbáld meg így, remélem nem írtam el semit.

    (function ($) { $.fn.liveAutocomplete = function (opts) { this.live("click", function() { if (!$(this).data("init")) { $(this).data("init", true).autocomplete(opts); } }); return this; }; }(jQuery)); $('.megnevezes').liveAutocomplete({source:'suggest_zip.php', minLength:1});

    Bár a googliban ilyet is láttam, probáld ki.

    $('.megnevezes').live("keydown.autocomplete");
    Mutasd a teljes hozzászólást!
  • Feltöltök ide egy test.html-t, próbáld majd ki, majd írd át az autocomplete source-át a saját php fájlodra, illetve a srcipt src-ket és css hivatkozást is cseréld vissza a saját útvonalaidra.

    Mostani állapotában hozzá tudsz adni sorokat+ működik az autocomplete a hozzáadott soroknál is (egy tömböt raktam mögé forrásként, abból vesz ki most autómárkákat autocomplete jelleggel).

    Az addRow() függvény meghívásakor újra meg kell hívni az autocomplete fv-t, utána már hozzácsatolja az autocomplete-et így.
    Mutasd a teljes hozzászólást!
    Csatolt állomány
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd