How to use / combine 2 jquery scripts that use two different data types
Thomas helped me with this problem and I have made some real progress. Here's the modified code. What this should do is, first of all, take my query string and pass it to the server where the data is parsed and inserted into the database. When the class method returns on success, the JQ function should echo a 100% css style div (id = message) response with a message from the server. It can also return an error message. Is this message imported? with json. I see the message in the FF console, but I just can't see the message in the browser.
Another problem I'm running into is that every div on the page has an id = message attached to it.
EDIT:
$.ajax({
type: "POST",
url: "body.php?action=admCust",
data: dataString,
success: function(data){
$('#admCust input[type=text]').val('');
var div = $('<div>').attr('id', 'message').html(data.message);
if(data.success == 0) {
$(div).addClass('error');
} else {
$(div).addClass('success');
}
$('body').append(div);
$(div).show();
}
});
return false;
a source to share
Try this code (since it has return false;
at the end, I assume it is inside a send function or something, and dataString
populated from somewhere else ....):
$.ajax({
type: "POST",
url: "body.php?action=admCust",
data: dataString,
dataType: 'json',
success: function(data){
$('#admCust input[type=text]').val('');
var div = $('<div>').attr('id', 'message').html(data.message);
if(data.success == 0) {
$(div).addClass('error');
} else {
$(div).addClass('success');
}
$('body').append(div);
}
});
return false;
The biggest mistake was that you forgot to specify dataType
(which I had in my example ...) so jQuery didn't know what format the server would return in. He just assumed it was a string instead of a JSON object, so your variable was data
not populated correctly. You don't need to either show()
, since the addition is enough.
I've tested the above and it works, assuming it's dataString
populated again elsewhere and body.php returns a valid JSON string with a message and success code.
a source to share
Not sure if this is what you are after, but since I understand your problem, do this:
$(function() {
$('.error').hide();
$(".admCustBtn").click(function() {
$('.error').hide();
var admCustRPSecPhone = $("input#admCustRPSecPhone").val();
var dataString = '&admCustRptSumm='+ admCustRptSumm + '&admCustRptDtl='+ admCustRptDtl;
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
// add an input parameter named data
success: function(data){
$('#admCust input[type=text]').val('');
// remove the alert box
// alert( "Success! Data Saved");
// add the success handling code from the other method
var div = $('#message').attr('id', 'message').html(data.message);
if(data.success == 0) {
$(div).addClass('error');
} else {
$(div).addClass('success');
}
$(div).show();
}
});
return false;
});
});
EDIT: Renamed $div
to div
and changed the selector to 'div'
c '<div>'
.
EDIT2: Changed selector (add id="message"
to html!), Added $()
-wrappers around the variable div
and changed the line .append()
to command .show()
.
a source to share