CODEWITHSUNDEEP
phpjqueryajax
user3006683
user3006683

Reputation: 783

two ajax request from one page

Simply I would like to load data from two php page using jquery. I put the below code together, however only the one works not both. Any ideas?

  $(document).ready(function() {
        loadData();
    });

    var loadData = function() {
        $.ajax({    
            type: "GET",
            url: "second.php",             
            dataType: "html",                   
            success: function(response){                    
                $(".hm_m_un").html(response);
                setTimeout(loadData, 1000); 
            }

        });
    };
    $(document).ready(function() {
        loadData();
    });

    var loadData = function() {
        $.ajax({    
            type: "GET",
            url: "test.php",             
            dataType: "html",                   
            success: function(response){                    
                $(".rx").html(response);
                setTimeout(loadData, 1000); 
            }

        });
    };

Upvotes: 3

Views: 10718

Answers (3)

Machavity
Machavity

Reputation: 31644

You've named them all the same. Try some consolidation

$(document).ready(function() {
    window.setInterval(function() { loadData('second.php', $('.hm_m_un')); }, 1000);
    window.setInterval(function() { loadData('test.php', $(".rx")); }, 1000);
});

var loadData = function(page, ele) {
    $.ajax({    
        type: "GET",
        url: page,             
        dataType: "html",                   
        success: function(response){                    
            ele.html(response); 
        }

    });
};

Upvotes: 3

James Lai
James Lai

Reputation: 2071

You're overriding your first loadData variable with the second one. Give it a different name and you'll be fine.

As a note, you don't need to call $(document).ready() twice, you can technically call it once. I would write this as something like:

function descriptiveFunctionName() {
    $.ajax({    
        type: "GET",
        url: "second.php",             
        dataType: "html",                   
        success: function(response){                    
            $(".hm_m_un").html(response);
            setTimeout(loadData, 1000); 
        }
    });
}

function anotherDescriptiveFunctionName() {
    $.ajax({    
        type: "GET",
        url: "test.php",             
        dataType: "html",                   
        success: function(response){                    
            $(".rx").html(response);
            setTimeout(loadData, 1000); 
        }
    });
}

$(document).ready(function() {
    descriptiveFunctionName();
    anotherDescriptiveFunctionName();
});

Please note though this was a very lazy answer, user Machavity's code is much better for reuse, although you may want to just use a callback sent to loadData for more flexibility in the future.

Upvotes: 4

charlietfl
charlietfl

Reputation: 171700

Very simple....you declared a variable loadData and assigned it to a function.

You then used same variable to assign to another function, thereby wiping out first instance. Use different variable names

Upvotes: 1

Related Questions