Problem in using JQuery for body load event

Question

Hi there, I am using jquery(newbie for jquery) in my application. In short what I am doing: I have a home page, where user enters his name and gets results on the same page. So I wrote two functions in home.php , one for body load event another for getting user's result. I have "get_home_info.php" which will load on body's load event and get_info.php on button click event which will overwrite "get_home_info.php" and give user search results(i.e get_info.php). These functions are as follows:

 $(document).ready(function(){        
            $('body').load($.get('/get_home_info.php', function(data){
            $('#get_data').html(data);
      })); 
    });

And another one for getting user result:

$(document).ready(function(){
    $("#btn_submit").bind('click', function(){
        if($('#tnm').val() != '' && $('#tnm').val() != 'Enter a twitter username to know its Honest Followers!'){

        $('#loadimg').html('<img src="images/images/ajax-loader.gif">');
            $('#loadimg').show();       
            $.get('/get_info.php?tnm='+$('#tnm').val(), '', function(data){
                $('#get_data').html(data);
                 $('#loadimg').hide();  
            });
        }
    });
});

Note: There are div tags in below code properly in body. Now my problem is that, I am not able to execute these two functions simultaneously, i.e when I comment bodyload function, and enter user name I get result, and uncommenting body and trying username simply shows search result.

My question are :

1. can I write two function and execute these two functions at a time.
2. How can I give effects like on button's click event first page should disappear so that I can show loading image and after that result.

Can somebody help here please? thank you in advance.

Answer 1

you should place those two functions in 1 $(document).ready(function(){}); and you can elemenate $('body').load() function because the .load() function is already an ajax call to a static html element.

$(document).ready(function(){

    $.get('/get_home_info.php', function(data){ $('#get_data').html(data); });

    $("#btn_submit").bind('click', function(){
        if($('#tnm').val() != '' && $('#tnm').val() != 'Enter a twitter username to know its Honest Followers!'){

        $('#loadimg').html('<img src="images/images/ajax-loader.gif">');
            $('#loadimg').show();       
            $.get('/get_info.php?tnm='+$('#tnm').val(), '', function(data){
                $('#get_data').html(data);
                 $('#loadimg').hide();  
            });
        }
    });
});

you can get more definitions in the .load() funtion in here

and $.get() in here

Answer 2

Try one $(document).ready block, so:

 $(document).ready(function(){ 
  $('body').load($.get('/get_home_info.php', function(data){
            $('#get_data').html(data);
  });
  $("#btn_submit").bind('click', function(){
        if($('#tnm').val() != '' && $('#tnm').val() != 'Enter a twitter username to know its Honest Followers!'){

        $('#loadimg').html('<img src="images/images/ajax-loader.gif">');
            $('#loadimg').show();       
            $.get('/get_info.php?tnm='+$('#tnm').val(), '', function(data){
                $('#get_data').html(data);
                 $('#loadimg').hide();  
            });
        }
    });
});