why this jquery code is not working?

Question

I am new in jquery . I don't know why this code is not working . I have 3 dropdown box. Depending on f_cat1 and f_cat2 , f_university_name will be fetched , as f_cat1 and f_cat2 can't be empty that's why i am checking if f_university_name is empty , trying to gathering data in it . or f_cat1 or f_cat2 is changed , also trying to do this operation.

Would you anyone please help me? Here is my code:

$(document).ready(function(){

     var cat1= $('#f_cat1').val();    // f_cat1,f_cat2 is the id of a dropdown box 
     var cat2= $('#f_cat2').val();

     $('#f_cat1').change(make_change);
     $('#f_cat2').change(make_change);

     var uni_name= $('#f_university_name').val();  
     if(uni_name=="")
     {
         make_change();
     }

});

function make_change()
{
    var post_url ="<?php echo $c_link.'get_university/';?>"+ cat1+'/'+cat2;
    //  alert(post_url);
    $.ajax({
        type: "POST",
        url: post_url,
        //  dataType : "JSON",
        success: function(unis) 
        {
           //  alert('hi');
           $('#f_university_name').empty();
           $.each(unis,function(university_id,university_name)
           {
              var opt = $('<option/>'); 
              opt.val(university_id);
              opt.text(university_name);

              $('#f_university_name').append(opt);
           });


     } //end success
  }); //end AJAX
}

After edit1 : Thanks to all for replying me , it has started to work . But the problem is i am unable to comment my reputation is low . I am new to stack overflow , i didn't know about rules . And i am unable to click anything.... how could i get rid of this?

Answer 1

There are no varianbles cat_1 and cat_2 in your function make_change , because they are local in $(document).ready(function () { ... }); . Move the defenition of make_change function into $(document).ready(function () { ... }); block, then you'll have access to them.

Answer 2

Place your variables outside the document.ready function. Means global access. Then you can use them whereever you want

Answer 3

The main problem you're going to have here is that you read the values of f_cat1 and f_cat2 when the page first loads, and never read them again:

$(document).ready(function(){

     var cat1= $('#f_cat1').val();    // f_cat1,f_cat2 is the id of a dropdown box 
     var cat2= $('#f_cat2').val();

     ....

This means that whatever the values of those 2 dropdowns were at the start, the variables cat1 and cat2 will never change.

The easiet way to fix this, is to read those variables every thim you call the function make_change :

function make_change()
{
    var cat1= $('#f_cat1').val();    
    var cat2= $('#f_cat2').val();
    var post_url ="<?php echo $c_link.'get_university/';?>"+ cat1+'/'+cat2;
    ....