Pass json var value outside function

Question

I have two json variables needed to set a timepicker mintime and maxtime.

How can I pass the values?

Any help will be highly appreciated.

Thanks in advance.

This is the code:

var js_array_dias = <?php echo json_encode($dias_entrega);?>;
var dayValues = js_array_dias.map(function(item) {
  return item.fecha_entrega
});
var fecha_viable = null;
var horario_inicio = null;
var horario_fin = null;

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var fechas_entrega = jQuery.datepicker.formatDate('yy-mm-dd', date);
      return [dayValues.indexOf(fechas_entrega) != -1]
    },
    onSelect: function(fecha_entrega) {
      $.ajax({
        type: 'POST',
        url: 'seleccion_hora.php',
        data: {
          date: fecha_entrega
        },
        success: function(resp) {
          if (false !== resp) {
            var viable_json = resp.substr(10);
            var viable = JSON.parse(viable_json);
            fecha_viable = viable.fecha;
            horario_inicio = viable.hora_inicio;
            horario_fin = viable.hora_fin;

          }
        }
      });
    }
  });
});
//Time
$('#timepicker').timepicker({
  'minTime': '2:00pm',
  'maxTime': '11:30pm',
  'showDuration': false
});

If the variables you need are in the `success` callback of the `$.ajax`, then move your timepicker script in there as well. Or read this: [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Tyler Roper, May 29 '18 at 21:08
Hi, Barmar. I tried, no errors, but timepicker does not trigger. — mikemc, May 29 '18 at 21:15
Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, May 29 '18 at 21:29

score 0 · Answer 1 · edited May 29 '18 at 21:18

0

Update the timepicker in the success function.

success: function(resp) {
  if (false !== resp) {
    var viable_json = resp.substr(10);
    var viable = JSON.parse(viable_json);
    $("#timepicker").timepicker("options", {
      minTime: viable.hora_inicio,
      maxTime: viable.hora_fin
    });
  }
}

edited May 29 '18 at 21:18

johnny 5

19,893
50
121
195

answered May 29 '18 at 21:11

Barmar

741,623
53
500
612

Thank you Barmar, now it triggers, but only with the first date selected, when another date is selected doesn´t change the timepicker. Maybe a .change needed on datepicker? – mikemc May 29 '18 at 21:37
That shouldn't be needed, `onSelect` happens every time you select something from the datepicker. – Barmar May 29 '18 at 21:38
What could I use, some kind of "refresh" the timepicker? – mikemc May 29 '18 at 21:52
I'm assuming the timepicker API is similar to jQuery UI Datepicker, where the `options` method refreshes it. Maybe that isn't how it works? But then it wouldn't work the first time, either. – Barmar May 30 '18 at 05:05
I found it. On the first line of `onSelect:function(fecha_entrega) {$("#timepicker").timepicker('remove'); ..... }` did the trick. So the point was remove the timepicker each time the datepicker is selected. Thank you very much for your help, Barmar :) – mikemc May 30 '18 at 07:05

score 0 · Answer 2 · answered Jun 01 '18 at 23:06

I leave the code as a solution:

var js_array_dias = <?php echo json_encode($dias_entrega);?>;
var dayValues = js_array_dias.map(function(item){
                return item.fecha_entrega
                                       });
$(function(){
    $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function (date) {
              var fechas_entrega = jQuery.datepicker.formatDate('yy-mm-dd', date);
             return [ dayValues.indexOf(fechas_entrega) != -1 ]},
    onSelect: function(fecha_entrega) {
        $("#timepicker").timepicker('remove');
        $("input[name='fecha_entrega']").val(fecha_entrega);
        $.ajax({
            type: 'POST',
            url: 'seleccion_hora.php',
            data: {date : fecha_entrega},
            success: function(resp) {
                if (false !== resp) {
                  var viable_json = resp.substr(10);
                  var viable = JSON.parse(viable_json);
                  $("#timepicker").timepicker({
                      minTime: viable.hora_inicio,
                      maxTime: viable.hora_fin
                  });
                }
            }
          })
        }
    });
});

Hope this helps someone else.

Pass json var value outside function

2 Answers2