jquerymobile datebox - How to call a function when

Question

I have inherited some code using the jquerymobile datebox. The code so far concentrates on making the application look correct. I need to make it work so that when a date is selected, the server is called with the date and a new page loaded. Most examples just change the date in the page.

The code so far is :-

$('#daycal').live('click', function() {
  $('#catchdate').datebox('open');
});

$( "#catchdate" ).bind( "change", function(event, ui) {
  $("#test1").val("xyz");
});

And

<div data-role="fieldcontain">
  <label for="catchdate">Some Date</label>
  <input name="catchdate" type="date" data-role="datebox" id="catchdate" data-options='{"mode":"calbox", "useNewStyle":true, "theme":true, "themeHeader":"f", "themeDateHigh":"f", "themeDatePick":"e", "themeDate":"f", "centerHoriz":true}' />
  <input id="test1" type="text"/> <!-- Later changed to a function call -->
</div>

In my simple test I expected the text in the input to change when a date was selected.

I have seen an example using the bind to change event, but I cannot get it to work. In the example I was just changing the value in an input element, later this will be changed to a function call.

I also saw somewhere in my search for an answer, a comment that 'live' was deprecated.

Finally, I thought I could use closeCallback ('Callbacks ('openCallback' and 'closeCallback') are simple to work with...') but could not find any examples of how it should be used.

What changes do I need to make to obtain the functionality I need?

Answer 1

You could try using the close function of the date box, so that when user changes the date selection he makes and closes the date box you can call the server method with the selected date:

$('#DateSelectorId').bind('datebox', function (e, passed) { 
    if ( passed.method === 'close' ) {  
        // selected date
        var date = $('#DateSelectorId').val();          
        // make your service method and change page to another page
    }
});

Answer 2

think this can fix it

$('#catchdate').on('datebox', function(e, p) {
   if ( p.method === 'close' ) {
       alert('DO SOMETHING');
   }
});

u can go and test it on Fiddle

**i think u need some validation check for input box empty or not