By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,783 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

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

P: 348
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.

Expand|Select|Wrap|Line Numbers
  1. $('#Cust').submit(function() {
  2.     var data = $(this).serialize();
  3.     var url = $(this).attr('action');
  4.     var method = $(this).attr('method');
  5.     $.ajax({
  6.         url: url,
  7.         type: method,
  8.         data: data,
  9.         dataType: 'json',
  10.         success: function(data) {
  11.             var $div = $('<div>').attr('id', 'message').html(data.message);
  12.             if(data.success == 0) {
  13.                 $div.addClass('error');
  14.             } else {
  15.                 $div.addClass('success');
  16.             }
  17.             $('body').append($div);
  18.         }
  19.     });
  20.     return false;
  21. });
  25. $(function() {
  26.   $('.error').hide();
  27.   $(".Btn").click(function() {
  28.     $('.error').hide();
  29.       var Phone = $("input#Phone").val();
  30.         var dataString = '&Summ='+ Summ + '&Dtl='+ Dtl;
  31.         $.ajax({
  32.       type: "POST",
  33.       url: "index.php",
  34.       data: dataString,
  35.       success: function(){
  36.         $('#Cust input[type=text]').val('');
  37.         alert( "Success! Data Saved");
  38.       }
  39.      });
  40.     return false;
  41.     });
  42. });
May 22 '09 #1
Share this Question
Share on Google+
3 Replies

Expert Mod 15k+
P: 16,027
You mean you want to make another Ajax request when the bottom function is successful?
May 23 '09 #2

P: 348
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.


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.
May 23 '09 #3

Expert Mod 15k+
P: 16,027
If you want to simply replace the alert with a styled div, then replace the alert with the following lines:
Expand|Select|Wrap|Line Numbers
  1. var $div = $('<div>').attr('id', 'message').html("Success! Data saved");
  2.     $div.addClass('success');
  3. }
  4. $('body').append($div);
If you want to replicate the Ajax request triggered on submit, take the following three lines:
Expand|Select|Wrap|Line Numbers
  1. var data = $(this).serialize();
  2. var url = $(this).attr('action');
  3. var method = $(this).attr('method');
and replace 'this' with the form, e.g. "#formid".
May 25 '09 #4

Post your reply

Sign in to post your reply or Sign up for a free account.