c# - jQuery progress bar until save in database asp.net -

c# - jQuery progress bar until save in database asp.net -

in asp.net application need jquery progress bar runs till info not saved in database

for created web service , ajax jquery function , progress bar javascript plugin

html

<div id="progressbar"></div> <div id="result"></div> <asp:label runat="server" id="lbldisp" text= "percentage completed : "/> <asp:label runat="server" id="lblstatus" /> <asp:button id="btnsave" runat="server" text="save" class="buttonstyle" />

script (i using sys.application.add_load instead of document.ready function due dom interruption )

<link type="text/css" href="css/ui.all.css" rel="stylesheet" /> <script src="js/jquery-1.8.1.js" type="text/javascript"></script> <script src="js/ui.core.js" type="text/javascript"></script> <script src="js/ui.progressbar.js" type="text/javascript"></script> <script type="text/javascript"> sys.application.add_load(function() { // jquery progress bar function. $("#progressbar").progressbar({ value: 0 }); $("#lbldisp").hide(); //button click event $("#ctl00_contentplaceholder1_btnsave").click(function() { $("#ctl00_contentplaceholder1_btnsave").attr("disabled", "disabled") $("#lbldisp").show(); //call function var intervalid = setinterval(updateprogress, 250); $.ajax({ type: "post", url: "jobcard.aspx/insertdata", data: "{}", contenttype: "application/json; charset=utf-8", datatype: "json", async: true, success: function(msg) { $("#progressbar").progressbar("value", 100); $("#lblstatus").hide(); $("#lbldisp").hide(); $("#result").text(msg.d); clearinterval(intervalid); } }); homecoming false; }); }); function updateprogress() { var value = $("#progressbar").progressbar("option", "value"); if (value < 100) { $("#progressbar").progressbar("value", value + 1); $("#lblstatus").text((value + 1).tostring() + "%"); } } </script>

web service

[system.web.services.webmethod] public static string insertdata() { fortest jobcardform = new fortest(); //this line 760 --> jobcardform.insert_oilservice(); jobcardform.insert_tuningservice(); jobcardform.insert_otherservices(); jobcardform.insert_qrcservice(); jobcardform.insert_problemtaken(); jobcardform.insert_actiontaken(); jobcardform.insert_spareparts(); //insert_technician(); dsjobcardtableadapters.select_jobcarregistrationtableadapter insertjobcard = new dsjobcardtableadapters.select_jobcarregistrationtableadapter(); string = insertjobcard.insert_jobcarregistration( jobcardform.txtdate.text, jobcardform.txttimein.text, jobcardform.txttimeout.text, jobcardform.txt_regno.text, jobcardform.txt_fleetno.text, jobcardform.chkbkdvechle.checked, jobcardform.chkwalkin.checked, jobcardform.chkrepeatjob.checked, jobcardform.txtcustomername.text, jobcardform.txtridername.text, jobcardform.txtphoneno.text, jobcardform.txtemail.text, convert.toint32(jobcardform.ddl_serviceadvisor.selectedvalue), convert.toint32((jobcardform.listbox1.selectedvalue == "" ? "0" : jobcardform.listbox1.selectedvalue)), jobcardform.ddl_model.selectedvalue, jobcardform.ddl_type.selectedvalue, jobcardform.txtkmsrun.text, jobcardform.ddl_color.selectedvalue , "1", httpcontext.current.session["user_id"].tostring(), jobcardform.txtdateout.text, jobcardform.txtchassis.text, jobcardform.ddlyear.selectedvalue, jobcardform.txtexpirydate.text, jobcardform.txtnotes.text, jobcardform.ddllocation.selectedvalue).tostring(); httpcontext.current.response.redirect(httpcontext.current.request.rawurl); homecoming "save completed..."; }

looks script working fine getting error in web browser console window , error "500 internal server error" @ line 760 in web service jobcardform.insert_oilservice();. when utilize web service code in server side onclick event info inserted database. need progress bar, that's why have alter logic using web service

error

i create object of class utilize in static method , simplest way utilize non-static method in static method.

why dont this:

function functionname() { $.ajax({ type: "post", url: , data: json.stringify(), contenttype: "application/json; charset=utf-8", datatype: "json", beforesend: function () { $("#progress-bar").show(); $("#progress-bar1").hide(); }, complete: function () { $("#progress-bar").hide(); $("#progress-bar1").show(); }, success: function () { } }); }

and have 2 div

<div class="gap"></div> <div id="progress-bar" style="display:none;"> <img src="~/images/ajax-progressbar.gif" /> </div> <div id="progress-bar1"></div> </div>

so before send request show $("#progress-bar").show(); 1 time once content loaded hide it. hope reply question.

c# jquery asp.net web-services asp.net-ajax