Autor Zpráva
pajadvorak
Profil
#1 · Zasláno: 20. 8. 2020, 08:44:13
Odpovědět Citovat
Mám problém s načtením value v button. Tlačítko button se zobrazí v DOM až po ajaxu a jquery mi vrací prázdné value.

Prosím o pomoc, co je potřeba udělat, abych získal value. Snažil jsem se i o reload DOM, ale přijde mi, že se reload udělá stejně až po tom, co mi alert hlásí prázdnou value. Děkuji 

$(document).ready(function(){
  $("button").click(function() {
      var fired_button = $(this).val();
      alert(fired_button);
  });
});
Radek9
Profil
#2 · Zasláno: 20. 8. 2020, 09:05:11
Odpovědět Citovat
pajadvorak:
A ten ajax je kde?
pajadvorak
Profil
#3 · Zasláno: 20. 8. 2020, 09:11:40
Odpovědět Citovat
Radek9: 
function showHint(str) {
            if (str.length == 0) { 
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET", "xxxx.php?stat=<?php echo $stat;?>&q=" + str, true);
                xmlhttp.send();
            }
        }
RastyAmateur
Profil
#4 · Zasláno: 20. 8. 2020, 09:13:38 · Upravil/a: RastyAmateur o 2 minuty později
Odpovědět Citovat
pajadvorak:
V první řadě - val() ti bere hodnotu z value atributu. Takže ten HTML element musí vypadat nějak takto: <button value="What you want">Independent text</button>. Ten text Independent text (který odhaduji, že chceš) získáš pomocí text().

V druhé řadě - to tlačítko vytváříš a nebo pouze zobrazuješ až někdy později po načtení stránky? Pokud jej opravdu vytváříš a vkládáš do DOMu, použij $(document).on("click", "button", () -> {}).


A taky bych ti doporučil si rozmyslet, jestli chceš a nebo nechceš používat jQuery. Půlku kódu máš v něm a ten ajax máš zase v pure JS.
Když už tam ten ajax taháš, využívej ho všude, ušetříš si dost práce. A nebo ho zbytečně nestahuj a pracuj jen v čistém javascriptu.
pajadvorak
Profil
#5 · Zasláno: 20. 8. 2020, 09:24:38
Odpovědět Citovat
RastyAmateur:
tlačítko button se vkládá do html z ajaxu (takže tam na začátku není)

ano, HTML element vypadá nějak takto <button value="What you want">Independent text</button>, ale je doplněn až s ajaxem

Nemám problém s vložení tlačítka button. To tam je. Ale změní se DOM. A já nevím, jak mám získat tu hodnotu z toho nově přidaného tlačítka button. Protože když si dám cvičně zobrazit hodnotu, tak mi to ukáže prázdný alert.

Cvičně nějak takto: 
$("button").click(function() {
                var fired_button = $(this).val();
                alert(fired_button);
            });
RastyAmateur
Profil
#6 · Zasláno: 20. 8. 2020, 09:30:37 · Upravil/a: RastyAmateur o 3 minuty později
Odpovědět Citovat
Vždyť jsem ti to psal - když jej vytvoříš a vložíš do DOMu až později, pak musíš použít $(document).on("click", "button", () -> {})

Jde o to, že ty tím kódem $("button").click(() -> {}) řekneš, že se mají vzít všechny buttony a navázat se na ně nějaký listener. Ono se to provede. Pak teprve někdy po ajaxu vytvoříš další button. Ale nic víc, pouze ho vytvoříš. Již na něj nenavazuješ žádný listener. Takže když na něj klikneš, logicky se nic neděje.
Když ovšem použiješ tu druhou variantu, začne to fungovat trochu jinak. Začne to monitorovat všechny kliknutí v dokumentu (protože jsi jako první argument dal document) a až pak, "zpětně", se to přesvědčí, že to byl button (jelikož druhá argument v druhé metodě).
Jestli chceš vědět podrobněji, jak to vlastně funguje, přečti si dokumentaci, určitě to tam bude vysvětlené lépe.


Ještě doporučím příště zkusit vypsat do konzole celý ten element. Když ti nějaká metoda nevrací to, co chceš, možná to hledáš na špatném místě. Při console.log(this) a nebo console.log($(this)) by jsi možná zjistil, že to, co chceš, vlastně neexistuje. Tedy alespoň to tak vyznívá z tvého popisu.
pajadvorak
Profil
#7 · Zasláno: 20. 8. 2020, 09:34:26 · Upravil/a: pajadvorak o 21 minut později
Odpovědět Citovat
RastyAmateur: 
$(document).on("click", "button", () -> {
            var fired_button = $(this).val();
            alert(fired_button);
        });

Toto mi vůbec nefunguje. Celé se to zbortí (hlásí to chybu).

VM2737:15 Uncaught SyntaxError: Unexpected token ')'
at b (VM2706 jquery-3.5.1.min.js:2)
at Pe (VM2706 jquery-3.5.1.min.js:2)
at S.fn.init.append (VM2706 jquery-3.5.1.min.js:2)
at S.fn.init.<anonymous> (VM2706 jquery-3.5.1.min.js:2)
at $ (VM2706 jquery-3.5.1.min.js:2)
at S.fn.init.html (VM2706 jquery-3.5.1.min.js:2)
at Object.<anonymous> (VM2706 jquery-3.5.1.min.js:2)
at c (VM2706 jquery-3.5.1.min.js:2)
at Object.fireWith [as resolveWith] (VM2706 jquery-3.5.1.min.js:2)
at l (VM2706 jquery-3.5.1.min.js:2)


RastyAmateur: 
$(document).on("click","button",function() {
            var fired_button = $(this).val();
            alert(fired_button);
    });
    </scri

