CODEWITHSUNDEEP
javascriptjqueryajax
Nick D
Nick D

Reputation: 339

Unable to pass AJAX call due to undefined variable

For whatever reason, when making an AJAX call to the server, the console keeps saying that a variable parameter I've assigned it to is perfectly valid in the previous function I've chained it to. The error I keep getting is:

Uncaught TypeError: Cannot call method 'split' of undefined.

Any help is greatly appreciated.

$("body").on("click", ".edit_tr", function() {
    var ID = $(this).attr('id'); //This is valid.  It works.
    var split = ID.split('_');
    $("#first_" + split[1]).hide();
    $("#last_" + split[1]).hide();
}).change(function() {
    var ID = $(this).attr('id'); //This keeps coming back as undefined.
    var split = ID.split('_');
    var first = $("#first_input_" + split[1]).val();
    var last = $("#last_input_" + split[1]).val();
});

And some relevant PHP/HTML:

<tr id="item_<?php echo $id; ?>" class="edit_tr">
    <td>
        <a href="#" class="del_button" id="del-<?php echo $id; ?>">Delete Record</a>
    </td>
    <td class="edit_td">
        <span id="first_<?php echo $id; ?>" class="text">
            <?php echo $firstname; ?>
        </span>
        <input type="text" value="<?php echo $firstname; ?>" size="8" class="editbox" id="first_input_<?php echo $id; ?>" />
    </td>

    <td class="edit_td">
        <span id="last_<?php echo $id; ?>" class="text">
            <?php echo $lastname; ?>
        </span>
        <input type="text" value="<?php echo $lastname; ?>" size="8" class="editbox" id="last_input_<?php echo $id; ?>" />
    </td>
</tr>

Upvotes: 0

Views: 89

Answers (1)

linstantnoodles
linstantnoodles

Reputation: 4400

Your value of this in the change handler is bounded to the body element. Your body element doesn't have that id. I would either do this:

$(".edit_tr").on("click", function() {

  ...

}.change( ... );

Or attach the change event on .edit_tr separately.

Upvotes: 2

Related Questions