My page get disturbed by adding jQuery

JavaScript
1

hey folks,
i am having issue with page layout. i have added this datepicker



```html4strict
<table>
<tr>
<td>Date</td>
 <td><input type="text" id="txtInstallation" /></td?
</tr>
</table>

				$(function(){
					$("#txtInstallation").datepicker({
					showOn: 'button',
					buttonImage: '../images/calendar.png',
					buttonImageOnly: true,
					monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
					changeMonth: false,
					changeYear: true,
					dateFormat:'M-dd-yy'

					})
				});

and i call it in div which is next to it

<div id="txtInstallation"></div>

now when page is loaded, out of order but when i click the calender button and when calender open, the page is fine, it feel like that when i open the page the very last div which is footer and rest outside wrapper for bottom footer, works in perfect manner

2

i changed the div id to demo as in example


<table>
                        <tr>
                                                                      <td>Installation Date</td>
                                                                      <td><script language="JavaScript" type="text/javascript">
  																	$(function() {
																		$("#txtInstallation").datepicker({
																			showOn: 'button',
																			buttonImage: '../images/calendar.png',
																			buttonImageOnly: true,
																			monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
																			changeMonth: false,
			  																changeYear: true,
																			dateFormat:'M-dd-yy'
																		
																		});
																	});
                                                                    </script>
                                                                    <input type="text" name="txtInstallation" id="txtInstallation" class="txtfield"  />
                                                                    <div id="demo"></div>
                                                                    </td>
                                                                    </tr>
</table>
3

Both your ID, “txtInstallation” points to 2 element!

ID should be unique…e.g.
<input type=“text” id=“txtInstallation000” />
<div id=“txtInstallation”></div>


$(function(){
                    $("#txtInstallation000").datepicker({
                    showOn: 'button',
                    buttonImage: '../images/calendar.png',
                    buttonImageOnly: true,
                    monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    changeMonth: false,
                    changeYear: true,
                    dateFormat:'M-dd-yy'
 
                    })
                });
4

If you intend to use datepicker on both element, use class not ID…but if only on 1 element ID is fine…


$(function(){
	//text field
	$("#txtInstallation").datepicker({
		showOn: 'focus',
		buttonImage: '../images/calendar.png',
		buttonImageOnly: true,
		monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
		changeMonth: false,
		changeYear: true,
		dateFormat:'M-dd-yy'
	});
	
	//button
	$("#myButton").datepicker({
		showOn: 'button',
		buttonImage: '../images/calendar.png',
		buttonImageOnly: true,
		monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
		changeMonth: false,
		changeYear: true,
		dateFormat:'M-dd-yy'
	});
	
	//element
	$(".demo").datepicker({
		showOn: 'focus',
		buttonImage: '../images/calendar.png',
		buttonImageOnly: true,
		monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
		changeMonth: false,
		changeYear: true,
		dateFormat:'M-dd-yy'
	});
});

<input type="text" id="txtInstallation" />
<button id="" value="myButton" />
<div class="demo">test me1</div>
<div class="demo">test me2</div>
5

well basically, my layout is to have footer at base of the screen, no matter how short of small the screen is. now when i load any page, which has calender in it. the footer is held in space. (not touching, the base of screen) but when i click on calender to open the footer touches the base.
ps. the angry emo was to show my feeling i was getting angry on why it is happening

6

its still have same problem :frowning:


<input type="text" name="txtInstallation"  readonly="readonly" id="txtInstallation" value="<?php echo $results['INSTALLATION_DATE'][$i]; ?>" class="txtfield" />
<script type="text/javascript">
      $(function() {
          $("#txtInstallation").datepicker({
              showOn: 'button',
              buttonImage: '../images/calendar.png',
              buttonImageOnly: true,
              monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
              changeMonth: false,
              changeYear: true,
              dateFormat:'M-dd,yy'
          
          });
      });
</script>
7

Can you be more specific on what error or what problem you’ve encountered? on the first few post you’ve put a raw HTML now I’m seeing some PHP codes already…which probably a different use case.

Also, refrain from using a status smiley that you’re angry because it doesn’t work…hoping not on the people who replied to your post.