Div-be Beszúrt javascript nem működik

Div-be Beszúrt javascript nem működik
2021-09-24T02:08:56+02:00
2021-09-29T18:37:54+02:00
2022-10-15T21:26:22+02:00
Janos67
Sziasztok!

Adott az oldalon egy DIV, amibe egy Javascript betölti a html tartalmat.
Ez azonban tartalmaz egy <script> és </script> közé beírt Javascript kódot is.
Egyébként egy datetimepicker-ről van szó, aminek akkor kellene előugrania, ha az adott INPUT-ba kattintanak.

html += ' <td align="left">' + "\n"; html += ' <input id="param' + (aktParameter+1) + '" type="text" name="param' + (aktParameter+1) + '" class="form-control input-sm" maxlength="10" size="10" value="' + maiNap + '" readonly />&nbsp;<br />' + "\n"; html += '<script type="text/javascript">' + "\n"; html += "jQuery('#param' + (aktParameter+1)).datetimepicker({\n"; html += ' datepicker: true,' + "\n"; html += ' timepicker: true,' + "\n"; html += ' value: maiNap,' + "\n"; html += " lang: 'hu',\n"; html += ' closeOnDateSelect: true,' + "\n"; html += ' weeks: true,' + "\n"; html += ' defaultDate: maiNap,' + "\n"; html += ' dayOfWeekStart: 1,' + "\n"; html += " format: 'Y.m.d',\n"; html += ' todayButton: true,' + "\n"; html += ' inline: false,' + "\n"; html += ' onSelectDate: function (ct, $i) {' + "\n"; html += " // $('#datepickerig').val($('#datepickertol').val());\n"; html += ' }' + "\n"; html += '});' + "\n"; html += "</script>\n"; html += " </td>\n"; html += " </tr>\n";
Szóval, miután kialakítom a tartalmat, beteszem a html-t a DIV-be és megpróbálom az eval() segítségével megetetni vele a kódot:

$('#tartalom_div').html(html); eval($('#tartalom_div').html() + "");
Az eval() használatát egy fórumon találtam meg, mint elfogadott probléma megoldást.

Na, erre jön egy nagyon érdekes hibaüzenet a böngésző konzoljára:

SyntaxError: expected expression, got '<'[További tudnivalók]  kozos.js:1:8

Ebben a kozos.js-ben van a tevékenykedő kódom, ami a fentieket csinálja/ná.

Természetesen a kozos.js első sorában (sőt az egész sorban sem) semmi kisebb jel sincs. Ott egy //-rel kezdődő megjegyzés van.

Mit rontok el?
Vagy nem ez a legjobb módja annak, amit akarok?

Segítsetek, kérlek!

Köszönöm szépen előre is!

János
Mutasd a teljes hozzászólást!
Szóval, hiába is debugoltam én, nem ért semmit.
Ezért egy fapados módszert próbáltam ki.
A html beszúrásnál ashort daqe esetén "dspn" id-t adtam az INPUT-nak, míg long daqe-nél "dlpn"-t id-t adtam.
Majd a végén jött egy ilyen kód:

