Ad

Need Help On My JQuery Script

- 1 answer

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?

Ad

Answer

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");
    }
});
Ad
source: stackoverflow.com
Ad