Question

I’ve racked my brains and went through it, looking at examples and don’t understand why firebug is throwing “e.nodeName is undefined” error..

It’s probably something stupid little bracket out of place or something that needs a second pair of eyes to see..

I’m just making a simple little ajax post for some inputs, but this is my first post ever, and I’m about close to pulling some hair off my head due to how many errors i’ve run into so far..
http://jsfiddle.net/JohnnyDoe/aQYra/

My script

<script type="text/javascript">
    $(document).ready(function () {
        $('.hexen').after('<div class="ui-state-default ui-corner-all ui-icon-disk ui-icon saveButton" onClick="save();" title="Save" style="float:left; height:20px;" onclick="save()"></div><br />') // ui icon
    .keypress(function () {
        $(this).next('.saveButton').show(); //appends ui icon
    });

        $('.saveButton').hide().click(function () {
            $(this).hide(); // removes ui icon on click
        });

        $('.ui-state-default').hover(

    function () {
        $(this).addClass('ui-state-hover');
    }, function () {
        $(this).removeClass('ui-state-hover');
    } //ui icon hover
    );
    });

    function save(value) {
        $('.hexen').each(function () {
            var id = null;
        });
        if ($(this).val() !== '') {
            id = $(this).attr('id');
        }
    }
    $.ajax({
        type: "POST",
        url: "Default.aspx",
        data: "{Id: " + $(".hexen").attr('id') + ", Value: " + $(".hexen").val() + "}",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log(data);
        }
    });
</script> 

My HTML

<div id="unvolitive">
<input type="text" class="hexen" id="Text1"/>
<input type="text" class="hexen" id="Text2"/>
<input type="text" class="hexen" id="Text3"/>
<input type="text" class="hexen" id="Text4"/>
<input type="text" class="hexen" id="Text5"/>
</div> 

Thanks in advance

Answer 1

I think, from a brief fiddle test, that the issue comes from mixing normal jQuery event handlers and the onclick handler you’re defining in the tag string (your save function).

I’m not sure what you’re trying to do in save; the each call does nothing:

$('.hexen').each(function () {
    var id = null; // all this does is set a local variable
});

but more importantly, the way you’ve set this up with onclick, this will be undefined, so the following line won’t work:

if ($(this).val() !== '') {

In this context, this refers to the window object, so I think that’s why you’re getting the error. To fix it, you should handle the save function in the jQuery-assigned click handler:

$('.saveButton').hide()
    .click(function () {
        $(this).hide(); // removes ui icon on click
        var id;
        // get the associated input
        var $input = $(this).prev('.hexen');
        if ($input.val() !== '') {
            id = $input.attr('id');
        }
        console.log(id);
        // presumably, do something with id now...
});

See a working fiddle.