Jquery Datepicker onselect call function

Question

This is a function I need to call when my JQuery date picker selects both to and from dates:

function showUser() {
    // Retrieve values from the selects
    var DateFrom = document.getElementById('DateFrom').value;
    var DateTo = document.getElementById('DateTo').value;


    if (dtd=="" || dtm == "" || dfd == "" || dfm == "") {
        document.getElementById("txtHint").innerHTML="";
        return;
    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","/StreetHailDrivers.php?DateFrom="+DateFrom+"&DateTo="+DateTo,true);
    xmlhttp.send();
}

and this is my datepicker:

  $(function() {
    $('.datepicker').datepicker({ onSelect: showUser(), minDate: -90, maxDate: "+1D" });
  });

If i take out the onSelect: showUser() The datepicker works fine, but doesnt post the data, but if i include the onselect the datepicker doesnt work. no drop down.

I also tried the onchange event in the html:

 <input type="text" class="datepicker"  name="DateTo" id="DateTo" onchange="showUser()" /> 

what should I do to get it working?

Solution

jsFiddle Demo

The main issue is that the function showUser is not defined in a scope available to the scope where the datepicker is assigned. The result is more than likely an error that you can see in your console: "Uncaught ReferenceError: showUser is not defined ". When the error is caused all of the script execution is halted and the datepicker is not constructed. You should make sure that the datepicker object has access to this function.

I believe it is expecting a pointer to a function for that parameter. As such it should probably be

onSelect: showUser

Using onSelect: showUser() will set the value of onSelect to the return value of showUser which is undefined.

Comments

[Mike]

this unfortunately doesn't work. I should have mentioned that i tried this also.

[Travis J]

@Mike - That was my first assumption, upon further inspection I believe that showUser is not available to the datepicker options object. Please see my edit.

[Mike]

you were correct, the function ShowUser wasn't defined within the available scope of datepicker. solved!