Michael Clarke
Michael Clarke

Reputation: 169

Jquery post function works, but fails when duplicated

I came on here a few days ago with a problem, they got it to work. However, when I go to duplicate it, it fails. Leaving me very confused.

Here is the jquery

function loadSubCats(value)
{
    $.post("load_sub_cats.php",{ "catid": value },
            function(data) {
        $('#sub_categories').html(data);
    });
}
function loadSubCatsB(value)
{
    $.post("load_sub_catsb.php",{ "catidb": value },
            function(data) {
        $('#sub_categoriesb').html(data);
    });
}

I have the form select fields (1 in the file, 1 in load_sub_cats.php)

  echo"<select name='cselect2' onChange='loadSubCatsb(this.value)'  class='e1'><option value='0'>Please Select Location</option>";

Now to explain the issue, when I select a value from the main select, the second select appears fine. BUT when i select form that it appears the third isn't appearing (or even being called). I have the jquery in the parent file along with both of the div's. I have tried including these in the subfiles but same issue. I just can't seem to call the third page.

Upvotes: 1

Views: 76

Answers (3)

Sean
Sean

Reputation: 12433

I believe that javascript user-defined functions are case-sensitive. You have -

function loadSubCatsB

but calling -

onChange='loadSubCatsb(this.value)'

Try changing to -

onChange='loadSubCatsB(this.value)'

Upvotes: 1

Echilon
Echilon

Reputation: 10264

Instead of onChange, try using jQuery's live functions. ie:

Instead of:

onChange='loadSubCatsb(this.value)

Use this in your $().ready or equivalent function:

$('.e1').on('change', function() {
    var newValue = $(this).val();
    loadSubCatsB(newVal);
});

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

Your php echo is incorrect formated!

Try this instead:

echo '<select name="cselect2" onChange="loadSubCatsb(this.value)"  class="e1"><option value="0">Please Select Location</option></select>';

Upvotes: 0

Related Questions