Jump to content

Calendar dropdown not working when inserted with javascript.


njdubois
Go to solution Solved by njdubois,

Recommended Posts

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

Link to comment
Share on other sites

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 by njdubois
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.