jQuery/ajax is not updating divs on the page - php

Question

I'm trying to update a div with id=OCRID, which is a div on my page that contains some data. I used the code at the following URL first, however we switched to a jQuery approach. <-Ugly ajax->. Switched to this. Using alert, I saw that the message being returned on success was the correct message, but the document.getElementById(OCRID).innerHTML=msg doesn't change the value. I have some other javascript that does some similar things but not with data from the server. Please help?
$.ajax({
type: "GET",
url: url,
data: "q="+OCRID+"&newstatus="+document.getElementById(OCRID).value,
success: function(msg, OCRID){
document.getElementById(OCRID).innerHTML=msg;
}
});

Answer 1

First of all you mentioned OCRID is an id of div and you've used
document.getElementById(OCRID).value // a div doesn't have a value attribute
which returns value of an HTML element but a div doesn't contain any value attribute and in the success callback you have used
success: function(msg, OCRID){
document.getElementById(OCRID).innerHTML=msg; // innerHTML is right for a div
}
From the jQuery Documentation:
success(data, textStatus, jqXHR)
A function to be called if the
request succeeds. The function gets passed three arguments: The data
returned from the server, formatted according to the dataType
parameter; a string describing the status; and the jqXHR (in jQuery
1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in
turn. This is an Ajax Event.
in this case you shouldn't use OCRID as the second parameter because jQuery uses 3 parameters in the success callback and these are basically data, textStatus, jqXHR and in this case data is your msg, OCRID in this case become textStatus and it is the response's status message and the third parameter is the xhr object. So it should be
$.ajax({
type: "GET",
url: url,
data: "q="+OCRID+"&newstatus="+$('#'+OCRID).html(), // or text()
success: function(msg){
$('#'+OCRID).html(msg); // or text()
}
});
Also remember that you OCRID looks like a variable and this should be available in the scope of your ajax call and if this is not a variable then it should be $('#OCRID') in both places as given below
$('#OCRID').html();
and in the success callback
$('#OCRID').html(msg);

Answer 2

Replace this line:
document.getElementById(OCRID).innerHTML=msg;
With:
document.getElementById("OCRID").innerHTML=msg; // notice the quotes

Answer 3

If your success callback has OCRID as a parameter(which is incorrect) it will be used instead of the one you used in your data parameter, so remove it.
$.ajax({
type: "GET",
url: url,
data: "q="+OCRID+"&newstatus="+document.getElementById(OCRID).innerHTML,
success: function(msg){
document.getElementById(OCRID).innerHTML=msg;
}
});

Answer 4

Why not use the jQuery version for the interface to the element? To me it looks like OCRID is a variable, right?
$.ajax({
type: "GET",
url: url,
data: "q="+OCRID+"&newstatus=" + $('#' + OCRID).text(),
success: function(msg, OCRID){
$('#' + OCRID).html(msg);
}
});