Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1362
  • Last Modified:

jQuery UI datepicker not firing

Hey,

On this site: http://www.fitwoman.com/about-us/ - if you click the green box in the upper left "reserve your stay with us" - a form will dropdown and inside that box you will see a date field. I am trying to wire up the jQuery UI datepicker to that field and for some reason it wont fire.

- I have tried new JS files and the ones hosted on the CDN.
- Debugging and wiring it with the default settings only, no options
- I have forced it to run by firing it via the firebug console.
- If you view source you will see the DIV that should contain the calendar but it is empty (at the bottom of the source)
- Other code within this JS file runs ok
- I have tried removing all other code
- I am using jQuery not $ for noconflict

Any ideas on how I can fix this?

JS file: http://www.fitwoman.com/scripts/jquery-actions-main.js

Thanks!
0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 18
  • 12
  • 2
  • +1
1 Solution
 
plusone3055Commented:
0
 
catonthecouchproductionsAuthor Commented:
Any thoughts on debugging the other one? They are using other UI elements throughout the site. I would prefer not to use another version. I have used many instantces of the datepicker on other site with 0 issues. Just puzzled on this one.

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
dirknibleckCommented:
Hi,

If I read your code correctly (attached below), it seems that you are hiding the jQuery date picker widget, and only displaying it when someone clicks on a dom element called calIcon.

Why not see if it works if you temporarily replace all the code below with jQuery('#reservationDate').datepicker();

If this works, we know it's one of the other lines below, or something in your options.


jQuery('#reservationDate').datepicker({
		defaultDate: "+" + defaultDay + "d",
		dateFormat: 'MM d, yy',
		constrainInput: true,
		minDate: new Date(),
		beforeShowDay: function(date) {
			return [date.getDay() == 0, ""];
		}
	});
*/
	jQuery('input.hasDatepicker').datepicker();
	jQuery('#reservationDate').datepicker("widget").hide();
  	jQuery('#calIcon').click(function () {
 		jQuery('.hasDatepicker').datepicker("show");
 	});

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
Hi, i had that uncommented recently. I did try with the options which was the default, then a test run with the most basic sections.

Just odd how you can see the DIV it creates but its empty.

Ryan
0
 
catonthecouchproductionsAuthor Commented:
I updated the code a bit, if you click in to the datepicker you will get:

TypeError: inst is undefined
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js
Line 8560

Ryan
0
 
dirknibleckCommented:
Have you made sure that you're using the latest jQueryUI css file? I have trouble with the datepicker displaying before when I had a css file that was out of date for the .js I was using.

FWIW, I'm not having the div display when I click on the input. (I'm using Firefox on Mac)
0
 
catonthecouchproductionsAuthor Commented:
Ill try that again and be sure its the newest.

Sorry I meant the DIV is hidden and empty, if you view in Firebug, look at the bottom of the page.

Ryan
0
 
dirknibleckCommented:
Is that code change live? I don't get anything in the console right now.
0
 
catonthecouchproductionsAuthor Commented:
Try running this code via console: jQuery('#reservationDate').datepicker("show");
0
 
catonthecouchproductionsAuthor Commented:
CSS updated as well.
0
 
dirknibleckCommented:
Yes, I see the div now.
0
 
mrGreenCommented:
Hi,

Have you tried using .ready() on your jQuery function?

$(document).ready(function() {
 


});


regards
0
 
catonthecouchproductionsAuthor Commented:
green, other code works within that file. the other version is the same but shorthand.

Ryan
0
 
dirknibleckCommented:
Can you temporarily deactivate all datepicker code on the site? I tried turning #reservationDate into a dialog, and that worked, so clearly jqueryUI is working, we just need to figure out what datepicker's problem is.
0
 
catonthecouchproductionsAuthor Commented:
What did you get when you did that? You see the box running that code?
0
 
dirknibleckCommented:
I put this in the console:

jQuery("#reservationDate").dialog();

It just put the input into a dialog div and popped it up. I just wanted to test that jQueryUI in general was working ok.
0
 
catonthecouchproductionsAuthor Commented:
Ah i see what you're saying. The UI is working, but not the datepicker.
0
 
dirknibleckCommented:
Right. So if you can remove the date pickercode temporarily, I will play around with it.
0
 
catonthecouchproductionsAuthor Commented:
On it right now. Check in 2

Thank you
0
 
dirknibleckCommented:
Are you putting hasDatepicker as the class for the element in your HTML? If so, this is the problem as datepicker is trying to add it.
0
 
catonthecouchproductionsAuthor Commented:
Ah, yes I believe its there on DOM load. I will remove it and see
0
 
catonthecouchproductionsAuthor Commented:
That did it! thanks!
0
 
dirknibleckCommented:
Perfect.
0
 
catonthecouchproductionsAuthor Commented:
Now it seems that the selects dont change when you want to pick say 3 weeks, any ideas on that?

