Ajax change variable automatically

Question

I got an issue here. I found out that the global variable got changed every time it got into ajax.

$(document).on("keyup input", ".product-id", function () {
  var id_prod = this.id.replace('prod_id_', '');

  console.log('id_prod (outside ajax): ', id_prod);

  var inputVal = $(this).val();
  var resultDropdown = $('#result2').css({
      "display": "block"
    });

  if (inputVal.length) {
    $.ajax({
      type: 'POST',
      data: {  term: inputVal },
      url: 'backend-search-inv.php',

      success: function (data) {
        resultDropdown.html(data);

        $(document).on("click", "#result2 p", function () {
          var inv_id = $(this).text();
          //console.log('inv_id: ',inv_id);

          $.ajax({
            type: 'POST',
            data: {
              term: inv_id
            },
            url: 'autocomplete_inv.php',
            success: function (response) {
              var inv_info = jQuery.parseJSON(response);

              console.log('id_prod (in ajax): ', id_prod);

            },
            error: function () {
              console.log('Unable to access database.');
            }
          });

        }); //end of result being clicked
      }
    });
  } 
  else {
    resultDropdown.empty();
  }
});

I don't get it why the variable id_prod gets incremented everytime when it goes into ajax. Here is the screenshot of the console.log.

console.log

Referring to the screenshot, everytime I want to enter something to the id_prod = 2, the ajax always ended up updating the id_prod = 1, and then id_prod = 2 again automatically, and result in duplication of my data.

Can someone help me on this?

pull the click event outside the keyup input event and set var id_prod = 0 before the two event and inside the events use id_prod without var — Mohamed-Yousef
– Mohamed-Yousef, Commented Feb 22, 2019 at 5:24
BRO!!! THANK YOU!! IT WORKSSSSS!! I CAN'T STOP THANKS YOU MAN! — Crazy Fox
– Crazy Fox, Commented Feb 22, 2019 at 7:07
You're totally welcome .. +1 to your answer :-) .. Have a great day :-) — Mohamed-Yousef
– Mohamed-Yousef, Commented Feb 22, 2019 at 16:06

Crazy Fox · Accepted Answer · 2019-02-22 07:16:26Z

So basically I just declare the id_prod as a global variable and assigned 0 as it's default value. Then, for id_prod is basically assigned to new value once it's in the keyup input event.

Thanks to Mohamed Yousef for his answer in my own question's comment section!

    //DECLARE id_prod as a global variable...
var id_prod = 0;

$(document).on("keyup input", ".product-id", function(){

    id_prod = this.id.replace('prod_id_', '');
    var inputVal = $(this).val();
    var resultDropdown = $('#result2').css({"display":"block"});

    if(inputVal.length){
         $.ajax({
            type: 'POST',
            data: {term:inputVal},
            url: 'backend-search-inv.php',
            success: function(data){
                resultDropdown.html(data);
            }
        });
    }
    else{
        resultDropdown.empty();
    }
});

// WHEN RESULT BEING CLICKED...
$(document).on("click", "#result2 p", function(){
    var inv_id = $(this).text();

    $.ajax({
        type: 'POST',
        data: {term:inv_id},
        url: 'autocomplete_inv.php',
        success: function (response) {
            var inv_info = jQuery.parseJSON(response);

            console.log('id_prod (in ajax): ',id_prod);

            $('#prod_id_'+id_prod).val(inv_info[0]);
            $('#prod_qty_'+id_prod).val(1);
            $('#prod_disct_'+id_prod).val(0);
            $('#prod_type_'+id_prod).val(inv_info[1]);
            $('#prod_colour_'+id_prod).val(inv_info[2]);
            $('#prod_price_'+id_prod).val(inv_info[3]);

            $('#result2').empty();

            sumPrice();
        },
        error: function(){
            console.log('Unable to access database.');
        }
    });});

Collectives™ on Stack Overflow

Ajax change variable automatically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related