if ($('#dlp1').length > 0) { $('#dlp1').datetimepicker({ datepicker: true, timepicker: true, value: maiNap, lang: 'hu', closeOnDateSelect: true, weeks: true, defaultDate: maiNap, defaultTime: maiIdo, dayOfWeekStart: 1, format: 'Y.m.d', todayButton: true, inline: false, onSelectDate: function (ct, $i) { // $('#datepickerig').val($('#datepickertol').val()); } }); // console.log("dlp1 lefutott."); } if ($('#dlp2').length > 0) { $('#dlp2').datetimepicker({ datepicker: true, timepicker: true, value: maiNap, lang: 'hu', closeOnDateSelect: true, weeks: true, defaultDate: maiNap, defaultTime: maiIdo, dayOfWeekStart: 1, format: 'Y.m.d', todayButton: true, inline: false, onSelectDate: function (ct, $i) { // $('#datepickerig').val($('#datepickertol').val()); } }); // console.log("dlp2 lefutott."); } // És még 3-mal, 4-gyel és 5-tel is, majd... if ($('#dsp1').length > 0) { $('#dsp1').datetimepicker({ datepicker: true, timepicker: false, value: maiNap, lang: 'hu', closeOnDateSelect: true, weeks: true, defaultDate: maiNap, dayOfWeekStart: 1, format: 'Y.m.d', todayButton: true, inline: false, onSelectDate: function (ct, $i) { // $('#datepickerig').val($('#datepickertol').val()); } }); // console.log("dsp1 lefutott."); } if ($('#dsp2').length > 0) { $('#dsp2').datetimepicker({ datepicker: true, timepicker: false, value: maiNap, lang: 'hu', closeOnDateSelect: true, weeks: true, defaultDate: maiNap, dayOfWeekStart: 1, format: 'Y.m.d', todayButton: true, inline: false, onSelectDate: function (ct, $i) { // $('#datepickerig').val($('#datepickertol').val()); } }); // console.log("dsp2 lefutott."); } // És itt is van 3-mal, 4-gyel és 5-el
És mit ad isten?
Probléma nélkül inicializálódnak a dolgok és felugranak a megfelelő datetimepickerek.

Nagyon fapados, de egyelőre működik.

Minden esetre nagyon szépen köszönöm mindannyiótoknak a segítséget, ötleteket, javaslatokat!
Mutasd a teljes hozzászólást!

  • Honnan tölti be a divbe a js-t?
    Mutasd a teljes hozzászólást!
  • lang: 'hu',\n";  < helyett lang: 'hu,' + "\n";
    De még más helyen is van hiba.
    Nézd át a beszúrt kódot.
    Mutasd a teljes hozzászólást!
  • html += "</script>\n";

    Ez itt biztos hogy nem lesz jó. A <script> tag végét a "</script>" karaktersor jelzi, vagyis ezzel a sorral bezártad a <script> tagedet. Igaz, hogy ez egy JS literál belsejében van, de amikor a böngésző még csak a tagek értelmezésénél tart, akkor még nem foglalkozik vele, hogy mit jelent a kód, csak "ész nélkül" keresi a végét.

    Szokásos kerülő megoldások:

    html += "<\/script>/n"; html += "<" + "/script>/n";
    A lényeg, hogy valamilyen módon elkerüld a "</script>" karaktersort a kódodban.
    Mutasd a teljes hozzászólást!
  • Szia pch!

    Ajax-al kéri le a JS adatokat és ezek alapján dinamikus állítja össze a DIV tartalmát.
    Mutasd a teljes hozzászólást!
  • Ok, átnézem, de az említett sor amúgy is idézőjellel kezdődik.
    Na, de inkább kétszer nézem át, minthogy ez okozzon problémát.
    Mutasd a teljes hozzászólást!
  • Szia Csaboka2!

    Igen, ezen magam is gondolkodtam, sőt egyszer már én is belefutottam ebbe és én is hasonlóan oldottam meg akkor a /script hozzáadását.

    Köszi!
    Mutasd a teljes hozzászólást!
  • Megcsináltam.Dettó.

    Próbaképpen a /script elé tettem egy console.log-ot, de természetesen nem jelenik meg.
    Mutasd a teljes hozzászólást!
  • Szóval megkukkantottam, hogy is néz ki a div tartalma a feltöltés után:
    Mutasd a teljes hozzászólást!
  • Ezt vissza kell vonnom. Lefut a Console.log
    Nem tudom, akkor miért nem láttam, de most már szépen lefut.

    Tehát, végrehajtja a kiírást és mégsem reagál az INPUT-ra kattintás esetén a datetime Picker :-O
    Mutasd a teljes hozzászólást!
  • Hajjaj, most fogtam fel teljesen hogy te eval()-t hívsz, ráadásul HTML markupot adsz neki JS kód helyett. Az eval nem a barátod, de HTML-t főleg nem fog "megenni". Ez az egyik dolog.

    A másik dolog, hogy ha script elemet raksz valahová innerHTML tulajdonságon keresztül, akkor az a szkript nem fog lefutni. Gondolom erre találtál workaroundot, ahol csak a script elem tartalmát (és nem az egész HTML-t) átadták az evalnak. (Az ne zavarjon, hogy te nem használsz innerHTML tulajdonságot. A jQuery bizonyára azt használja a háttérben.)

    Javaslom lépj egy-két lépést hátra, és próbáld meg kevésbé nyakatekerten megközelíteni a problémát. Miért kell <script> elemet beszúrni a DOM-ba ahelyett, hogy közvetlenül hajtanád végre a kódot? Ha nincs rá nyomós indokod, máris ott egy egyszerűsítési lehetőség.
    Mutasd a teljes hozzászólást!
  • Csaboka2,

    létezik olyan is a div feltöltése közben, hogy egy multiselect-es select-et szúrok be.
    Ugyebár ezen eset(ek)ben a beszúrás után rebuild-olni kell JS kóddal az adott select-e(ke)t.
    Ezt úgy oldottam meg, hogy ezen select-ek id-it összegyűjtöttem és a feltöltés és az innen után hajtatom végre. És szépen működött.
    Na, ugyanezt megpróbáltam tegnap este (ok, hajnalban) a datepicker-ek esetében is.
    Egy datepicker-nél klafán lefutott a dolog.
    Ám, ha már 2 (esetleg több) datepicker volt, akkor meg a jQuery szállt el a túl sok rekurzióra hivatkozva :-O
    Nem is értettem a dolgot, ezért próbálkoztam ezzel a dologgal.
    De lehet, visszatérek rá, ha ezzel a módszerrel nem boldogulok a segítségetekkel.
    Mutasd a teljes hozzászólást!
  • Szia! Szerintem ebben a sorban van a probléma:

    html += "jQuery('#param' + (aktParameter+1)).datetimepicker({\n";
    Helyett:

    html += "jQuery('#param" + (aktParameter+1) + "').datetimepicker({\n";
    A problémától függetlenül a javascriptbe beillesztgetett "\n"-eket nem igazán értem. Azok elhagyhatóak nem?
    Mutasd a teljes hozzászólást!
  • Szia progee38!

    Te kis sasszem! :)

    Köszi, ekkora benézést!

    Kijavítottam és a beszúrás utáni kódot csatoltam. De nem működik. Most az a hiba jön fel, hogy

    Error: regexp too big  jquery.datetimepicker.js%20line%202091%20%3E%20eval:7:15

    :-O

    Szerintem jó a kód. Ja, a js végén korábban szereplő val()-t már kivettem.

    Most mi a csoda van?
    Mutasd a teljes hozzászólást!
  • Ja, még nem válaszoltam a felvetett ötletedre:

    de, elhagyhatóak a sorvégi backslah n-ek. Ez egy megszokás részemről.
    Mutasd a teljes hozzászólást!
  • Még egy megfigyelés: a jquery-t követő console.log nem fut le, tehát el sem jut odáig.

    Valamint a js végén nem a val()-t, hanem az eval()-t vettem ki, csak ez az okoska almás gép azt hiszi, minden úgy helyes, ahogy ő gondolja.
    Mutasd a teljes hozzászólást!
  • Amikor futtatod a kódot, milyen hibaüzenetet kapsz a konzolban?

    html += ' value: maiNap,' + "\n"; html += ' defaultDate: maiNap,' + "\n";
    Az idézett két sorban szereplő "maiNap" változót is beakartad szúrni?

    html += ' value: ' + maiNap + ',' + "\n"; html += ' defaultDate: ' + maiNap + ',' + "\n";
    Mutasd a teljes hozzászólást!
  • Nos, először is kiszedtem a sorvégeket, ahol lehetett idézőjelek közé tettem a sorokat. Így most a beszúrásra kerülő kód:

    html += ' <td align="left">' + "\n"; html += ' <input id="param' + (aktParameter+1) + '" type="text" name="param' + (aktParameter+1) + '" class="form-control input-sm" maxlength="16" size="16" value="' + maNapEsIdo + '" readonly />&nbsp;<br />' + "\n"; html += '<script type="text/javascript">' + "\n"; html += " jQuery('#param" + (aktParameter+1) + "').datetimepicker({"; html += " datepicker: true,"; html += " timepicker: true,"; html += ' value: maNapEsIdo,'; html += " lang: 'hu',"; html += " closeOnDateSelect: true,"; html += " weeks: true,"; html += ' defaultDate: maiNap,'; html += ' defaultTime: maiIdo,'; html += " dayOfWeekStart: 1,"; html += " format: 'Y.m.d HH:mm'," html += " todayButton: true,"; html += " inline: false,"; html += " onSelectDate: function (ct, $i) {"; html += " // $('#datepickerig').val($('#datepickertol').val());"; html += " }"; html += " });"; html += " console.log('Itt jártam 1.');"; html += perScript; html += " </td>\n"; html += " </tr>\n";

    Amikor lefut az innerHtml, akkor jön egy újabb jquery hibaüzenet, még mielőtt a console.log lefutna:

    SyntaxError: missing } after function body [További tudnivalók]  jquery-1.11.2.min.js:2:498

    Olyan, mintha bármit is teszek, mindig előállna egy újabb kifogással.

    Igen, a maNapEsIdo, a maiNap és maiid változókra hivatkozom ott azon három sorban.
    Ezek a js legelején kapnak val-lal értéket.
    Mutasd a teljes hozzászólást!
  • html += " format: 'Y.m.d HH:mm',"

    Hibádzik egy pontosvessző.
    Mutasd a teljes hozzászólást!
  • Hát, megint igaz, hogy több szem, több csipa :)

    Betettem pontosvesszőt, de ugyanaz a jquery hibaüzenet jön fel.
    Mutasd a teljes hozzászólást!
  • Kiszedtem a beszúrásra szánt js-kódot:

    jQuery('#param2').datetimepicker({ datepicker: true, timepicker: true, value: maNapEsIdo, lang: 'hu', closeOnDateSelect: true, weeks: true, defaultDate: maiNap, defaultTime: maiIdo, dayOfWeekStart: 1, format: 'Y.m.d HH:mm', todayButton: true, inline: false, onSelectDate: function (ct, $i) { } });
    Ha ezt a konzolba le akarom futtatni, akkor ezt kapom:

    InternalError: too much recursion [További tudnivalók]

    :-O
    Mutasd a teljes hozzászólást!
  • var maNapEsIdo, maiNap, maiIdo; jQuery('#param').datetimepicker({ datepicker: true, timepicker: true, value: maNapEsIdo, lang: 'hu', closeOnDateSelect: true, weeks: true, defaultDate: maiNap, defaultTime: maiIdo, dayOfWeekStart: 1, format: 'Y.m.d HH:mm', todayButton: true, inline: false, onSelectDate: function (ct, $i) { // $('#datepickerig').val($('#datepickertol').val());"; } });
    Ennek biztosan jó a szintaxisa. A html változódba történő beszúrásban sem látok kivetni valót.
    Mindezek ellenére beimportáltam a jquery 1.11.2-t, és az említett datapickert (xdan/datetimepicker) legújabb verzióját. Ezt követően a html beillesztés nélkül natúrban lefuttattam a kódot (jQuery('#param').datetimepicker({...}), és nem dobott hibát.
    Mutasd a teljes hozzászólást!
  • Király!

    Akkor velem mit kötekedik?

    Miért nem mentem szakácsnak?
    Mutasd a teljes hozzászólást!
  • Szóval, most azt próbáltam ki, hogy a csak datetimepicker-ekhez tartozó INPUT-okat szúrom be innen-ként. majd a végén lefuttatom ezt:

    // Ahol multicheckbox van, illetve ahol dátum/teljes dátum van, azokat inicializáljuk aktParameter2 = 0; for (aktParameter = 0; aktParameter < lekerdezesParameterek.length; aktParameter++) { aktParameter2 = aktParameter+1; lefutottKor = false; console.log("aktParameter: '" + aktParameter + "'."); parameterekTomb = lekerdezesParameterek[aktParameter].split("\t"); if (parameterekTomb[3].toUpperCase() == "MULTICHECKBOX") { $('#param' + aktParameter2).multiselect({ includeSelectAllOption: true, maxheight: 200 }); $('#param' + (aktParameter+1)).multiselect('rebuild'); console.log((aktParameter+1) + ". MULTICHECKBOX inicializálva."); lefutottKor = true; } else if (parameterekTomb[3].toUpperCase() == "INPUT" && parameterekTomb[2].toUpperCase() == "DS") { $('#param' + aktParameter2).datetimepicker({ datepicker: true, timepicker: true, value: maNapEsIdo, lang: 'hu', closeOnDateSelect: true, weeks: true, defaultDate: maiNap, defaultTime: maiIdo, dayOfWeekStart: 1, format: 'Y.m.d HH:mm', todayButton: true, inline: false, onSelectDate: function (ct, $i) { // $('#datepickerig').val($('#datepickertol').val()); } }); console.log(aktParameter2 + ". INPUT/DS inicializálva."); lefutottKor = true; } else if (parameterekTomb[3].toUpperCase() == "INPUT" && parameterekTomb[2].toUpperCase() == "DL") { $('#param' + aktParameter2).datetimepicker({ datepicker: true, timepicker: true, value: maiNap, lang: 'hu', closeOnDateSelect: true, weeks: true, defaultDate: maiNap, dayOfWeekStart: 1, format: 'Y.m.d', todayButton: true, inline: false, onSelectDate: function (ct, $i) { // $('#datepickerig').val($('#datepickertol').val()); } }); console.log(aktParameter2 + ". INPUT/DL inicializálva."); lefutottKor = true; } else { lefutottKor = true; } while (!lefutottKor) { await sleep(1000); } }
    A sleep-et már csak azért tettem be, hátha az okozza a problémát, de nem, ugyanis már az első datetimepicker (a DS-ben) lefutási kísérlete is kudarcba fullad ezzel:


    too much recursion[További tudnivalók]  jquery.datetimepicker.js%20line%202091%20%3E%20eval:7:15

    Ezt megelőzi, hogy a legelső paramétert (ami MULTICHECKBOX) inicializálja, a for átlép 1-re, felfedezi. hogy az INPUT (méghozzá DS) és nekiszaladva azonnal jön a fenti hibaüzenet.

    Na, fogtam ezt:

    $('#param1').datetimepicker({ datepicker: true, timepicker: true, value: maNapEsIdo, lang: 'hu', closeOnDateSelect: true, weeks: true, defaultDate: maiNap, defaultTime: maiIdo, dayOfWeekStart: 1, format: 'Y.m.d HH:mm', todayButton: true, inline: false });
    és konzolba megpróbáltam kézzel lefuttatni:

    InternalError: too much recursion [További tudnivalók]

    Mindezt Firefox 56.0 (32 bites) angol verzió alatt. Sajnos azon a gépen, ahol fejlesztek, még max az IE lenne, de az felejtős, mert totál rosszul jeleníti meg az oldalt.

    Szóval, van valakinek ötlete, mi a baj?
    Mutasd a teljes hozzászólást!
  • Közben én is lecseréltem az eddigi datetimepickert a fellelhető legújabbra, de azzal is ugyanazt teszi.
    Mutasd a teljes hozzászólást!
  • Képzeljétek:

    A DatePicker inicializáló részt még a for ciklus előtt a param2-re ráfuttatva ott lefut és nem panaszkodva működik is.
    Na, de ezt hogy tudom dinamikussá tenni?
    Vagyis attól "hülyül" meg, hogy az inicializálás a for-on belül van? Ez ám a "mély" rekurzió!!

    Szívesen veszem az ötleteket!
    Mutasd a teljes hozzászólást!
  • Amikor azt mondja, hogy "Too much recursion", akkor meg kéne nézni a stack trace-t (remélhetőleg azt is kiírja hozzá). Ahol ismétlődést látsz, az ismétlődő sorok közül az egyik végtelen rekurziót okoz. (Na jó, lehet nem végtelent, de 99% az esélye hogy igen.)
    Mutasd a teljes hozzászólást!
  • Csaboka2!

    Ezt hol tudom megnézni, mert amúgy a hibaüzenet annyi, amennyit beidéztem.
    Mutasd a teljes hozzászólást!
  • Ezen a gépemen nincs Firefox, de arra tippelnék hogy a "További információk" link segíthet. (A Chrome egyből a konzolra írja ki a stack trace-t, ha írok egy triviális végtelen rekurziós függvényt.)
    Mutasd a teljes hozzászólást!
  • A További információkra ez jön be:

    InternalError: too much recursion - JavaScript

    Ez nem sokat segít.
    Holnap megpróbálom rávenni az illetékest, hogy toljon fel eg Chrome-ot.
    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