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
You defined in ajax call dataType: json
, so your ajax call expects valid json returning from your server. It seems that you do not return valid json. I recommend deleting this line (contentType
as well). If this is not the case, then I do not know what is. :)
By the way, you can define data like this:
data: {
Id: $(".hexen").attr('id'),
Value: $(".hexen").val()
}
No need to stringify it on your own.
It's hard to tell without a working link to tell where it's getting bogged down but I can tell you that the JSON you're posting is invalid.
"{Id: " + $(".hexen").attr('id') + ", Value: " + $(".hexen").val() + "}"
should be
"{'Id': '" + $(".hexen").attr('id') + "', 'Value': '" + $(".hexen").val() + "'}"
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.
The error happens in save()
which uses this
outside of context.. (it refers to window currently)
It should probably be
function save(value) {
$('.hexen').each(function() {
var id = null;
if ($(this).val() !== '') {
id = $(this).attr('id');
}
});
}
I moved the if
part inside the each
handler..