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

[fjm]

I have one jquery function that submits data via a datastring to my server. This works great. On success, I currently have a little alert box that lets the user know that the data was stored.

I now have a second function that gets back a json response for a success or failure from the server and will echo to the user whether the data was saved successfully or not. This function should replace the alert box in the bottom most function.

I don't quite know how these two functions should fit together. Independantly, they work great but when I try and combine them, nothing works.

I'd sure appriciate any help on this. Thanks.

Here are the functions that I want to combine.

$('#Cust').submit(function() {
    var data = $(this).serialize();
    var url = $(this).attr('action');
    var method = $(this).attr('method');
    $.ajax({
        url: url,
        type: method,
        data: data,
        dataType: 'json',
        success: function(data) {
            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;
});
 
 
 
$(function() {
  $('.error').hide();
  $(".Btn").click(function() {
    $('.error').hide();
      var Phone = $("input#Phone").val();
        var dataString = '&Summ='+ Summ + '&Dtl='+ Dtl;
        $.ajax({
      type: "POST",
      url: "index.php",
      data: dataString,
      success: function(){
        $('#Cust input[type=text]').val('');
        alert( "Success! Data Saved");
      }
     });
    return false;
    });
});

[acoder]

You mean you want to make another Ajax request when the bottom function is successful?

[fjm]

@acoder
Hi Acoder. Yes, exactly.

If you look, you will see an alert() in the success part of the lower function. What I really want to do is replace that alert with a nice dynamic css styled div to tell the user that their data was successfully received. That's really all I'm doing. :)

I just don't know how to tie these functions together. Both the upper and lower functions use different datatypes. One uses json and the other uses datastring. :/

Thanks for any help you can provide.

EDIT:

I think I need to just put this out there so there isn't any confusion. The url in the lower function (url: "index.php") is only for getting the database values and importing them into the textboxes for display. I can't use this same url for the json server callback. It would have to be a new url.

[acoder]

If you want to simply replace the alert with a styled div, then replace the alert with the following lines:

var $div = $('<div>').attr('id', 'message').html("Success! Data saved");
    $div.addClass('success');
}
$('body').append($div);

If you want to replicate the Ajax request triggered on submit, take the following three lines:

var data = $(this).serialize();
var url = $(this).attr('action');
var method = $(this).attr('method');

and replace 'this' with the form, e.g. "#formid".