尝试执行ajax调用时，TypeError：elem.nodeName未定义

Question

Good morning everyone.

I know this may have been asked before, but I'm finding it difficult to get a solution specific to my circumstances so I thought I'd ask here.

I am working on a site which has an account section for customers to add Pets to their inventory. The form itself has a "species" drop down which in turn triggers a change event on the "breeds" drop down in order to populate it with breed specific to the chosen species.

However, in the event of the user submitting the form prematurely without having selected a breed, an error will show but the breeds drop down is now un-populated as the trigger is on the change of the species drop down. So, to fix this I added a clause in the javascript to detect whether the species drop down has a value on load which in turn will trigger the function that populates the breed box. However, I get the error above when the page is reloaded and the box is not populated.

Here is the jQuery:

jQuery('#species').change(function () {
    var species_id = $(this).val();
    loadBreeds(species_id);
});

if (jQuery('#species').val() != "") {
    var species_id = $(this).val();
    loadBreeds(species_id);
}

function loadBreeds(species_id) {
    console.log('loadBreeds is running');
    jQuery.ajax({
        url: "http://dev.mediaorb.co.uk/hiltonherbs.com/index.php?route=account/breeds",
        type: "post",
        data: "species_id=" + species_id + "&action=populateBreeds",
        success: function (data) {
            console.log('\nSuccess.');
            jQuery('#breed option').remove();
            jQuery('#breed').append('<option value="">-- Please select --</option>');
            if (!data) {
                jQuery('#breed').append('<option value="" disabled="disabled">No breeds found for selected species.</option>');
            } else {
                jQuery('#breed').append(data);
            }
        }
    });
}

And here is part of the form HTML:

    <div class="form-group">
    <label for="species" class="required">Species</label>
    <select class="form-control" id="species" name="species">
        <option value="" selected="selected">-- Please select --</option>
        <option value="1">Dog</option>
        <option value="2" selected="selected">Cat</option>
        <option value="3">Bird</option>
        <option value="4">Horse</option>
    </select>
</div>
<div class="form-group">
    <label for="breed" class="required">Breed</label>
    <select name="breed" id="breed" class="form-control">
        <option selected="selected" value="">-- Please choose a species first --</option>
</div>

I have created a jsfiddle here to illustrate this functionality: http://jsfiddle.net/1961bgay/

Ideally you will need the console open (or firebug on Firefox) to see when the error occurs.

I think it may be relating potentially to the fact I have duplicated the jQuery selectors, but this is required in order to check and to add the trigger...any help appreciated, thank you!

Michael

Answer 1

You just have a small JS context/scoping error:

Change line 9:

From this: var species_id = $(this).val();

To this: var species_id = jQuery('#species').val()

Here is your working jsFiddle: http://jsfiddle.net/xgkefvbq/

Hope that helps!