c# - ASP.net firing jQuery AFTER asp UPDATE -

c# - ASP.net firing jQuery AFTER asp UPDATE -

i have formview launches in editmode , allows user select yes or no dropdown , nail 'save' button formviews update command:

<asp:formview id="formview1" runat="server" datasourceid="customeredit"> <itemtemplate> hello </itemtemplate> <edititemtemplate> <asp:label id="customernamelabel2" runat="server" text='<%# bind("customername") %>' /> <asp:label id="custid" runat="server" visible="false" text='<%# bind("custid") %>' /> <br> <br></br> customer? <br> <br> <asp:dropdownlist id="dropdownlist1" runat="server" selectedvalue='<%# bind("isthismycustomer") %>'> <asp:listitem selected="true"></asp:listitem> <asp:listitem>yes</asp:listitem> <asp:listitem>no</asp:listitem> </asp:dropdownlist> <br> <br> <asp:button id="button" runat="server" causesvalidation="true" commandname="update" text="save" /> </edititemtemplate> </asp:formview>

this button has jquery behind it

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script> $(document).ready(function () { $("input[id$='button']").click(function () { var div = $("div"); $("img").hide(); div.animate({ height: '300px', opacity: '0.4' }, "slow"); div.animate({ width: '300px', opacity: '0.8' }, "slow", function () { window.location.href = "mycustomers.aspx"; }); }); }); </script>

now when user hits button, jquery script kicks in, halfway through animation of jquery script, sql update through formview update command kicks in, stopping jquery doing stuff , launching itemtemplate of formview per regular update.

what want sql update occur , postback, jquery fire straight after.

what's best approach doing this

you're mixing client-side , server-side functionality. order of events you're observing this:

load page bind click event element click element (begins animation) reload page bind click event element

your click event accomplishing 1 thing, redirecting user page. if page beingness reloaded anyway, why not server-side code?

response.redirect("mycustomers.aspx");

it doesn't have animation, since you're reloading page anyway animation kind of moot. if want have animation don't want reload page, in case you'll want start looking ajax interacting server javascript code. (which can pretty big subject, when dealing webforms controls. it's improve in case "do webforms way" , not seek mess them.)

in comment above, said tried this...

$(window).load(function () { $(document).ready(function () { ...

that's... not right. don't randomly mix , match jquery code, understand you're doing here. you're binding events (such ready) within of event handler (such load), can pretty unusual pretty fast. separate event want respond code utilize respond it. example, consider have here:

$("input[id$='button']").click(function () { //... });

this doesn't execute code within function, binds function to executed when click event happens. same true of structure:

$(document).ready(function () { $("input[id$='button']").click(function () { //... }); });

this binds function executed when ready event happens. function, in turn, binds function executed when click event happens.

consider illustration mentioned in comment above... if really want animate element , redirect after page reloads (which still contend pretty poor ux, honest) this:

$(document).ready(function () { var div = $("div"); $("img").hide(); div.animate({ height: '300px', opacity: '0.4' }, "slow"); div.animate({ width: '300px', opacity: '0.8' }, "slow", function () { window.location.href = "mycustomers.aspx"; }); });

this skips click event , sets code execute on ready event. means it'll execute when page loads, basically. means don't want include in page (otherwise you'd never able view page more moment). you'd want include dynamically post-back should cause redirect.

ultimately, need separate client-side functionality server-side functionality. if you're redirecting after form post (which you're doing), redirect server-side code. if want bells , whistles of client-side animations , ux, don't utilize webforms post-backs.

c# jquery asp.net