Fórum Root.cz
Hlavní témata => Vývoj => Téma založeno: ZAJDAN 09. 05. 2019, 15:13:32
-
do Ajax success získám json pole a pomocí jquery ho vykresím do tabulky:
success: function(json) {
createTable1(json);
}
function createTable1(json) {
var eTable ="<table id='kw-list' style='margin-left:auto; margin-right:auto;'>";
eTable +="<thead><tr><th colspan='10' id='listOfKW'>List of the KW</th></tr>";
eTable +="<tr style='background-color:#d0dbe4;'><th class='listOfKW'>Letter</th><th class='listOfKW'>Commission</th><th class='listOfKW'>Status</th><th class='listOfKW'>Date</th><th class='listOfKW'>KW</th><th id='t-p' class='listOfKW'>P</th><th id='t-cad' class='listOfKW'>CAD</th><th class='listOfKW'>NEST</th><th class='listOfKW'>SAP</th><th class='listOfKW'>SENT</th></tr>";
eTable +="</thead><tbody>";
$.each(json,function(index, row){
eTable += "<tr>";
$.each(row,function(key,value){
eTable += "<td class='" +key+" "+value+ "' style='font-size:16px;'>"+value+"</td>";
});
eTable += "</tr>";
});
eTable +="</tbody></table>";
$('#eachTable').html(eTable);
}
Hledám způsob, jak hodnotu jednoho ze sloupců 'Items' dosadit jako hodnotu attributu
něco jako:
onmouseover", "nhpup.popup('"+json[i].Items+"')" )
-
trochu upresnit by neslo? Ja mam sice kratky vedeni, ale moc nechapu, co kde chces pouzit.
Napis, co ti chodi v datecj v JSON-u a co presne chces docilit?
onmouseover", "nhpup.popup('"+json[i].Items+"')" )
patri k cemu? Neni to kompletni a standardni JQ event to neni, a cistej javascript takovou syntax snad nema
-
trochu upresnit by neslo? Ja mam sice kratky vedeni, ale moc nechapu, co kde chces pouzit.
Napis, co ti chodi v datech v JSON-u a co presne chces docilit?
onmouseover", "nhpup.popup('"+json[i].Items+"')" )
patri k cemu? Neni to kompletni a standardni JQ event to neni, a cistej javascript takovou syntax snad nema. A v items je co? pole? String?
Pokud jsou ta data treba nejaky ID, dela se to tak, ze to hodis treba kazdymu radku do data atributu napr:
eTable += "<tr>";
$.each(row,function(key,value){
eTable += "<td data-id=" + value + " class='" +key+" "+value+ "' style='font-size:16px;'>"+value+"</td>";
});
eTable += "</tr>";
s tim, ze nad celou tabulkou udelas event:
$('TABLE#kw-list').on('click', 'TR', e => {
const id = $(e.currentTarget).data('id')
alert(id)
});
Btw
success: function(json) {
createTable1(json);
}
jde zapsat jako:
success: createTable1
a doporucuji uz nejakej pouzivat template literals, protoze skladani stringu timhle stylem je dost neprehledny
-
Napis, co ti chodi v datecj v JSON-u a co presne chces docilit?
Vytvoři se tabulka a v ní co klíč/key to nový element <td>
eTable += "<td class='" +key+" "+value+ "' style='font-size:16px;'>"+value+"</td>";
jeden z těch klíčů je Items a jeho hodnotu/value bych chtěl použít v attributu onmouseover na tom vytvořeném <td>
-
V jQuery se posluchači na událost onmouseover navěšují zavoláním metody jQuery mouseover() (https://api.jquery.com/mouseover/).
Ten váš element td tedy sestavíte pomocí jQuery (https://api.jquery.com/jQuery/#jQuery-html-attributes) (ne takhle nepřehledně textově) a pak na něj pověsíte tu událost.
-
V jQuery se posluchači na událost onmouseover navěšují zavoláním metody jQuery
problém není s eventem...ten se vyvolá
já hledám způsob jak si vzít konkrétní klíč a jeho hodnotu a tu vsadit do attributu html elementu
běžně používám:
< span onmouseover="nhpup.popup('tralala');">something</span>
potřeboval bych namísto 'tralala' dosazovat hodnotu konkrétního klíče
-
tak jinak - co presne ti ted nefunguje? Tim myslim, co to jako dela/nedela, co pise console? Nejaky chyby?
-
problém není s eventem...ten se vyvolá
já hledám způsob jak si vzít konkrétní klíč a jeho hodnotu a tu vsadit do attributu html elementu
běžně používám:
< span onmouseover="nhpup.popup('tralala');">something</span>
potřeboval bych namísto 'tralala' dosazovat hodnotu konkrétního klíče
Ne, nechcete vsazovat hodnotu do atributu. Chcete nastavit posluchače události, který zavolá nějakou funkci a té předáte ten parametr.
const spanElement = $('<span>');
const value = 'tralala';
$(spanElement).mouseover(function event() {
nhpup.popup(value);
});
Mimochodem, měl byste jednodušší použít na to nějaký framework, např. Vue, než to takhle patlat sám s jQuery.
-
já hledám způsob jak si vzít konkrétní klíč a jeho hodnotu a tu vsadit do attributu html elementu
běžně používám:
< span onmouseover="nhpup.popup('tralala');">something</span>
potřeboval bych namísto 'tralala' dosazovat hodnotu konkrétního klíče
A to "tralala" bude kde?
-
Hochu, dyt to mas spatne by design, ach jo, proc to tak delas. Pouzij React, nebo Angular (lehci je jednicka), v obojim bys to co chces udelal na brnk. Ty potrebujes neco, v cem muzes Templatovat, a od toho jsou ty 2 frameworky. Uz chapu ten tvuj podpis, tebe asi casto nekdo odrazuje, kdyz delas tak by design spatne veci. Kup si za 600 mesicni permanentku na pluralsight.com a vyber si skoleni na React nebo na Angular a nemusis se uz tady na Rootu ptat, protoze ti to bude jasne.
-
Na to, v čem ZAJDAN plave, mu žádný FW nepomůže.
Vždyť jde jen o to ve vhodném místě získat z řádku hodnotu a tu použít "o něco dřív".
Ale už ti poradil robin martinez.
Tu hodnotu získáš při průchodu jednotlivými poli na řádce a pak událost dodatečně pověsíš na už vytvořený element (ale to bys ty tabulku musel vytvářet jinak).
Nabo na prasáka, když už to generuješ jen do hloupého stringu, tak si tam vlož za neznámou hodnotu %hodnota%, a pak za vnitřní smyčkou, kdy budeš znát potřebnou hodnotu, udělej replace('%hodnota%', hodnota).
-
const spanElement = $('<span>');
const value = 'tralala';
$(spanElement).mouseover(function event() {
nhpup.popup(value);
});
děkuji...tohdle mi je jasné, ale já nedokážu ty hodnoty klíče iterovat na tu událost
hodlám to celé předělat v Rails, ale zatím experimentuju s původní verzí
-
Vždyť jde jen o to ve vhodném místě získat z řádku hodnotu a tu použít "o něco dřív".
přesně jak píšeš :_)
já tu hodnotu již odchytil, ale do <td>, co se snažím je ji dostat do popupu nebo nějakého modalu
nemachruju, prostě v tomto plavu a uznávám to
-
Vyřešil jsem to trochu na hulváta, ale dosáhl jsem toho co jsem chtěl
tím že se mi ty hodnoty naplnili do <td class="Items" style="display:none;"> kterej jsem schoval
jsem si je jen pak předal do popupu
$(".Letter").mouseover(function event() {
var popup = $(this).siblings('.Items').html();
nhpup.popup(popup);
});
-
Jestli ti jde jen o uložení proměnné k elementu, tak na to se v jQuery používá funkce data()
-
děkuji...tohdle mi je jasné, ale já nedokážu ty hodnoty klíče iterovat na tu událost
hodlám to celé předělat v Rails, ale zatím experimentuju s původní verzí
Vždyť jste sem sám dával kód, který tu iteraci přes obsah toho JSONu dělá. Stačilo ho upravit, aby to HTML nevytvářel prasácky spojováním textů, a to navěšení události by vám pak vyplynulo samo. Třeba takhle:
function createTable1(json) {
var table = $("<table>", { id: 'kw-list' }); //tabulka má id, takže je zbytečné cpát jí inline styly, lepší je ostylovat to id v externím stylu
var thead = table.append($("<thead>"));
var tr = thead.append($("<tr>"));
tr.append($("<th>", { id: 'listOfKW', colspan: 10, text: 'List of the KW' }));
tr = thead.append($("<tr>")); //opět lepší nastylovat přes externí CSS
tr.append($("<th>", { class: 'listOfKW', text: 'Letter' }))
.append($("<th>", { class: 'listOfKW', text: 'Commission' }))
.append($("<th>", { class: 'listOfKW', text: 'Status' }))
.append($("<th>", { class: 'listOfKW', text: 'KW' }))
.append($("<th>", { class: 'listOfKW', text: 'P' })) //měl jste tam id, ale to musí být v rámci dokumentu unikátní
.append($("<th>", { class: 'listOfKW', text: 'CAD' })) //měl jste tam id, ale to musí být v rámci dokumentu unikátní
.append($("<th>", { class: 'listOfKW', text: 'NEST' }))
.append($("<th>", { class: 'listOfKW', text: 'SAP' }))
.append($("<th>", { class: 'listOfKW', text: 'SENT' }));
var tbody = table.append($("<tbody>"));
$.each(json, function (index, row) {
tr = tbody.append('<tr>');
tr.mouseover(function () {
nhpup.popup(row.Items);
});
$.each(row, function (key, value) {
$('<td>', { class: key + ' ' + value, text: value }) //opět styl v externím CSS
.appendTo(tr);
});
});
$('#eachTable').append(table);
}
(Je to napsané jen tak od oka, snad tam nebude moc chyb.)
Mimochodem, místo předělávání do RoR bych vám doporučil koupit si nějakou knížku se základy programování webu, abyste se dozvěděl, jak to celé funguje a co s čím souvisí. Každou chvíli se tu ptáte na nějaké detaily, přitom je z dotazů evidentní, že nerozumíte základům – tomu, jak to celé funguje. Slepováním kusů kódu, které vám někdo napíše na diskusním fóru, se programovat nenaučíte. Ptát se můžete na specifické věci, ale k pochopení toho, jak to celé funguje, potřebujete nějaký systematický výklad – ten z odpovědí na diskusním fóru nezískáte.
-
Mimochodem, místo předělávání do RoR bych vám doporučil koupit si nějakou knížku se základy programování webu, abyste se dozvěděl, jak to celé funguje a co s čím souvisí. Každou chvíli se tu ptáte na nějaké detaily, přitom je z dotazů evidentní, že nerozumíte základům – tomu, jak to celé funguje. Slepováním kusů kódu, které vám někdo napíše na diskusním fóru, se programovat nenaučíte. Ptát se můžete na specifické věci, ale k pochopení toho, jak to celé funguje, potřebujete nějaký systematický výklad – ten z odpovědí na diskusním fóru nezískáte.
1) upřímně děkuji, že máte snahu pomoci
2) já vím jak tyto věci fungují, ale špatně jsme se pochopili a já to špatně vyjádřil:
jediné o co mi šlo:
Jsonem přicházejí data obsahující 11indexů/klíčů...tedy co klíč to sloupec v tabulce.
11tý klíč nechci do tabulky vykreslit, ale jeho hodnoty použít jako popUp na klíč1.
1. Metoda ...ten sloupec nechat vykreslit a pomocí css ho schovat a ty hodnoty si z něj převzít(viz můj předchozí příspěvek)
2. Metoda ...definovat jednotlivě <td> který klíč se v něm má vykreslit a ten 11tý vynechat a tato metoda mi právě nešla
-
2. Metoda ...definovat jednotlivě <td> který klíč se v něm má vykreslit a ten 11tý vynechat a tato metoda mi právě nešla
Vy jste původně psal o tom, že chcete tu hodnotu použít při nastavení posluchače události.
Pokud chcete ten klíč vynechat, prostě do výpisu těch sloupců přidejte podmínku. Nebo jinak – ve skutečnosti je ten kód špatně, protože iteruje přes klíče v mapě, což nemá definované pořadí. Ve skutečnosti by se vám tedy hodnoty do tabulky vypsali jinak, než jak máte uvedené názvy sloupců, a teoreticky by mohly být hodnoty uspořádané jinak i v každém řádku tabulky. Takže správně je potřeba vyjmenovat ve správném pořadí klíče, které se mají do tabulky vložit. A v tom výčtu akorát vynecháte ten údaj, který tam mít nechcete. Takže:
function createTable1(json) {
var table = $("<table>", { id: 'kw-list' }); //tabulka má id, takže je zbytečné cpát jí inline styly, lepší je ostylovat to id v externím stylu
var thead = table.append($("<thead>"));
var tr = thead.append($("<tr>"));
tr.append($("<th>", { id: 'listOfKW', colspan: 10, text: 'List of the KW' }));
tr = thead.append($("<tr>")); //opět lepší nastylovat přes externí CSS
tr.append($("<th>", { class: 'listOfKW', text: 'Letter' }))
.append($("<th>", { class: 'listOfKW', text: 'Commission' }))
.append($("<th>", { class: 'listOfKW', text: 'Status' }))
.append($("<th>", { class: 'listOfKW', text: 'KW' }))
.append($("<th>", { class: 'listOfKW', text: 'P' })) //měl jste tam id, ale to musí být v rámci dokumentu unikátní
.append($("<th>", { class: 'listOfKW', text: 'CAD' })) //měl jste tam id, ale to musí být v rámci dokumentu unikátní
.append($("<th>", { class: 'listOfKW', text: 'NEST' }))
.append($("<th>", { class: 'listOfKW', text: 'SAP' }))
.append($("<th>", { class: 'listOfKW', text: 'SENT' }));
var tbody = table.append($("<tbody>"));
$.each(json, function (index, row) {
tr = tbody.append('<tr>');
tr.mouseover(function () {
nhpup.popup(row.Items);
});
$.each(['letter', 'commission' /* další sloupce */], function (index, key) {
$('<td>', { class: key + ' ' + row[key], text: row[key] }) //opět styl v externím CSS
.appendTo(tr);
});
//Chybný původní kód, pořadí sloupců není zaručené.
// $.each(row, function (key, value) {
//kdybyste ale tedy chtěl jeden klíč vynechat, prostě jen přidáte podmínku if (key == 'sloupecKVynechani') {return;}
// $('<td>', { class: key + ' ' + value, text: value }) //opět styl v externím CSS
// .appendTo(tr);
// });
});
$('#eachTable').append(table);
}
já vím jak tyto věci fungují
Nemyslím to nijak zle, ale nesouhlasím s vámi. Viděl jsem tu už spoustu vašich dotazů, a je z nich zřejmé, že nějak skládáte kód víceméně metodou pokusu a omylu, ale neznáte ty principy, které jsou za tím, nevíte, jak to dohromady funguje. Já vás nechci kritizovat, nikdo učený z nebe nespadl a každý se to musel nějak naučit – mně ale připadá, že tím vaším způsobem se to nikdy nenaučíte. Upřímně řečeno, četl jsem dost vašich dotazů, kde bych uměl odpovědět a odpověď by byla jednoduchá, ale záměrně jsem na ně neodpovídal – protože tohle podle mne není způsob, jak byste se to mohl naučit. A odpovídat na ty dotazy znamená jenom to, že se prodlužuje doba, než přijdete na to, že tudy cesta nevede – a o to pracnější pak pro vás bude doopravdy se to naučit.
Opravdu to vůči vám nemyslím nijak zle, líbí se mi, že se do toho snažíte proniknout a neodrazuje vás hned, když vám něco nejde – ale o to víc mne mrzí, že jste zvolil cestu, která podle mne k cíli nevede.
-
......
Opravdu to vůči vám nemyslím nijak zle, líbí se mi, že se do toho snažíte proniknout a neodrazuje vás hned, když vám něco nejde – ale o to víc mne mrzí, že jste zvolil cestu, která podle mne k cíli nevede.
díky..Vaše slova beru na vědomí, ale věřte, že i takto se člověk může velmi hodnotně poučit a pochopit
Nejsem full time programátor, tyto věci používám jen dle občasné potřeby, možná i proto se je neučím tak jako Ti, co to používají dnes a denně.
ještě jednou díky
-
1) upřímně děkuji, že máte snahu pomoci
2) já vím jak tyto věci fungují, ale špatně jsme se pochopili a já to špatně vyjádřil:
jediné o co mi šlo:
Jsonem přicházejí data obsahující 11indexů/klíčů...tedy co klíč to sloupec v tabulce.
11tý klíč nechci do tabulky vykreslit, ale jeho hodnoty použít jako popUp na klíč1.
1. Metoda ...ten sloupec nechat vykreslit a pomocí css ho schovat a ty hodnoty si z něj převzít(viz můj předchozí příspěvek)
2. Metoda ...definovat jednotlivě <td> který klíč se v něm má vykreslit a ten 11tý vynechat a tato metoda mi právě nešla
Až tu si sa konečne presne vyjadril čo potrebuješ... Takže tu je tretia metóda, keďže tvoje dve sú zlý nápad: Nevykresluj bunky tabuľky, TD, v cykle. Proste ich vymenuj, len tie, ktoré sa naozaj majú vykresliť.
V nasledovnom príklade obdržím pole objektov, pričom každý objekt obsahu 8 kľúčov. Ale ja proste vykreslím len tri, pričom štvrtý použijem do onclick:
const mountpoint = 'https://jsonplaceholder.typicode.com/users'
const button = $('button')
const tbody = $('tbody')
const loadAndRender = () => {
$.getJSON(mountpoint).then(data => {
$.each(data, (idx, val) => {
let row = $('<tr>')
.append($('<td>', {
text: val.id
}))
.append($('<td>', {
text: val.username,
on: {
click: _ => {
alert(val.name)
}
}
}))
.append($('<td>', {
text: val.email
}))
tbody.append(row)
})
})
}
button.on('click', loadAndRender)
Ako to funguje môžeš vyskúšať (klikni na ktorékoľvek username) tu: https://jsbin.com/rinolopugi/edit?output (https://jsbin.com/rinolopugi/edit?output)
A ako vyzerá štruktúru dát si môžeš pozrieť tu: https://jsonplaceholder.typicode.com/users (https://jsonplaceholder.typicode.com/users)
-
PS: K tomu príkladu v mojej predošlej odpovedi - keď vymenovávaš kľúče ktoré chceš použiť, môžeš použiť aj deštruktúrovanie a urobiť tak z kľúčov rovno premenné. Môže to aj skrátiť kód:
const mountpoint = 'https://jsonplaceholder.typicode.com/users'
const $button = $('button')
const $tbody = $('tbody')
const loadAndRender = () => {
$.getJSON(mountpoint).then(data => {
$.each(data, (index, { id, username, name, email }) => {
let row = $('<tr>')
.append($('<td>', { text: id }))
.append($('<td>', {
text: username,
on: {
click: _ => {
alert(name)
}
}
}))
.append($('<td>', { text: email }))
$tbody.append(row)
})
})
}
$button.on('click', loadAndRender)
PPS: názvy premenných button a tbody som zmenil v súlade s nepísanou konvenciou, že ak do premennej ukladáš jQuery objekt, pomenuješ premennú so znakom $ na začiatku. Ku konvenciám ešte dodám, že arrow funkcie nepíšem raz ako () => {} a inokedy ako _ => {} náhodne, ale tiež v rámci konvencií.