2

I have this code in view blade using JQuery to pass variables received from JSON:

view

< script type = "text/javascript" >
  var holidayDays = [];
var weekendInclusives;
var holidayInclusives;
$(document).ready(function() {
  $(document).on('change', '#leave_type', function() {
    var air_id = $(this).val();

    var a = $(this).parent();
    $('#weekendinclusive').val('');
    $('#holidayinclusive').val('');
    $('#leave_days').val('');
    $('#resumption_date').val('');
    // console.log("Its Change !");

    var op = "";

    $.ajax({
      type: 'get',
      url: '{{ route('
      get.leavecounts.all ') }}',
      data: {
        'id': air_id
      },
      dataType: 'json', //return data will be json
      // console.log("Its Change !");
      success: function(data) {
        $('#authorized_leave_days').val(data.authorizedleavedays);
        $('#available_leave_daysx').val(data.availableleavedays);
        $('#weekendinclusive').val(data.weekendinclusive);
        $('#holidayinclusive').val(data.holidayinclusive);
        holidayDays = data.nationalholidays;
        weekendInclusives = parseInt($("#weekendinclusive").val());
        holidayInclusives = parseInt($("#holidayinclusive").val());
      },
      error: function() {

      }
    });
  });
}); <
/script>
<input type="hidden" id="weekendinclusive" class="form-control" value="0">
<input type="hidden" id="holidayinclusive" class="form-control" value="0">

I want to pass the values of weekendInclusives and holidayInclusives to the if statement in the function below, but I found out that it's not being implemented:

< script type = "text/javascript" >
  $(document).ready(function() {
    function disabledays(date) {
      var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      //if u have to disable a list of day
      var removeDays = holidayDays;
      if ($.inArray(ymd, removeDays) >= 0) {
        return [false];
      } else {
        //Show accept sundays
        var day = date.getDay();
        return [(day == 1 || day == 2 || day == 3 || day == 4 || day == 5)];
      }
    }

    function noWeekendsAndHolidays(date) {
      var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      //if u have to disable a list of day
      var removeDays = holidayDays;
      if ($.inArray(ymd, removeDays) >= 0) {
        return [false];
      } else {
        //Show accept sundays
        var day = date.getDay();
        return [(day == 1 || day == 2 || day == 3 || day == 4 || day == 5)];
      }
    }

    function noHolidays(date) {
      var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      //if u have to disable a list of day
      var removeDays = holidayDays;
      if ($.inArray(ymd, removeDays) >= 0) {
        return [false];
      }
    }

    let dateOpts = {
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      minDate: 1,
      setDate: new Date(),
      yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
    };

    if (weekendInclusives == 0 && holidayInclusives == 0) {
      dateOpts.beforeShowDay = noWeekendsAndHolidays;
    } else if (weekendInclusives == 0 && holidayInclusives == 1) {
      dateOpts.beforeShowDay = noHolidays;
    } else if (weekendInclusives == 1 && holidayInclusives == 0) {
      dateOpts.beforeShowDay = $.datepicker.noWeekends;
    }

    $('.commencement_date').datepicker(dateOpts).datepicker('setDate', '1');
  }); <
/script>

How do I achieve this and ensure that it is being implemented?

Thanks

user11352561
  • 2,277
  • 12
  • 51
  • 102
  • 1
    Those variables are being set to `''` at the beginning of the change event function. If that function is being called first, then that could be the reason. – sbgib Nov 11 '20 at 08:06
  • @sbgib - No. They are not being set to ' ' – user11352561 Nov 11 '20 at 08:15
  • 1
    Keep in mind that ajax is *asynchronous*, meaning by the time your global variables are being set, the code that tries to use it may have already ran. A better solution, avoiding globals altogether would be to wrap that if statement in another function and injecting the 2 values into that function. Then call it from within your success callback. – Lapskaus Nov 11 '20 at 08:20
  • The functions in the second code block are inaccessible from the first one because you've placed them in the scope of a document.ready handler. Move the functions outside so they are in scope of both locations, then simply call them from within the AJAX `success` handler. – Rory McCrossan Nov 11 '20 at 08:22
  • @Lapskaus - How do I achieve this? – user11352561 Nov 11 '20 at 08:22
  • @RoryMcCrossan - What do I do to resolve this? – user11352561 Nov 11 '20 at 08:25
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – freedomn-m Nov 11 '20 at 08:43
  • `if (weekendInclusives == 0` is being run *before* the async callback runs. How do you fix it? Run it after - ie put in a funtion and call it from your `success:` - or don't use ajax. – freedomn-m Nov 11 '20 at 08:46
  • Your logic doesn't make much sense as you only check `weekendInclusives`/`holidayInclusives` **once (at startup)**, but you change the values whenever your `#leave_type` changes. You need to change the date picker options every time you change `#leave_type` – freedomn-m Nov 11 '20 at 08:48
  • @freedomn-m : How do I change the date picker options every time I change #leave_type – user11352561 Nov 11 '20 at 08:49
  • By calling the `if`s from your `success:` callback (or putting them in there if you prefer) – freedomn-m Nov 11 '20 at 09:08
  • @freedomn-m: The if s take dateOpts.beforeShowDay from the datepicker . More so, are from another function. – user11352561 Nov 11 '20 at 09:12
  • See the link I provided. – freedomn-m Nov 11 '20 at 09:35
  • @freedomn-m: Which link? – user11352561 Nov 11 '20 at 09:40
  • Maybe re-read the comments? – freedomn-m Nov 11 '20 at 09:41
  • @freedomn-m: From my code, I already set it in the success of the ajax: weekendInclusives = parseInt($("#weekendinclusive").val()); holidayInclusives = parseInt($("#holidayinclusive").val()); #weekendinclusive and #holidayinclusive are hidden inputs. I don't just know what's going on – user11352561 Nov 11 '20 at 09:52
  • You code does this, in this order : 1) start an ajax call 2) [attempt to] use the values of weekendInclusives 3) get the result of the ajax call and set weekendInclusives. Add a (different) console.log in front of every line or use debugger step-through so you can familiarise yourself with what's actually happening. – freedomn-m Nov 11 '20 at 10:01
  • @freedomn-m: I am stuck in between. Don't even know what to do again. I've been on it for 2 days now. Is there a way you can help me out? – user11352561 Nov 11 '20 at 10:10

0 Answers0