Home
Manage Your Code
Snippet: Jquery Asp.net WebMethod Call (JavaScript)
Title: Jquery Asp.net WebMethod Call Language: JavaScript
Description: Calls an Asp.net [WebMethod] via JQuery Views: 148
Author: Brandon Dimperio Date Added: 2/4/2010
Copy Code  
 function submitAjax(controls) {
           //$("#ajaxResult").text("submitCalled:" + code);
           function quoteOrNull(value) {
               if (typeof value == "undefined" ||  value == null)
                   return "null";
               else
                   return "'" + value + "'";
           };
            var all = controls.All.attr('checked');
             var investors = [];
           controls.Boxes.each(function(index,item) {
               if (item.checked || all)
                   investors.push(item.value);
           });
           var message = "{'code':'" + controls.Code
                    + "','associate':" + quoteOrNull(controls.Associate.val())
                     + ",'shareholder':" + quoteOrNull(controls.Shareholder.val())
                     + ",'customer':" + quoteOrNull(controls.Customer.val())
                     + ",'regulatory':" + quoteOrNull(controls.Regulatory.val())
                      + ",'rootCause':" +quoteOrNull( controls.Rootcause.val())
                      + ",'investors':[" + investors +"]"
                     + "}";
           $.fn.wait = function(time, type) {
               time = time || 1000;
               type = type || "fx";
               return this.queue(type, function() {
                   var self = this;
                   setTimeout(function() {
                       $(self).dequeue();
                   }, time);
               });
           };

           $.ajax({
               type: "POST",
               url: "List.aspx/Save",
               data: message, //Get form values 
               contentType: "application/json; charset=utf-8", //take this out for MVC
               dataType: "json",
               success: function(msg) {

                   var value = msg.d;
                   if (msg.d.HasError == false) {
                       $("#ajaxResult").text("Ajax success").removeClass("errormsg");
                       controls.Button.val("Edit");
                       controls.Result.text("Success").removeClass("errormsg");
                       controls.Row.addClass("complete");
                       controls.Result.show().wait(2000).fadeOut("slow");
                       calculateAverage(controls);
                       
                       // else controls.Severity.text("Incomplete").fadeIn("slow").wait(1500).fadeOut("slow");
                       function disable(item) { item.attr("disabled", "disabled"); }
                       disable(controls.Associate);
                       disable(controls.Shareholder);
                       disable(controls.Customer);
                       disable(controls.Regulatory);
                       disable(controls.Rootcause);
                       // disable(controls.All);
                       //  disable(controls.Boxes);
                   }
                   else {
                       controls.Result.text("Creation failure:" + msg.d.ErrorMessage).addClass("errormsg").show();
                       $("#ajaxResult").text("Ajax success, creation failure:" + msg.d.ErrorMessage).addClass("errormsg");
                   }

                   //  span.attr("style", "color:White");
                   //span.text("Ajax success:" + msg.d).show().wait().fadeOut("slow");
               },
               error: function(request, textStatus, errorThrown) {
                   // var span = $(formSelector + " div.submit span");
                   controls.Result.text("Ajax failure").addClass("errormsg").show().wait(3500).fadeOut("slow");
                   $("#ajaxResult").text("Ajax failure:" + request.statusText).addClass("errormsg");
                   // span.attr("style", "color:Red");
                   // span.text("*" + request.statusText).show().wait().fadeOut("slow");

               }
           });
       };
<script type="text/javascript">
    //<![CDATA[
    function codeButton(code) {
        var trSelector = "tr#" + code;
        var button=$(trSelector + " input[type='button']");
        var controls=rowControls(code);
        if (button.val() == "Edit") {
        //enable controls and change button text
        function enable(item){item.removeAttr("disabled");};
        enable(controls.Associate);
        enable(controls.Shareholder);
        enable(controls.Customer);
        enable(controls.Regulatory);
        enable(controls.Rootcause);
        <%if(AllowInvestorRequirementsEdit())
 {%>
        enable(controls.All);
        enable(controls.Boxes);
        <%
 }%>
        controls.Row.removeClass("complete");
        button.val("Save");
        }
        else {
            submitAjax(controls);
        }
        
    };
    //]]>
      </script>
Usage
Asp.net:
" name="submit" onclick="codeButton('<%=currentDefect.Code.Replace("/","_") %>');" />

Notes
Reference for learning article: http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/