I want to allow users to add new date fields to a form using jQuery, but the new date fields are just plain text fields without the popup datepicker.
This PHP code:
echo '
<a href="#" class="elgg-button-submit-element clone-datepicker" rel="nofollow">+</a>
Works:
'.elgg_view('input/date', array('name' => 'date[]',)).'
Doesn\'t work:
<div class="new_datefield"></div>
<script>
$(".clone-datepicker").live("click", function(e){
e.preventDefault();
// clone the node
var html = $(".datefield").html();
$(html).insertBefore(".new_datefield");
});</script>
<div id="line_store" style="visibility: hidden; display:inline-block;">
<div class="datefield">
'.elgg_view('input/date', array('name' => 'date[]',)).'
</div>
</div>';
Generates this HTML code. The snapshot below was taken after cloning the datepicker field once:
<a href="#" class="elgg-button-submit-element clone-datepicker" rel="nofollow">+</a> Works:
<input type="text" value="" name="date[]" class="elgg-input-date popup_calendar hasDatepicker" id="dp1494426891315">Doesn't work:
<input type="text" value="" name="date[]" class="elgg-input-date popup_calendar hasDatepicker" id="dp1494426891316"><div class="new_datefield"></div> <script> $(".clone-datepicker").live("click", function(e){ e.preventDefault(); // clone the node var html = $(".datefield").html(); $(html).insertBefore(".new_datefield"); });</script> <div id="line_store" style="visibility: hidden; display:inline-block;"> <div class="datefield"> <input type="text" value="" name="date[]" class="elgg-input-date popup_calendar" /> </div>
The original input field provides the calendar popup while the new input field, added with jQuery, does not. What can I do to cause the new input field to also provide the calendar popup?
For what it's worth, each cloned input field has the same 'id' value. I don't know whether that matters or how to affect it.
Thank you,
- Scott
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by RaĆ¼l Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.
- ihayredinov@ihayredinov
ihayredinov - 0 likes
- C0Rrupt@thjMMvw
C0Rrupt - 0 likes
- ihayredinov@ihayredinov
ihayredinov - 0 likes
- C0Rrupt@thjMMvw
C0Rrupt - 0 likes
You must log in to post replies.Use datepicker AMD module to initiate the newly added fields.
Thanks Ismayil. I'm not sure how to use datepicker AMD module to initiate the fields. I've looked over the documentation, but I'm sure I'm not seeing the most direct path to making this happen. How would I change what I have?
https://github.com/Elgg/Elgg/blob/2.3/views/default/input/date.js
See how input/date uses it
I'm sorry. I wish the example would have made my solution apparent, but It didn't. Honestly, I have tried: I've read the example code, read the elgg documentation on AMD and did research on implementing the AMD javascript system. I just can't see how to apply what I've read to my problem. Instead of learning everything and then applying the part that I need, can you please help me to apply a solution to my problem? I know you are far more capable of knowing what that looks like than I am. By applying the solution, I can learn this more organically.
Thank you.