Variable shows in one function but no another Jquery

user_11470781 0
Viewed 47

I am passing PHP sessions to variables to use in Jquery code. Below, there are four areas where I invoke the console log. Console log numbers 1 and 3 reflect the value of the variables no problem. 2 and 4 do not. I needed #4 to have value so I can use the variables in conditions. I guess this could be a scope issue, but I don't see why. Looking for some guidance. 

<script type="text/javascript">

  // GET VARIABLES THROUGH PHP SESSSION
  customerType = '<?php echo $customerType; ?>';
  myClicks = '<?php echo $myClicks; ?>';
  email = '<?php echo $email; ?>';

  console.log('1 ' + email);
  console.log('1 ' + myClicks);
  console.log('1 ' + customerType);

  //SET NUMBER OF ROWS TO DISPLAY AT A TIME

  $(document).ready(function () {

    rowsPerPage = 5;

    // GETTING DATA FROM FUNCTION BELOW
    getData();

    $('#load-more').click(function () {

      console.log('2 ' + email);
      console.log('2 ' + myClicks);
      console.log('2 ' + customerType);

      $('#load-more').html('Loading...');
      var rowID = Number($('#row-id').val());
      var allCount = Number($('#count').val());
      rowID += rowsPerPage;
      if (rowID <= allCount) {
        $('#row-id').val(rowID);
        getData();
      } else {
        $('#load-more').html('End Of Data');
        //$('#load-more').html('');
      }
    });

    /* REQUEST DATA */
    function getData () {

      console.log('3 ' + email);
      console.log('3 ' + myClicks);
      console.log('3 ' + customerType);

      var rowID = $('#row-id').val();
      var allCount = $('#count').val();
      $.ajax({
        url: 'promotions/newest-load-button-data.php',
        type: 'post',
        data: {
          rowID: rowID,
          rowsPerPage: rowsPerPage
        },
        dataType: 'json',
        success: function (response) {
          setTimeout(function () {
            loadData(response);
            $('#load-more').html('Load More');
          }, 1000);
        }
      });
    }

    /* LOAD DATA TO PAGE */

    function loadData (data) {

      console.log('4 ' + email);
      console.log('4 ' + myClicks);
      console.log('4 ' + customerType);

      var dataCount = data.length;

      for (var i = 0; i < dataCount; i++) {
        if (i == 0) {
          var allCount = data[i]['allcount'];
          $('#count').val(allCount);
        } else {
          var promoID = data[i]['promoid'];
          var promoName = data[i]['promoname'];
          var promoRefNum = data[i]['promorefnum'];
          var promoType = data[i]['promotype'];
          var theBanner = data[i]['thebanner'];

// Here I will use conditions based on email, customerType, and myClicks

          if (promoType == 'Banner') {
            $('#load-container').append('<div class="row-center-center padding-top-5 padding-bottom-2"><div>' + promoName + '</div></div>');
            $('#load-container').append('<div><div class="wrap-content"><img class="mobile-banner-scale" id="visitor-banner-click" src=' + theBanner + '></div></div>');
          }

          if (promoType == 'Video Banner') {
            $('#load-container').append('<div class="row-center-center padding-top-5 padding-bottom-2"><div>' + promoName + '</div></div>');
            $('#load-container').append('<div><video class="mobile-video-size" id="visitor-banner-click" src=' + theBanner + ' autoplay muted loop></video></div>');
          }
        }

        $('#load-more').html('Load More');
      }
    }
  });
</script>
scope jquery javascript
3 Answers

As of jQuery 3.0 the recommended way to add a ready handler is the first method, $(fn). As noted in the Event section, the $(document).on("ready", fn) event form has slightly different semantics and was removed in jQuery 3.0.

This code snippet works using the recommended document ready handler.

    
        jQuery(function(){  //document.ready

            console.log('2 ' + email);
            console.log('2 ' + myClicks);
            console.log('2 ' + customerType);
            loadData('something');
        });

        customerType = 'test1';
        myClicks = 'test2';
        email = 'test3';

        function loadData (data) {
    
            console.log('4 ' + email);
            console.log('4 ' + myClicks);
            console.log('4 ' + customerType);
       }

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

user_7916000

It was definitely a scope issue. I found that if I called the function in the global, I could get the response I needed. But there was a data length error. I decided to call the value of the session on the php data page and include it in the JSON array to pass through ajax along with the other variables that are needed in the load. So it works now, different way. I appreciate everyone's take.

user_114707810 
// GET VARIABLES THROUGH PHP SESSSION
customerType = "where are customers";
myClicks = "element clicked";
email = "email sent";

console.log('1 ' + email);
console.log('1 ' + myClicks);
console.log('1 ' + customerType);

//SET NUMBER OF ROWS TO DISPLAY AT A TIME

$(document).ready(function() {

    rowsPerPage = 5;

    // GETTING DATA FROM FUNCTION BELOW
    getData();

    $("#load-more").click(function() {

        console.log('2 ' + email);
        console.log('2 ' + myClicks);
        console.log('2 ' + customerType);

        $('#load-more').html('Loading...');
        var rowID = Number($("#row-id").val());
        var allCount = Number($("#count").val());
        rowID += rowsPerPage;
        if (rowID <= allCount) {
            $("#row-id").val(rowID);
            getData();
        } else {
            $('#load-more').html('End Of Data');
            //$('#load-more').html('');
        }
    });

    /* REQUEST DATA */
    function getData() {
        console.log('3 ' + email);
        console.log('3 ' + myClicks);
        console.log('3 ' + customerType);

        loadData();
    }

    /* LOAD DATA TO PAGE */

    function loadData(data) {
        console.log('4 ' + email);
        console.log('4 ' + myClicks);
        console.log('4 ' + customerType);
    }
});

Everything seems to be fine, your variables email,myClicks,customerType are printing values in console, you need to check once again, I think the issue is something else, Please check once again.

user_86820620
Related