Toto už funguje, ale alert mi zobrazí 2x. Nejprve prázdný a pak se správnou value. Jak se dá pořešit, aby mi zobrazil jen alert s value a ne nejprve prázdný. Děkuji
Kajman
Profil
#8 · Zasláno: 20. 8. 2020, 10:21:43
Odpovědět Citovat
A nezůstala tam ještě jiná událost navěšená na click? Nebo nevoláte někde událost click kódem?

Tedy, když si v této funkci dáte 
alert("Z nové funkce: "+fired_button);
tak mají tento text obě varování?
pajadvorak
Profil
#9 · Zasláno: 20. 8. 2020, 11:54:51 · Upravil/a: pajadvorak o 39 minut později
Odpovědět Citovat
Kajman:
Tak jednou je to value prázdná a po druhé je tam value. Vždy je tam "Z nové funkce:"


Tak už jsem došel tak daleko, že mi to pracuje :-)

Ale ještě mám potíž s tím, že to zřejmě správně nezpracuje tu value 

$(document).on("click",".tlacitko_ktm",function() {
  showKTM(this.value);
});

value vypadá takto: 
value=\"'".$pole['customerName1'].", ".$pole['street1'].", ".$pole['zipCode'].", ".$pole['city']."','".$pole['KTMID']."'\"

Takže to při volání funkce má vypadat takto: 
showKTM('xxx','yyy');

A mám dojem, že to není to samé jako když to tam vložím ručně...

Musím to volání funkce napsat nějak jinak nebo tu hodnotu nějak upravit / převést? Děkuji
Kajman
Profil
#10 · Zasláno: 20. 8. 2020, 13:03:52
Odpovědět Citovat
Pokud chcete předávat více parametrů funkci, bude nejjednodušší každý parametr mít jako jiný atribut toho tlačítka. Např. pomocí atributů data. Nemusíte pak řešit parsování.
pajadvorak
Profil
#11 · Zasláno: 20. 8. 2020, 13:46:28
Odpovědět Citovat
Kajman:
To funguje skvěle až do té doby, kdy se objeví více tlačítek a klikne se například na to druhé. data se vždy vezmou z prvního tlačítka.

Jak to prosím řešit? Děkuji
Kajman
Profil
#12 · Zasláno: 20. 8. 2020, 14:10:30
Odpovědět Citovat
Když použijte např. 
<button class="tlacitko_ktm" data-ktm1="adresa" data-ktm2="souradnice">KTM</button>
a v js 
showKTM(this.getAttribute('data-ktm1'),this.getAttribute('data-ktm2'));
Tak to přeci bude brát atributy z tlačítka, na které jste kliknul, proč by mělo vadit, že jich je více?

Pokud to nefunguje, pošlete odkaz na živou ukázku.
pajadvorak
Profil
#13 · Zasláno: 20. 8. 2020, 14:26:57
Odpovědět Citovat
Kajman:
Tak to už funguje parádně :-) děkuji


a mám ještě jeden problém:

v ajaxu je tento kód onclick="document.getElementById('a".$pole['KTMID']."').style.display='none'; document.getElementById('aaa".$pole['KTMID']."skr').style.display='none';document.getElementById('aaa".$pole['KTMID']."').style.display='contents';document.getElementById('aaa".$pole['KTMID']."').style.textDecoration='underline';"

A já to teď celé potřebuji spustit. Takže něco na tento způsob this.getAttribute('data-ktm1'), ale aby to spustilo všechno stejně, jako onclick

děkuji
Kajman
Profil
#14 · Zasláno: 20. 8. 2020, 14:54:24
Odpovědět Citovat
Nechápu co chcete. Možná stačí 

elementstimnastavenymonclickem.onclick();


Ale on by se měl ten onclick spustit také. Uvedené navěšení na událost kliknutí u document by nemělo rušit událost kliknutí zadanou jako attribut přímo u buttonu.
pajadvorak
Profil
#15 · Zasláno: 20. 8. 2020, 14:58:09
Odpovědět Citovat
Kajman:
v tom ajaxu jsou onlicky a ty já potřebuji upravit tak, aby to vyhovovalo CSP

předtím jsme řešili funkci s parametry.

Teď ještě řeším, že tam mám tento onclick: 
onclick="document.getElementById('a".$pole['KTMID']."').style.display='none'; document.getElementById('aaa".$pole['KTMID']."skr').style.display='none';document.getElementById('aaa".$pole['KTMID']."').style.display='contents';document.getElementById('aaa".$pole['KTMID']."').style.textDecoration='underline';"

ten onclick taky potřebuji spustit, když se po ajaxu změní DOM

ale nesmí to již být onlick (ten nevyhovuje CSP

děkuji
Kajman
Profil
#16 · Zasláno: 20. 8. 2020, 15:07:03
Odpovědět Citovat
Pokud je KTMID v this.getAttribute('data-ktm2'), tak 

var KTMID = this.getAttribute('data-ktm2');
if(KTMID) {
  document.getElementById('a'+KTMID).style.display='none';
  document.getElementById('aaa'+KTMID+'skr').style.display='none';
  //atd.
}

Ale obecně je lepší takové styly nachystat podle nějakého společného předka a jemu měnit třídu, zda se májí podpoložky s nějakou obecnou třídou zobrazit nebo ne. Nemusíte pak řešit nějaká idečka a mělo by to být univerzálnější a rychlejší.
pajadvorak
Profil
#17 · Zasláno: 20. 8. 2020, 15:34:23
Odpovědět Citovat
Kajman:
Velké díky! Vše funguje, jak má. :-)
Časová prodleva: 4 roky

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0