Set AJAX response as javascript variable for reuse

Question

EDIT : found the solution, i edited the code so if anyone came to the same problem in a near future can copy my code.

I need to set AJAX response as variable so i can use it on next js script. how can i set AJAX response to variable? i don't really good at javascript so it might be just typo or something. this is my code

<script type="text/javascript">
var delivery; // declare of variable to make it "global"
$(document).ready(function() {
    $("#jumlah").bind("input change paste keyup", function() {
        var qty = $(this).val();
        $.ajax({
                type: 'POST',
                url: '../component/quantity.php',
                data: {
                jumlah: qty,
                id:<?php echo $hasil['id']; ?>
                },
                success: function (response) {
                // We get the element having id of display_info and put the response inside it
                delivery = parseFloat(response); // remove the "var" here so you take the cur variable and don't set a new one in the scope of this function.
                }
        });
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
        $("select").change(function() {
            var total = delivery;
            $('select option:selected').each(function() {
                total += parseFloat($(this).data('price'));
            });
            var updatePrice = document.getElementById('jumlah').value;
            var grandTotal = total * updatePrice;
            $(".total").val(grandTotal);
            $(".total").html(grandTotal.toLocaleString());
        });
        $("#jumlah").bind("input change paste keyup", function() {
            var total = delivery;
            $('select option:selected').each(function() {
            total += parseFloat($(this).data('price'));
              });
              var updatePrice = $(this).val();
            var grandTotal = total * updatePrice;
            $(".total").val(grandTotal);
            $(".total").html(grandTotal.toLocaleString());
        });

});
</script>

Insomnia88 · Accepted Answer · 2019-08-07T10:10:11.047

What you are looking for are scopes. Depending on how and where you set a variable the scope changes. In your case you want one that is accessable globally so you should place it at the top. You just need to declare it, you don't need to assign any value.

<script type="text/javascript">
var delivery; // declare of variable to make it "global"
$(document).ready(function() {
    $("#jumlah").bind("input change paste keyup", function() {
        var qty = $(this).val();
        $.ajax({
                type: 'POST',
                url: '../component/quantity.php',
                data: {
                jumlah: qty,
                id:1
                },
                success: function (response) {
                // We get the element having id of display_info and put the response inside it
                delivery = parseFloat(response); // remove the "var" here so you take the cur variable and don't set a new one in the scope of this function.
                }
        });
    });
});
</script>

2nd part

<script type="text/javascript">
$(document).ready(function() {
        $("select").change(function() {
            var total = delivery;
            $('select option:selected').each(function() {
                total += parseFloat($(this).data('price'));
            });
            var updatePrice = document.getElementById('jumlah').value;
            var grandTotal = total * updatePrice;
            $(".total").val(grandTotal);
            $(".total").html(grandTotal.toLocaleString());
        });
        $("#jumlah").bind("input change paste keyup", function() {
            var total = delivery;
            $('select option:selected').each(function() {
            total += parseFloat($(this).data('price'));
              });
              var updatePrice = $(this).val();
            var grandTotal = total * updatePrice;
            $(".total").val(grandTotal);
            $(".total").html(grandTotal.toLocaleString());
        });

});
</script>

Edit: Fixed the code. The variable has to be outside of a function.

almost working, but for some reason it doesn't return right value. i expected value "15.000" when i set "1" on #jumlah input. somehow it returns "1.500.000". i have no ideas why its turn like this. can you help me out? — Raden Octavian, Aug 07 '19 at 08:17
I edited my answer because I misplaced the variable. But what you describe sounds like a formating error. Is the value correct when you log it right after it's filled? — Insomnia88, Aug 07 '19 at 08:40
already tested the "delivery" value by echoed it on div. the value is right. the problem seems like on 2nd part of the script. but i already tested the second script before, and it worked just fine. — Raden Octavian, Aug 07 '19 at 09:22
I havn't changed anything in the 2nd part. But I guess it could be that total/delivery is a string. Just try delivery = parseFloat(response). I edit my answer. — Insomnia88, Aug 07 '19 at 10:09
it's working! thanks a lot. now i can move on after a few weeks. — Raden Octavian, Aug 07 '19 at 10:24

score 1 · Answer 2 · answered Aug 07 '19 at 07:35

The window object represents an open window in a browser.

window is a object and you can add any property to window.

success: function (response) {
    window.deliveryResponse = response;
}

So you can use this response in any other js file.

other.js

(window.deliveryResponse) && console.log(window.deliveryResponse)

score 0 · Answer 3 · answered Aug 07 '19 at 07:32

0

As ajax calls are async, you cannot be sure that the delivery variable will be undefined or not. In your case, this cannot work also because the variable is defined in the callback scope. To ensure that the delivery response is defined, create a function like this:

function onDelivery(delivery) {
   ....(rest of second script)
}

Pass this function to the success and use delivery as it is.

answered Aug 07 '19 at 07:32

Marian Tarlungeanu

313
1
12

hey, can you explain with more example? i dont really know javascript. but i think your solution can solve my problem – Raden Octavian Aug 07 '19 at 09:28

score 0 · Answer 4 · answered Aug 07 '19 at 07:35

Try this:-

<script type="text/javascript">
    var delivery; // make your variable delivery as global so you can use it where you want.
    $(document).ready(function() {
        //you can use it here or anywhere in script you want to re-use it.
        //put your code as per your functionality.
    });
    </script>

Set AJAX response as javascript variable for reuse

4 Answers4