How to use variable in function after load PHP file in jQuery?

Question

How to use variable "hotel" after load step-02.php file?

    $(function () {
    var hotel = [];
    $('#forPrice').on('click', function() {
        $('select').each(function() {
            if($(this).val() > 0 && $(this).val() < 10) {
                var room = {};
                room["room"] = $(this).attr('room');
                room["price"] = $(this).attr('price');
                room["val"] = $(this).val();
                room["html"] = $(this).parents(".selectRowRoom").html();

                hotel.push(room);
            }
        });
        console.log(hotel);
    });

    $('#forPrice').click(function () {
        $('#Step-01').hide();
        $('#Step-02').show();
        $('.hiddenAndShow').hide();
        $( "#Step-02" ).load( 'step_02.php' );
    });
})

I need

room["html"] = $(this).parents(".selectRowRoom").html();

to show after loading step-02.php.

step-02.php:

<div class="thisRoom">
    // Insert room["html"] = $(this).parents(".selectRowRoom").html();
</div>

So are you trying to tell us .thisRoom is in step_02.php or what ? — adeneo
– adeneo, Commented Oct 8, 2016 at 18:35

adeneo · Accepted Answer · 2016-10-08 18:59:18Z

jQuery load() is a shortcut for $.ajax, which is asynchronous, you have to wait for the result to be able to access it.

Luckily load() has a callback that fires when the content is inserted and ready for accessing

$(function() {
    var hotel = [];
    $('#forPrice').on('click', function() {
        $('select').each(function() {
            if ($(this).val() > 0 && $(this).val() < 10) {
                var room = {};
                room["room"] = $(this).attr('room');
                room["price"] = $(this).attr('price');
                room["val"] = $(this).val();
                room["html"] = $(this).parents(".selectRowRoom").html();

                hotel.push(room);
            }
        });
        console.log(hotel);
    });

    $('#forPrice').click(function() {
        $('#Step-01').hide();
        $('#Step-02').show();
        $('.hiddenAndShow').hide();
        $("#Step-02").load('step_02.php', function() { // callback here
            $("#Step-02").find('.thisRoom').html(JSON.stringify(hotel));
        });
    });
});

user2226755 · Accepted Answer · 2016-10-08 18:25:56Z

Make hotel global and save key number of room in data attr. Like this :

$(function () {
    window.hotel = []; // new
    $('#forPrice').on('click', function() {
        $('select').each(function() {
            if($(this).val() > 0 && $(this).val() < 10) {
                var room = {};
                room["room"] = $(this).attr('room');
                room["price"] = $(this).attr('price');
                room["val"] = $(this).val();
                room["html"] = $(this).parents(".selectRowRoom").html();

                $(this).data("numRoom", hotel.length); // new
                hotel.push(room);
            }
        });
        console.log(hotel);
    });

    $('#forPrice').click(function () {
        $('#Step-01').hide();
        $('#Step-02').show();
        $('.hiddenAndShow').hide();
        $( "#Step-02" ).load( 'step_02' );
    });
})

//After :
hotel[$(this).data("numRoom")]["html"] = $(this).parents(".selectRowRoom").html();

Collectives™ on Stack Overflow

How to use variable in function after load PHP file in jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related