Ryan
0
 
catonthecouchproductionsAuthor Commented:
Dirk - any idea why the selects aren't changing now?
0
 
dirknibleckCommented:
Sorry, I haven't been online. It looks like none of your <option> elements have the value attribute.
0
 
catonthecouchproductionsAuthor Commented:
What's weird though is that in our code we do have the values.

  <td ><input type="text" name="datepicker" id="datepicker"></td>
            <td><select id="stay" name="stay" class="">
                  <option value="Please select...">Please select...</option>
                  <option value="1 Week">1 Week</option>
                  <option value="2 Weeks">2 Weeks</option>
                  <option value="3 Weeks">3 Weeks</option>
                  <option value="4 Weeks">4 Weeks</option>
                  <option value="5 Weeks">5 Weeks</option>
                  <option value="6 Weeks">6 Weeks</option>
                  <option value="7 Weeks">7 Weeks</option>
                  <option value="8 Weeks">8 Weeks</option>
                  <option value="9 Weeks">9 Weeks</option>
                  <option value="10 Weeks">10 Weeks</option>
                  <option value="11 Weeks">11 Weeks</option>
                  <option value="12 Weeks">12 Weeks</option>
                </select>
0
 
catonthecouchproductionsAuthor Commented:
Hold on, think I found it.
0
 
catonthecouchproductionsAuthor Commented:
OK it's showing values not but still not selecting. Thoughts?
0
 
dirknibleckCommented:
I can't see any reason why it wouldn't work as is. Have you put it through an HTML validator?
0
 
catonthecouchproductionsAuthor Commented:
Yeah and nothing pops up alarming to me. Here's the full code to see if you see anything.
<div class="mainInnerPage">
          <div id="reservationWrapper">
            <div id="reservation">
              <div class="ie6Fixer">
                <h2 id="reserveHeader" onClick="javascript:reserveHeaderClick();">Reserve your stay with us</h2>
                <form id="reservationFormElement" method="post" action="http://ww5.aitsafe.com/cf/addmulti.cfm">
                  <input name="userid" value="7774745" type="hidden">
                  <input name="return" value="www.fitwoman.com/reservations.htm" type="hidden">
                  <input value="Reservation (Deposit)" name="product1" type="hidden">
                  <dl>
                    <dt>Number of Guests</dt>
                    <dd>
                      <div id="uniform-resNumGuests" class="selector"><span style="-moz-user-select: none;">1</span>
                        <select style="opacity: 0;" id="resNumGuests" name="qty1" class="reserve">
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                        </select>
                      </div>
                    </dd>
                    <dt>Session Start Date</dt>
                    <dd>
                      <input id="reservationDate" name="product1" value="" type="text">
                      <img id="calIcon" src="https://www.fitwoman.com/img/calicon.png" alt="Calendar" style="vertical-align:middle;display:inline" />
</dd>
                    <dt>Length of Stay</dt>
                    <dd>
                      <div id="uniform-resNumWeeks" class="selector"><span style="-moz-user-select: none;">1 Week</span>
                        <select style="opacity: 0;" id="resNumWeeks" name="product1" class="reserve">
                          <option value="Please select">Please select...</option>
                  <option value="1 Week">1 Week</option>
                  <option value="2 Weeks">2 Weeks</option>
                  <option value="3 Weeks">3 Weeks</option>
                  <option value="4 Weeks">4 Weeks</option>
                  <option value="5 Weeks">5 Weeks</option>
                  <option value="6 Weeks">6 Weeks</option>
                  <option value="7 Weeks">7 Weeks</option>
                  <option value="8 Weeks">8 Weeks</option>
                  <option value="9 Weeks">9 Weeks</option>
                  <option value="10 Weeks">10 Weeks</option>
                  <option value="11 Weeks">11 Weeks</option>
                  <option value="12 Weeks">12 Weeks</option>
                        </select>
                      </div>
                    </dd>
                    <dt>Accommodation Type</dt>
                    <dd>
                      <div id="uniform-resNumGuests" class="selector"><span style="-moz-user-select: none;">Single</span>
                        <select style="opacity: 0;" id="resNumGuests" name="product1" class="reserve">
                          <option value="Single Accommodation">Single</option>
                          <option value="Double Accommodation">Double</option>
                          <option value="Triple Accommodation">Triple</option>
                        </select>
                      </div>
                    </dd>
                  </dl>
                  <input name="price1" value="500.00" type="hidden">
                </form>
                <a id="makeReservationButton" href="#">Make Reservation</a> </div>
            </div>
          </div>
        </div>

Open in new window

0
 
dirknibleckCommented:
Ok, I copied all of your html and pasted into a new file to confirm it is not a javascript problem. It is not.

It turns out that your server-side code is outputting a span that sits on top of the select, and this span is not changing. The select is selecting the correct value.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 18
  • 12
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now