| Autor | Zpráva | ||
|---|---|---|---|
| honoson Profil |
#1 · Zasláno: 23. 9. 2013, 16:46:11
Zdravím, nevím si rady a hledám někoho, kdo by mi poradil.
Mám formulář, kde si pomocí Jquery po kliknutí na odkaz přidám další formulářovou buňku pro vkládání. U přidané buňky by měl být Jquery datepicker kalendář pro výběr datumu. Jakmile je to input přidaný pomocí Jquery funkce, nefunguje mi v ní ten kalendář. Nevěděl by někdo jak na to ? Předem děkuji. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
<script>
//datum
$(function() {
$( "#p_scnt" ).datepicker({ dateFormat: "yy-mm-dd" });
$( "#p_scnt" ).datepicker();
$( "#p_scnt_x" ).datepicker({ dateFormat: "yy-mm-dd" });
$( "#p_scnt_x" ).datepicker();
});
//přidat input
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
$('<p><label for="p_scnts"><input type="text" id="p_scnt_x" size="20" name="p_scnt_' + i +'" value="" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
<a href="#" id="addScnt">+ Přidat</a>
<div id="p_scents">
<p>
<label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
</p>
</div> |
||
|
Časová prodleva: 5 dní
|
|||
| quatzael Profil |
#2 · Zasláno: 28. 9. 2013, 23:55:40
Nevím jestli jsi to už náhodou nevyřešil. Každopádně problém bude asi v tom, že tu funkci s metodou datepicker spouštíš tehdy, když ještě daný element neexistuje.
Tedy například tohle: $( "#p_scnt" ).datepicker({ dateFormat: "yy-mm-dd" });nemůžeš mít dřív než daný element, v tomto případě p_scnt, skutečně v tom HTML existuje. |
||
|
Časová prodleva: 4 dny
|
|||
| honoson Profil |
#3 · Zasláno: 3. 10. 2013, 08:44:03
quatzael, quatzael:
Díky za odpověď, ještě jsem to nepořešil... no ale nevím jak to volat dříve. Jsou to dvě oddělené funkce, jedna přidává do input kalendář, druhá po kliknutí přidá další kolonku. Mohl by jsi mi v té funkci naznačit jak to udělat? Díky moc. |
||
| quatzael Profil |
#4 · Zasláno: 3. 10. 2013, 14:50:31
honoson:
„no ale nevím jak to volat dříve.“ Právě že ne dříve, ale spíše později. Dá se to vyřešit ale mnohem jednodušeji. Datepicker by měl jednoduše fungovat i na element určený pouze třídou. Takže pokud u každýho toho elementu nemáš nějaký speciální nastavení toho datepickeru (jako pouze výběr data s určitým omezením od-do) tak to definuj jako třídu a novým elementům tuto třídu přiřaď. Tohle by myslím mělo fungovat na rozdíl od toho id.. Pokud máš menší počet různých datepickerů podle jejich charakteristik tak to můžeš udělat nějak takto: $( ".datepicker-a" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "+1M", yearRange: "1900:2100" });
$( ".datepicker-b" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "-18Y", yearRange: "1900:2100", });A vždycky když tam budeš vkládat ten nový element tak k němu přiřaď i tu odpovídající třídu. Ale pokud je ten počet přidávaných inputů menší a jednoznačně omezenej, tak klidně můžeš všechny elementy rovnou napsat přímo do původního kódu, dát jim display: none; a pak je javascriptem jen zobrazovat/skrývat. A samozřejmě definovat na začátku ten datepicker, klidně i pomocí identifikátorů. |
||
| honoson Profil |
#5 · Zasláno: 3. 10. 2013, 19:55:05
quatzael, quatzael:
Díky za rady, zkusil jsem jednoduchý kód viz níže... pomocí tříd místo toho id... ten kalendář se není nezobrazuje nikde... asi někde dělám chybku :o( <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
<script>
$( ".datepicker-a" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "+1M", yearRange: "1900:2100" });
$( ".datepicker-b" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "-18Y", yearRange: "1900:2100" });
</script>
<div>
<p>
<label><input type="text" class="datepicker-a" size="20" value=""/></label>
<label><input type="text" class="datepicker-b" size="20" value=""/></label>
</p>
</div> |
||
| quatzael Profil |
#6 · Zasláno: 3. 10. 2013, 20:08:06
honoson:
Funguje Ti jQuery vůbec jako takový. Mám dojem, že nenačítáš celou knihovnu, tedy přímo soubor jquery.js. Nejsem si jistej, jestli stačí jen ten jquery.min.js. Asi ne. Já s tím Tvým zdrojem nemám moc zkušenosti. jQuery používám přímo z mýho serveru, kde mám uložený všechny jQuery skripty, který potřebuju. Tedy v mým případě tam mám hned první script: <script type="text/javascript" src="/js/jquery.js"></script> |
||
| pcmanik Profil |
#7 · Zasláno: 3. 10. 2013, 20:11:05
quatzael:
Min je minifikovaný súbor, takže načíta celú knižnicu. Skôr by som to jQuery už aktualizoval predsa len 1.4.4 je zopár rokov stará. |
||
| quatzael Profil |
honoson:
Neříkám, že by googleapis.com byl nespolehlivý zdroj, ale když to náhodou na chvíli spadne, tak Ti to pak taky nebude fungovat. Pokud to není velký problém, tak si spíš ty soubory nahraj na server, budeš to mít i malinko rychlejší. Aktualizovat to stačí když budeš aktualizovat svůj vlastní obsah. |
||
| juriad Profil |
#9 · Zasláno: 3. 10. 2013, 20:15:38
honoson:
Přesuň $( ".datepicker-a" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "+1M", yearRange: "1900:2100" });
$( ".datepicker-b" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "-18Y", yearRange: "1900:2100" });$(function() {
// ... tady ...
});quatzael: .min. je jen označení, že jde o minifikovanou verzi; je funkčně identická s "plnou" verzí, jen je zkomprimovaná. Navíc to honosonovi v prvním příspěvku funguje. Ohledně rychlosti; ehm, jamile se jednou stáhne, tak zůstane v cachi. Navíc, pokud už nějaký jiný web tuto knihovnu používá, bude v cachi již před první návštěvou honosonovy stránky. |
||
| quatzael Profil |
honoson:
Celej ten script musíš mít v .ready funkci. tedy takhle: <script type="text/javascript">
$(document).ready(function(){
$( ".datepicker-a" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "+1M", yearRange: "1900:2100" });
$( ".datepicker-b" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "-18Y", yearRange: "1900:2100" });
}
</script>juriad: Jojo, chápu. S tou min verzí to vím, ale jen jsem si nebyl jistej, jestli je to jen komprimovaná verze nebo jestli to náhodou není nějaká osekaná verze. |
||
| honoson Profil |
#11 · Zasláno: 3. 10. 2013, 20:36:39
Tak přátelé už to funguje jak má, děkuji za dobré rady. Scripty si ukládám k sobě na server, todle jsem stáhl z webu a ladil, tak jsem to neřešil. Posílám funkční celý kód, třeba to někdy někdo využije. Kalendář se zobrazuje u první kolonky i u té další přidané... Tak už si to jen doladím pro své potřeby... díky H.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
<script>
//přidat input
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
$('<p><label for="p_scnts"><input type="text" class="datepicker-b" size="20" name="p_scnt_' + i +'" value="" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
//přidat kalendář
$( ".datepicker-b" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "-18Y", yearRange: "1900:2100" });
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
<a href="#" id="addScnt">+ Přidat</a>
<div id="p_scents">
<p>
<label for="p_scnts"><input type="text" class="datepicker-a" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
</p>
</div>
<script>
//přidat kalendář
$( ".datepicker-a" ).datepicker({ dateFormat: "yy-mm-dd", maxDate: "+1M", yearRange: "1900:2100" });
</script> |
||
|
Časová prodleva: 11 let
|
|||
0