How to use / combine 2 jquery scripts that use two different datatypes

Question

Tomas has been helping me on this problem and we have made some real progress I think. Here is the modified code. What this is supposed to do is to first, take my query string and pass it to the server where the data is parsed and inseted in the database. When the class method returns a success, the JQ function should echo a 100% css styled div (id=message) with the message from the server. It can also return a failure message as well. This message is imported?? with json. I can see the message in the FF console but I just can't see the message in the browser.

Another issue I am having is that every div on the page is having the id=message appended 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;

Answer 1

Not sure if this is what you're after, but as 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' from '<div>'.

EDIT2: Modified the selector (add an id="message" in the html!), added $()-wrappers around the div variable, and changed the .append() line to a .show() command.

Answer 2

Try this code (since it has a return false; at the end I'm assuming this is inside a submit function or something and dataString is being populated from elsewhere....):

$.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;

Your biggest mistake was that you forgot to specify a dataType (which I had in my example...) so jQuery did not know what format the server would be returning. It simply assumed it was a string instead of a JSON object so your data variable wasn't populated correctly. You also don't need the show() as appending is enough.

I tested the above and it works, assuming, again, dataString is populated elsewhere and body.php is returning a valid JSON string with a message and a success code.