Need help on my jQuery script

Question

I was able to make a dyanamic dropdown subcategory dependent on the selected category which you can see it here.

Now, my problem is that if the category has defined a selected value upon loading which is defined by a REQUEST, just like this (take note on the posted_parent_id request). How can I make a call on my subcategory file(get_child_categories.php?parent_id=6) if my jQuery is like this below:

$(document).ready(function($) {
  var list_target_id = 'list_target'; //first select list ID
  var list_select_id = 'list_select'; //second select list ID
  var initial_target_html = '<option value="">Please select a subcategory...</option>'; //Initial prompt for target select

  $('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option

  $('#'+list_select_id).change(function(e) {
    //Grab the chosen value on first select list change
    var selectvalue = $(this).val();

    //Display 'loading' status in the target select list
    $('#'+list_target_id).html('<option value="">Loading...</option>');

    if (selectvalue == "") {
        //Display initial prompt in target select if blank value selected
       $('#'+list_target_id).html(initial_target_html);
    } else {
      //Make AJAX request, using the selected value as the GET
      $.ajax({url: 'get_child_categories.php?parent_id='+selectvalue,
             success: function(output) {
                //alert(output);
                $('#'+list_target_id).html(output);
            },
          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});
        }
    });
});

Does my question is quite clear? I am still learning this kind of stuff right now. There's something to be defined somewhere within the if (selectvalue == "") statement in case the category dropdown was pre-selected upon loading the page?

Answer 1

Simplest way is to trigger the change event manually once the DOM has been loaded.

// Assuming that -1 is the default selected value
var selectvalue = $('#'+list_select_id).val();
if(selectvalue != "-1")
{
    $('#'+list_select_id).trigger("change");
}

Append the code to the end of the $(document).ready(function(){ ... })

So, your code becomes the following

$(document).ready(function($) {
  var list_target_id = 'list_target'; //first select list ID
  var list_select_id = 'list_select'; //second select list ID
  var initial_target_html = '<option value="">Please select a subcategory...</option>'; //Initial prompt for target select

  $('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option

  $('#'+list_select_id).change(function(e) {
         //  ... your logic here

    });

    // Check if value is prefilled. 
    var selectvalue = $('#'+list_select_id).val();
    // Assuming that -1 is the default value
    if(selectvalue != "-1")
    {
        $('#'+list_select_id).trigger("change");
    }
});

Answer 2

The first thing that you have to do is to move that AJAX functionality out of the .change event.

Change event fires only when the dwopdown value is changed and if the dropdown renders with a value as selected one, it wont be handled by change event.

Make it as a separate function and call that on page load and on .change event.

** NOT A COMPLETE CODE **

$(function(){
    var dropdown = $('#'+list_select_id);
    if (dropdown.val() !== "") {
        initiateAJAX(dropdown.val());
    }
    dropdown.change(function() {
        initiateAJAX(this.value);
    }); 

    function initiateAJAX(param) {
    }
});