Jump to content


Photo

Calendar dropdown not working when inserted with javascript.


Best Answer njdubois, 23 March 2013 - 02:05 AM

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

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 njdubois

njdubois

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 22 March 2013 - 05:43 PM

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.marcomtec...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



#2 njdubois

njdubois

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 22 March 2013 - 05:53 PM

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...ng-in-added-div

 

Which led me to:

http://stackoverflow...h-a-dynamic-dom

 

But these are confusing me more than anything?


Edited by njdubois, 22 March 2013 - 06:08 PM.


#3 njdubois

njdubois

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 22 March 2013 - 06:12 PM

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



#4 njdubois

njdubois

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 22 March 2013 - 06:49 PM

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?



#5 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,172 posts

Posted 23 March 2013 - 01:19 AM

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.



#6 njdubois

njdubois

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 23 March 2013 - 01:45 AM

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



#7 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,172 posts

Posted 23 March 2013 - 01:49 AM

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



#8 njdubois

njdubois

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 23 March 2013 - 02:05 AM   Best Answer

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






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com