writing ajax success data in a function without using id

Question

I have ajax code as follows which returns data correctly in format i required to be used ina jQuery timepicker function.

Ajax:

<script type="text/javascript">
  $('#consultdate').change(function() {
    consultdate = $('#consultdate').val();
    userid= '<?php echo $user_id;?>';
    cat = '<?php echo $category;?>';
    //alert(consultdate);
    var booked_dates;
    $.ajax({
      type: "POST",
      url: 'qry/date-time_qry.php',
      dataType : "text",
      data: {consultdate : consultdate, userid : userid, cat : cat },
      success: function(data)
       {
         alert(data);
         booked_dates = data;
       },
      error : function() {
         alert("error while loading data");
       }
     });
  });
</script>

The data is returned in format:

['12:30 PM','12:45 PM'],['07:30 AM','07:45 AM']

Which is to be used in a jQuery timepicker function ( disableTimeRanges ):

<script>
  $(document).ready(function(){
    $('input#consulttime').timepicker({
     'timeFormat': 'h:i A',
     'disableTextInput': true,
     'minTime': '<?php echo $consultation_start; ?>',
     'maxTime': '<?php echo $consultation_end; ?>',
     'disableTimeRanges': [
       ['8.30 AM', '8.45 AM'], 
       ['12:15 PM', '12:30 PM'] 
       //document.write= booked_dates; 
      ],
     'step': 15
   });
  });
</script>

The data is to be used for 'disableTimeRanges': which is currently hardcoded for testing.

I tried using document.write= booked_dates; without success. How can i insert the data values (booked_dates) in the disableTimeRanges without using id?

I am a newbie just learning the skills and hope you forgive me for any oversight on my part.

I tried

Answer 1

jQuery.ajax() success function returns results asynchronously. Call .timepicker() at success callback of $.ajax() to set disableTimeRanges property of .timepicker() instance. You can include logic within success function if .timepicker() is only required to be called once at #consultdate change event. It is not clear if input#consulttime is a dynamic created element, relevant to

without using id

portion of Question

success:function(data) {
  // if `data` should be set only once
  // if (!$('input#consulttime').data("set")) {
    $('input#consulttime')
  //  .data("set", true)
    .timepicker({ 'disableTimeRanges':data});
  // }
}

Answer 2

First, make sure your PHP is returning a valid JSON result to the Ajax call. Something like this:

[["8.30 AM", "8.45 AM"], ["12:15 PM", "12:30 PM"]]

You need the outer brackets to make it an array, and you need to use double quotes instead of single ones.

Then, call .timepicker() in the Ajax success function of to set the disableTimeRanges property. Use JSON.parse() function to convert the PHP JSON string into a JSON object:

success:function(data) {
    $('input#consulttime').timepicker({'disableTimeRanges':JSON.parse(data)});
  }
}

Note: This is based on guest271314's answer and you can refer to the discussion there for more details.

Answer 3

I think what @guest271314 means is this :

$('#consultdate').change(function() {
    consultdate = $('#consultdate').val();
    userid= '<?php echo $user_id;?>';
    cat = '<?php echo $category;?>';
    //alert(consultdate);
    var booked_dates;

    $.ajax({
        type: "POST",
        url: 'qry/date-time_qry.php',
        dataType : "text",
        data: { consultdate : consultdate, userid : userid, cat : cat },
        success: function(data) {


            $('input#consulttime').timepicker({
                'timeFormat': 'h:i A',
                'disableTextInput': true,
                'minTime': '<?php echo $consultation_start; ?>',
                'maxTime': '<?php echo $consultation_end; ?>',
                'disableTimeRanges': [
                    ['8.30 AM', '8.45 AM'], 
                    ['12:15 PM', '12:30 PM'],
                    data
                ],
                'step': 15
            });



        },
        error : function() {
            alert("error while loading data");
        }
    });
});