document.ready() just running one function instead of two

Question

I'm trying to run two js functions(i'm using jquery) in the document.ready(), but only runs one. Here is my code:

    $(document).ready(function() {
    show_properties();
    table_events();
 });

the functions are written in the same js file, but only show_properties() is loaded when the website loads. I tested in the firebug console to write

table_events()

and the console tells me "undefined", but after that the function gets loaded and the ajax calls and everything inside that function starts to work.

Why is that? How can I fix this behavior?

thanks.

Here are the functions I want to run:

    function table_events(){
 $.ajaxSetup ({  
         cache: false  
     });  

 var wait = "<img src='../images/loading_red_transparent.gif' alt='loading...' style='display:block;margin-left:auto;margin-right:auto;'/>";    

    $('.apartamentos tr').on('click', function() {
            alert("hola.")
               var id_propiedad = $(this).find(".id_propiedad").html();   
           var nombre_propiedad = $(this).find(".nombre_propiedad").html(); 
       //$('#property_information').hide('slow');

       $("#property_information")
       .html(wait)
       .load('properties_info.php',{'nombre_propiedad':nombre_propiedad,'id_propiedad':id_propiedad});
       //$('#property_information').show('slow');

        }); 


 }


 function show_properties(){
 $.ajaxSetup ({  
         cache: false  
     }); 
 var wait = "<img src='../images/loading_red_transparent.gif' alt='loading...' style='display:block;margin-left:auto;margin-right:auto;'/>";

     $('#busca_propiedades').on('click',function(){

         var user_id = $('#user_list').val();

         /*var data = $.ajax({
              url: "properties_list.php",
              type: 'POST',
              data:{ 'user_id': user_id },
              cache: false,
              async: false
             }).responseText;

         });*/

         $('#lista_aptos')
         .html(wait)
         .load('properties_list.php',{'user_id':user_id});

        //alert(data);
         });

 }

EDIT: after some debugging with console.log , i found out that this code is the one that's not executing when the webpage loads:

$('.apartamentos tr').on('click', function() {
            alert("hola.")
               var id_propiedad = $(this).find(".id_propiedad").html();   
           var nombre_propiedad = $(this).find(".nombre_propiedad").html(); 
       //$('#property_information').hide('slow');

       $("#property_information")
       .html(wait)
       .load('properties_info.php',{'nombre_propiedad':nombre_propiedad,'id_propiedad':id_propiedad});
       //$('#property_information').show('slow');

        }); 

apparently, this function() is the one that doesn't run when the webpage loads; but when I write again in the console

table_events()

THEN the code inside this function runs when I click in the tr of the table.

Answer 1

Are $('.apartamentos tr') elements loaded with the load call in show_properties ?

If yes then the problem is due to the fact that when table_events is executed, tr elements are not yet inserted in the #lista_aptos (cause load uses ajax, that's asynchronous).

To check please add

console.log("trs count: ", $('.apartamentos tr').size());

on top of your table_events function.

To fix you should pass table_events as completetion handler to load call:

$('#lista_aptos')
         .html(wait)
         .load('properties_list.php',{'user_id':user_id}, table_events);

---

Old response

You said "...after that the function gets loaded and the ajax calls..."

Keep in mind that ajax calls are asynchronous.

If you define the table_events function inside the ajax response handler, also if you do something to put it in a scope visible from the referencing function, the attempt to call table_events may occur before the table_events definition.

or, as Raghavan says, there's an error thrown from show_properties that prevents the execution of table_events. But better if you try to debug with console.log("text") instead of alert (alert is blocking and it will hide you problems from asynchronous calls)

please, try to make a example on http://jsfiddle.net/

Answer 2

If the console returns "undefined" that means the function exists, but it's returning undefined as a result.

Your function needs fixing, $(document).ready() is probably fine.

Try calling table_events() at the last line in show_properties() and see if that works.

Answer 3

A few things to check:

Does table_events exist in the scope of $(document).ready?

Is show_properties possibly raising an error?

This may be a good case for "alert debugging":

$(document).ready(function() {
    show_properties();
    // You might also put an alert at the very end of show_properties.
    alert('show_properties called; now calling table_events()');
    table_events();
    alert('table_events called; document.ready done');
});

Answer 4

There is probably an error in the table_events function. Try debugging using simple alert statements.