Hi all,
this is a really strange one. Not sure where I found the example code
for this, but it has been working for me without an issue and I have
it running multiple times on my site.
But for some reason in this one instance it isn't working, and I keep
checking everything and it all looks fine to me.
This is a part of an ajax form and on submit I want to refresh the
selected note area with the content of what was entered.
Everything runs fine, no errors, but the content never changes until I
refresh the entire page (so the ajax response isn't working).
Using firebug I can see the response is being returned to the browser
properly, and I can see from the 'alert(id2)' that the id I am trying
to write to is in the html document.
[code]
function getNotes(){$(".addNote").click(function(event) {
var id = this.id;
var posTop = event.pageY-130;
var posLeft = event.pageX-130;
$.ajax({
type: "POST",
url: "processes/addNote.php",
data: id,
success: function(response){
$("#addNoteForm").css({ position:
'absolute', top: posTop, left:
posLeft });
$("#addNoteForm").fadeIn("slow").html(response);
var id2 = id.replace(/&f=e/, '');
var id2 = id2.replace(/&f=d/, '');
var options = {
target: '#addNoteForm', // target element(s) to be
updated with server response
success: showResponse
};
// bind to the form's submit event
$('#addNoteForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a
string to display it
// but the form plugin does this for you automatically when it
submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To
access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being
submitted;
// returning anything other than false will allow the form submit
to continue
}
// post-submit callback
function showResponse(options) {
// for normal html responses, the first argument to the success
callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'xml' then the first argument to the success
callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'json' then the first argument to the success
callback
// is the json data object returned by the server
$.ajax({
type: "POST",
url: "processes/addNote.php",
data: id+"&f=r",
success: function(response2){
$("#"+id2).html(response2);
alert(id2);
$("#addNoteForm").fadeOut("slow");
}
});
}
}
});
});
};
[/code]
Any ideas?
