njdubois Posted March 22, 2013 Share Posted March 22, 2013 I am not sure what the problem is, so I am unsure what to google! What I am trying to do is. Inside a form tag, I have a div. This div's contents are a button titled "change date" that calls a javascript function that changes the innerhtml to that of a javascript date dropdown/selecter/calendar. As well as a button thats titled "Save new date" that calls another function that switches a current date to the new date. The problem is, that calendar doesn't work when I insert it with javascript. You can see what I am talking about with the following. The source code looks like this: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> @import "caltest2/jquery.datepick.css"; </style> <script type="text/javascript" src="caltest2/jquery.datepick.js"></script> <script type="text/javascript"> $(function() { $('#popupDatepicker_cur_date').datepick({ onSelect: function() { $('#calendar').submit(); } }); }); function change_date() { document.getElementById("output").innerHTML='<input id="popupDatepicker_cur_date" name="popupDatepicker_cur_date" value="" />'; } </script> </head> <body> <form> This one works!<br /> <input id="popupDatepicker_cur_date" name="popupDatepicker_cur_date" value="" /> </form> <br /><br /> <form> Clicking this button, uses Javascript, and innerHTML to set the divs contents to the same line of code used above.<br /> This time, it doesn't work?<br /> <input type="button" onclick="change_date();" value="change" /> <div name="output" id="output"></div> </form> </body> </html> You can see this code live at: http://www.marcomtechnologies.com/test_j.html Can anyone point me in the direction as to whats going wrong? The console doesn't say anything and I can't think of any solution to this problem! Thanks in advance! Nick Quote Link to comment https://forums.phpfreaks.com/topic/276036-calendar-dropdown-not-working-when-inserted-with-javascript/ Share on other sites More sharing options...
njdubois Posted March 22, 2013 Author Share Posted March 22, 2013 (edited) UPDATE: It seems as if the div has something to do with it? I updated the sample page to include a div example. <form> This one is inside a div and does not work?<br /> <div name="divTest" id="divTest"><input id="popupDatepicker_cur_date" name="popupDatepicker_cur_date" value="" /></div> </form> Nick [EDIT] I've found something on google: http://stackoverflow.com/questions/10759193/jquery-datepicker-not-working-in-added-div Which led me to: http://stackoverflow.com/questions/1059107/why-does-jquery-uis-datepicker-break-with-a-dynamic-dom But these are confusing me more than anything? Edited March 22, 2013 by njdubois Quote Link to comment https://forums.phpfreaks.com/topic/276036-calendar-dropdown-not-working-when-inserted-with-javascript/#findComment-1420400 Share on other sites More sharing options...
njdubois Posted March 22, 2013 Author Share Posted March 22, 2013 If I remove the first date picker, the one inside the div works. My solution lies inside the second link I found. Will post if I solve. Nick Quote Link to comment https://forums.phpfreaks.com/topic/276036-calendar-dropdown-not-working-when-inserted-with-javascript/#findComment-1420404 Share on other sites More sharing options...
njdubois Posted March 22, 2013 Author Share Posted March 22, 2013 Its clear that my problem lies in the Dynamic created date picker. But I don't know if its the plug in I am using, or if there is something I can code that will get the functionality I'm looking for working. One of the examples in the links provided above: You need to use the 'live' event to make it work with dynamic DOM. So, if the class for your datepicker inputs is 'date-input', following code will make it work: $(document).ready(function() {$('.date-input').live('click', function() {$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();});}); Seems like the direction I need to go, but I can't get this implemented into my code. I'm still unsure where I need to go with this? Quote Link to comment https://forums.phpfreaks.com/topic/276036-calendar-dropdown-not-working-when-inserted-with-javascript/#findComment-1420410 Share on other sites More sharing options...
haku Posted March 23, 2013 Share Posted March 23, 2013 function setDatePicker() { $('#popupDatepicker_cur_date').datepick({ onSelect: function() { $('#calendar').submit(); } }); } $(function() { setDatePicker(); }); function change_date() { document.getElementById("output").innerHTML='<input id="popupDatepicker_cur_date" name="popupDatepicker_cur_date" value="" />'; setDatePicker(); } Try that. Quote Link to comment https://forums.phpfreaks.com/topic/276036-calendar-dropdown-not-working-when-inserted-with-javascript/#findComment-1420444 Share on other sites More sharing options...
njdubois Posted March 23, 2013 Author Share Posted March 23, 2013 It worked, and I think I see why. When I first load the page, the date changing code that gets added dynamically doesn't exist. So you have to call that function after its been created to attach the calendar stuff. What I don't understand is: $(function() { setDatePicker(); }); What is that doing? Many...many...MANY thanks! Nick Quote Link to comment https://forums.phpfreaks.com/topic/276036-calendar-dropdown-not-working-when-inserted-with-javascript/#findComment-1420447 Share on other sites More sharing options...
haku Posted March 23, 2013 Share Posted March 23, 2013 Well, it's a little difficult to explain, but it's an anonymous function that provides protection against scripts breaking on other parts of the page. You don't actually specifically need to wrap it in the anonymous function. Actually, what you should be doing is the following: $(document).ready(function(){ setDatePicker(); }); This will execute on page load, ensuring that the element against which it applies exists. Without this, you may run into situations where the javascript is executed, but since the element doesn't exist at that time, you will run into troubles Quote Link to comment https://forums.phpfreaks.com/topic/276036-calendar-dropdown-not-working-when-inserted-with-javascript/#findComment-1420448 Share on other sites More sharing options...
Solution njdubois Posted March 23, 2013 Author Solution Share Posted March 23, 2013 Ok, I put the new code it. I guess I'm just going to have to read up on javascript. Thanks again, your solution worked like a charm! Nick Quote Link to comment https://forums.phpfreaks.com/topic/276036-calendar-dropdown-not-working-when-inserted-with-javascript/#findComment-1420449 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.