JQuery/Ajax return Success message and display Saved indicator

Question

This is my first try with JQuery/Ajax. I have a RadDatePicker, where on selection of a date, the date is saved in the DB and the user should get a message that date is saved. The RadDatePicker calls a function on its event OnDateSelected as follows(C#):

  radDatePicker.ClientEvents.OnDateSelected = "function(sender, args){SaveDate(sender,args," + PriceDealProposalId + ")}";

The javascript function SaveDate successfully calls a webservice to save the date selected.

   function SaveDate(sender, e, id) {       
       if (e.get_newDate() != null) {
           $.ajax({
               url: "/ajaxservice.asmx/SaveSignedDate",
               data: "{priceDealProposalId:" + id + ",proposalDate: " + JSON.stringify(e.get_newDate()) + "}",
               dataType: "json",
               type: "POST",
               contentType: "application/json;charset=utf-8",
               success: function (data) {
                   alert("saved");
               }
           });
       }
   }

The above successfully saves the value and alerts a message. Instead of an alert I want to display a text message near this RadDatePicker control which says "Saved" and disappears in a few seconds. I am not sure how to interpret this success message and display a text. Please help me.

Solution 1

Try this code,

Create a div with id='msg'. And use this success function.

success: function(data) { 
     $('#msg').html(data).fadeIn('slow');
     //$('#msg').html("data insert successfully").fadeIn('slow') //also show a success message 
     $('#msg').delay(5000).fadeOut('slow');
 }

Solution 2

You just need to set the Display:none attribute to the element you want to show on Success Callback

HTML

<p id="myElem" style="display:none">Saved</p>

Success Callback

success: function (data) {
               $("#myElem").show();
               setTimeout(function() { $("#myElem").hide(); }, 5000);
        }