| Autor | Zpráva | ||
|---|---|---|---|
| vlkodlak Profil |
opět přicházím s prosbou o pomoc
vyrobil jsem jednoduchou tabulku: <table id="my-table">
<tr>
<td>datum</td>
<td>jméno</td>
</tr>
<tr>
<td><input type="text" class="datepicker"></td>
<td><input type="text" class="jmeno"></td>
</tr>
</table>v header jsem přilinkoval knihovnu jQuery s datapickerem <header>
...
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
...
</header> a vše funguje, ale jakmile vložím nový řádek tímto kodem tak datapicker neaktivuje $('#my-table tr:first').after(
'<tr id="new">\n\
<td><input type="text" value="" name="newdate" class="datepicker"></td>\n\
<td><input type="text" value="" name="newjmeno"></td>\n\
</tr>'
); |
||
| Serg Profil |
Ale
<header> není k tomu aby se do něj vkládaly <link>y a <script>y, na to je <head>, trošku rozdíl :D
Jako prohlížeč si s tím asi poradí, ale dal bych to spíš do <head>.
Řekl bych, že po přidání řádku bude potřeba zavolat inicializaci datepickeru, buď na ten nově přidaný řádek, jestli ho dokážeš nějak vybrat, nebo reinicializovat datepicker pro celou tabulku. $('#my-table tr:first').after(
'<tr id="new">\n\
<td><input type="text" value="" name="newdate" class="datepicker"></td>\n\
<td><input type="text" value="" name="newjmeno"></td>\n\
</tr>'
);
$('#my-table .datepicker').datepicker(); |
||
| vlkodlak Profil |
Serg:
ano máš pravdu, má nepozornost a děkuji pomohlo nakopnout. stejně se mi nedaří u vložených řádku aktivovat datapicker ... ale pokud v consoli spustim $("#new .datepicker").datepicker(); tak
se mi v tabulce datapicker-y začnou fungovat správné všude ... takže jen potřebují inicializovat datapicker? <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table id="my-table">
<tr>
<td>datum</td>
<td>jméno</td>
</tr>
<tr>
<td>static line <input type="text" class="datepicker"></td>
<td>static line <input type="text" class="jmeno"></td>
</tr>
</table>
<input type="button" name="Add" value="add" id="btnadd">
<script>
$(function () {
$("#btnadd").click(function () {
$('#my-table tr:last').after(
'<tr id="new">\n\
<td><input type="text" value="" name="newdate" class="datepicker"></td>\n\
<td><input type="text" value="" name="newjmeno"></td>\n\
</tr>'
);
});
$(".datepicker").datepicker();
});
</script>
</body>
</html> |
||
| Keeehi Profil |
$(document).on('focus',".datepicker:not(.hasDatepicker)", function(){$(this).datepicker();}); |
||
| vlkodlak Profil |
Serg: děkuji za nakopnuti
Keeehi: děkuji za funkční řešení ... funguje ... wow rozumím jen polovině toho co jsi napsal a mám "strach" Tě víc otravovat s prosbou popsat to co jsi stvořil (konkrétně tento kousek ".datepicker:not(.hasDatepicker)" nebo, prosím, o nasměrováni na dokumentaci kde si to mohu nastudovat. Děkuji
|
||
| Keeehi Profil |
#6 · Zasláno: 9. 2. 2021, 00:12:00
vlkodlak:
Já nic moc nevytvořil. Jen rozumím tomu kde je obecně problém a tak je jednoduché pro mě hledat na googlu. Když voláš $(".datepicker").datepicker(); tak to najde na stránce všechny elementy s třídou datepicker a na nich zavolá metodu datepicker, která na každém z nich provede inicializaci. Když pak přidáš nový řádek, tak ve tvém původním příkladu to jen přidá nový input, ale už nic na něm neprovádí inicializaci. Těch možností je více. Tahle není úplně nejefektivnější, ale nechtělo se mi přepisovat ten tvůj kód. Tohle je nejčastější odpověď, co se ve vyhledávání objevuje. Zřejmě proto, že je univerzální. Dělá to asi toto. Na dokument nastaví událost onfocus. Pokud se někde v dokumentu objeví focus událost, tak se zkontroluje zda platí podmínka co je jako druhý parametr a pokud ano, spustí se obsluha nastavené funkce. .datepicker:not(.hasDatepicker) je "podmínka" (ve skutečnosti selector) který říká, že ho zajímají elementy, které mají třídu datepicker a zároveň nemají třídu hasDatapicker. Pokud na nějakém inputu proěhla inicializace datepickeru, přidá se mu třída hasDatepicker. Tímto se tedy zajistí, je pokud ta focus událost nastane na nějakém už inicializovaném inputu, nebude se inicializovat znovu. U těch nových se tedy inicializace provede v posledním možném okamžiku, když se na něj klikne.
Tento postup má ale tu nevýhodu, že to vyhodnocování, jestli se má inicializovat nebo ne se spouští s jakýmkoli focusem na stránce. Což bude většinou neefektivní. Tahle lazy inicializace by měla možná tak smysl kdybys inputů generoval na jedné stránce tisíce a uživatel by jich vyplnil jen pár. V tvém případě bude lepší, když tu inicializaci provedeš ihned po vytvoření toho inputu. Jelikož předpokládám, že když uživatel přidá ručně nový řádek, bude ho chtít i vyplnit. Ona by i v tomto případě šla udělat lazy inicializace ale myslím že by to byla zbytečnost. Ona ta inicializace zas až takový overhead přidávat nebude a stejně v naprosté většině případů bude potřeba udělat. $("#btnadd").click(function () {
var new_row = $('<tr id="new">\n\
<td><input type="text" value="" name="newdate" class="datepicker"></td>\n\
<td><input type="text" value="" name="newjmeno"></td>\n\
</tr>'
);
new_row.find(".datepicker").datepicker();
var r = $('#my-table tr:last').after(new_row);
}); |
||
| vlkodlak Profil |
#7 · Zasláno: 9. 2. 2021, 08:48:38
Keeehi:
ještě jednou děkuji |
||
|
Časová prodleva: 3 roky
|
|||
0