CODEWITHSUNDEEP
javascriptjquery
mySun
mySun

Reputation: 1696

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

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>

Upvotes: 2

Views: 128

Answers (2)

adeneo
adeneo

Reputation: 318252

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));
        });
    });
});

Upvotes: 1

user2226755
user2226755

Reputation: 13173

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();

Upvotes: 1

Related Questions