We Keep Coding

ASP.net firing jQuery AFTER asp UPDATE

I have a formview which launches in editmode and allows the user to select yes or no from a dropdown and hit the 'save' button which is the 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>
Is This Your 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 also 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 the user hits the button, the Jquery script kicks in, then about halfway through the animation of the jquery script, the SQL update through the FormView Update command kicks in, essentially stopping jquery from doing its stuff and launching the itemtemplate of the formview as per a regular update.
What I want is the SQL update to occur and postback, then the jquery fire straight after.
What's the best approach to doing this

You're mixing client-side and server-side functionality. The order of events you're observing is this:
Load the page
Bind the click event to the element
Click the element (begins the animation)
Reload the page
Bind the click event to the element
Your click event is really only accomplishing one thing, redirecting the user to another page. If the page is being reloaded anyway, then why not do that from server-side code?
Response.Redirect("MyCustomers.aspx");
It doesn't have the animation, but since you're reloading the page anyway then the animation is kind of moot. If you want to have the animation then you probably don't want to reload the page, in which case you'll want to start looking into AJAX for interacting with the server from JavaScript code. (Which can be a pretty big subject, especially when dealing with WebForms controls. It's often better in that case to just "do it the WebForms way" and not try to mess with them.)
In your comment above, you said you tried this...
$(window).load(function () { $(document).ready(function () { ...
That's... not right. Don't just randomly mix and match jQuery code, understand what it is you're doing here. You're binding events (such as ready) inside of an event handler (such as load), which can get pretty strange pretty fast. Separate the event you want to respond to from the code you use to respond to it. For example, consider what you have here:
$("input[id$='Button']").click(function () {
//...
});
This doesn't execute the code inside the function, it binds that function to be executed when the click event happens. The same is true of this structure:
$(document).ready(function () {
$("input[id$='Button']").click(function () {
//...
});
});
This binds a function to be executed when the ready event happens. That function, in turn, binds another function to be executed when the click event happens.
Consider for example what I mentioned in my comment above... If you really want to animate the element and then redirect after the page reloads (which I still contend is a pretty poor UX, to be honest) then you would do 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 the click event and just sets that code to execute immediately on the ready event. Which means it'll execute when the page loads, basically. Which also means that you don't want to always include this in the page (otherwise you'd never be able to view the page for more than a moment). You'd want to only include it dynamically from the post-back which should cause this redirect.
Ultimately, you need to separate your client-side functionality from your server-side functionality. If you're just redirecting after a form post (which is what you're doing), then redirect from server-side code. If you want the bells and whistles of client-side animations and UX, don't use WebForms post-backs.

ASP controls need Double-Click to get focus due to OnTextChanged Event

I got a situation here.
I have around 5 ASP controls in my page including some Text-Box and Radio Buttons. These controls are the part of a form where the user will fill data one by one into these controls. Now, the problem is each of these controls have AutoPostBack = True and OnTextChanged or OnCheckedChanged event associated with it.
Here comes the problem. Whenever the user fills one of these controls and try to navigate to the next control, that control needs Double-Click to get focus. It is very inconvenient to double click every control while filling up the form.
I tried to come over the situation by setting Page.SetFocus(<control>); in every OnTextChanged event to the next control in the form. But the same doesn't work in case of a Radio Button. It also doesn't work when the sequence of focus is changed.
I need a work-around to overcome the problem. I can't remove the OnTextChanged or OnCheckedChanged events due to the requirements.

What's actually happening is the page is being posted back and then focus is shifting back to the control that caused the postback. A double click isn't actually strictly happening. The first click causes the first control to lose focus, thus causing the postback. The second click then focuses the control you want after the postback has occurred.
What you can do is capture the control that has received focus prior to the postback and when the page reloads set focus back to that control.
Here's an example (Updated):
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" AutoPostBack="True"
onFocus="SetNextControl(this);"></asp:TextBox>
<asp:RadioButton ID="RadioButton1" runat="server" OnCheckedChanged="RadioButton1_CheckedChanged"
AutoPostBack="True" GroupName="RBGroup" onClick="SetNextControl(this);" />
<asp:RadioButton ID="RadioButton2" AutoPostBack="True" GroupName="RBGroup" runat="server" onClick="SetNextControl(this);"/>
<asp:TextBox ID="TextBox2" runat="server" OnTextChanged="TextBox2_TextChanged" AutoPostBack="True"
onFocus="SetNextControl(this);"></asp:TextBox>
</div>
<asp:HiddenField ID="HiddenField1" runat="server" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if (document.getElementById("<%=HiddenField1.ClientID %>").value != "") {
var controlToFocus = document.getElementById(document.getElementById("<%=HiddenField1.ClientID %>").value);
controlToFocus.focus();
document.getElementById("<%=HiddenField1.ClientID %>").value = "";
}
})
function SetNextControl(e) {
document.getElementById("<%=HiddenField1.ClientID %>").value = e.id;
}
</script>
</asp:Content>
The above sample isn't perfect, I'm not sure if it'll work the way you want with RadioButtons as there is no onFocus event for them. I've changed them to use onClick so that at least focus remains on the last selected radio button. Hopefully this at least get's you a little bit closer to what you want.

Hide div on clientside click

Trying to get this div to disappear, does not seem to doing what I expect it to do, where am I going wrong?
It does not disappear.
Javascript:
<script type="text/javascript">
function Show_Hide_Display() {
var div1 = document.getElementById("checkAvailability");
if (div1.style.display == "" || div1.style.display == "block") {
div1.style.display = "none";
}
else {
div1.style.display = "block";
}
return false;
}
</script>
HTML:
<div runat="server" id="checkAvailability">
<asp:LinkButton OnClientClick="Show_Hide_Display()" ID="lbtnCheckAvailability" runat="server" CausesValidation="true" OnClick="lbtnCheckAvailability_Click">Check availability
</asp:LinkButton>
</div>
I want the button to pretty much hide itself.

Change your line to:
var div1 = document.getElementById("<%=checkAvailability.ClientID%>");
The reason is that when the checkAvailability control is rendered on the client side it may or may not have the same id (checkAvailability) since asp.net will prepend its id with that of the container control or some other logic.
This <%=checkAvailability.ClientID%> will always give you the actual id on the client side.

I think you will be better of looking at some jQuery here. For example, your code could look like:
$(document).ready(function(){
$('#yourbutton').click(function(){
$(this).toggle();
});
});
Of course, in your case you can also hide the wrapping div if you want that for some reason. It's about the same approach.

In addition to what #Icarus has posted, modify your code as such.
OnClientClick="return Show_Hide_Display()"
this will stop a post back from happening. i'm guessing you don't want a postback to occur since your div/button will be visible after a postback.

the problem is linkbutton causes postback, thus div visibility, set by JS, after postback will be restored to it's default value. i.e. style.display will not be saved. a simple solution will be just add simple html button. like this
<input type="button" value="hide the div" onclick="Show_Hide_Display()" />
this just triggers JS, not causing postback, and your div visibility will alter as expected.

ASP.NET and C# FileUpload

I have a asp file upload for pictures and what I want to do is, when the file chosen has the same name as the previous file it should pop something up that says "This image name already exists, do you want to replace it? if yes then it would just override the current picture with the new one but if not then just leave it alone. How can I do this?. Right now I have this. Also if the solution is in javascript I could also use that (but i am not too good with javascript :) ) Thank you
<div class="style">
Choose an Image: <asp:FileUpload ID="getImage" runat="server" Width="150px" BorderStyle="Inset" EnableViewState="true" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator"
runat="server" ControlToValidate="getImage" CssClass="Error" Display="dynamic" ValidationExpression=".*(\.[Jj][Pp][Gg]|\.[Gg][Ii][Ff]|\.[Jj][Pp][Ee][Gg]|\.[Pp][Nn][Gg])" ErrorMessage="Select a correct file format"></asp:RegularExpressionValidator>
</div>
Please be aware I am a total newbie with Javascript so if that is what's going to work please explain as if I was a 5 year old.
I really appreciate the help.

My solution will perform the check just before postback. I also use jquery a little bit.
The important piece of the puzzle here is retrieving the previous file name. I created a PageMethod to do this part. So in my aspx.cs file I have a function that looks like this:
using System.Web.Services;
.......
[WebMethod()]
public static string GetPreviousFileName()
{
//put logic here to get the filename to compare against.
return "somefilename.ext";
}
You'll need to implement your own logic for how to retrieve the file name. Another, simpler but less flexible, approach for handling the previous file name would be to add an asp:hiddenfield to your page and populate it with the name of the previous file on page load. Then you could compare by reading $('#<%= hiddenField.ClientID %>').val().
Next I used the following code for my file upload control and a submit buton:
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true" />
<div>
<asp:FileUpload ID="fu" runat="server" />
<asp:Button ID="btnUpload" runat="server" OnClientClick="return checkDuplicateFile();" Text="Upload File" />
</div>
Two important things to note here: The ScriptManager has EnablePageMethods="true" and the asp:button has an OnClientClick attribute specified. Lastly, the javascript part of the solution which retrieves the value from the page method and and compares the file names:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var oFilename = "";
$(function () {
//get original file name on page load
PageMethods.GetPreviousFileName(function (result) {
oFilename = result;
});
});
function checkDuplicateFile() {
var newVal = $('#<%=fu.ClientID %>').val();
var newValFile = newVal.substr(newVal.lastIndexOf("\\") + 1);
//returning true causes postback, returning false stops postback.
if (newValFile == oFilename) { return confirm("This image name already exists, do you want to replace it?"); }
else return true;
}
</script>
Couple of things going on here. We use our pagemethod to pull in our old filename from the page method on page load (PageMethods.GetPreviousFileName). Next we setup the function which will be called by our buttons onClick event (client side). The <%=fu.ClientID %> snippet of code will output the client side id of the file upload control for use in our javascript. I do a substring on the file path and extract the file name by pulling back only the text after the last '\' and do the compare.
As my comment in the function says, returning true/false from a function called in the OnClientclick event determines whether a post back occurs. So if the user clicks yes in the confirmation box then a postback occurs, else if they click no then none occurs.
Hope that at least gets you going in the right direction.

Add the code below to your submit button
OnClientClick="return confirm('Are you sure you want to delete this file?')"
Edit as someone pointed out this will ask this question without taking in concern previous file and new one. It will do basic job.
My question is whether you doing this for edit mode or in new item mode. I mean are you editing item or adding new one on page you are interested to check?

how to make accordion headers all collapsed initially on page load?

I added this script on my page..it didnt work
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion( { active: false, collapsible: true });
});
my accordion
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
I see the first header expanded when page's loaded. How to make them all collapsed on page load?

There is an easy fix for that - just set SelectedIndex="-1" instead of "0" (plus RequireOpenedPane="false" but it's already set in your markup).. and you really don't need that fancy onReady script.

I think your selector is wrong.
Try
$(document).ready(function(){
$("#<%=Accordion1.ClientID %>").accordion( { active: false, collapsible: true });
});

You have to set
Accordion1.RequireOpenedPane = false;
To have them all closed. And possible set selectedIndex to -1

I think your selector is wrong:
$(document).ready(function(){
$("#<%= Accordion1.ClientID %>").accordion( { active: false, collapsible: true });
});
This would have to go inside your page, not in an external javascript file or the <%= %> code block wont get executed.
Side note: You are using jquery notation which looks like the jquery UI accordion code but then trying to apply it to what looks like the asp.net Ajax Control Toolkit accordion control. If this is what you are doing then it probably wont work. However if you have the very latest version of ACT included with the Microsoft Ajax library then you could be correct here. I know that they have reimplemented all of the ACT controls to be exposed as jquery plugins but I havent used that release.

On a sidenote: When using accordion (or other js-triggered layout), you will be risking FOUC (Flash Of Unstyled Content). I would wrap the accordion control in a div, with display:none in your css and when the accordion javascript is executed, you use JQuerys show() to make it visible again. Then the accordion will be loaded and styled before it's shown.