Develop Reference

How to keep JQuery slideToggle down on ASP postback

I have a very simple slideToggle. Opens and closes just fine. I have some tools, a few drop downs that cause a Post Back. When the post back executes, it causes the slideToggle to go back up. How do I keep that from happening? Is there a default value setting I missed or don't know?
I have searched high and low for this answer and nothing works. I have tried so many different options and all lead to nothing. All the answers given here on the site don't work. Any other suggestions? Thanks again for the help
Here is the slideToggle code.
<script type="text/javascript">
$(document).ready(function () {
$(".Flip").click(function () {
$(".FlipPanel").slideToggle("slow");
});
}); `enter code here`
</script>
Here is the markup I use to open and expand.. With some CSS to style it.
<div class="Flip" id="testFlip" runat="server">Preferred Cargo</div>
<div class="FlipPanel">
</div>

Here a very basic example. The value of state will be loaded from the TextBox, incremented and then stored again. You will find that the value increments on every PostBack without server side code. Adapt this to store the open state of your panel.
I uses a TextBox to visualize the process, but normally you would use a HiddenField.
<script type="text/javascript">
$(document).ready(function () {
var state = $("#<%= TextBox1.ClientID %>").val();
state++;
$("#<%= TextBox1.ClientID %>").val(state);
});
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br>
<asp:Button ID="Button1" runat="server" Text="Button" />

Unable to call a function while using master page in Javascript at checkbox checked change event

I was trying to call a function when the checkbox status changes, it calls without a masterpage. I have tried the following code:
<script type="text/javascript">
$(function () {
$('#cbOption1').on('change', PublishToPreferredZerker);
});
function PublishToPreferredZerker() {}
</script>
[...]
<asp:CheckBox ID="cbOption1" runat="server" style="text-align: left"
Text="Publish the job to particular Zerker or a group of the Zerkers." /><br />
The function is not called when using MasterPage.

Note cbOption1 is not the client ID, but the ID for the server side.
You need to do something like (Use Control.ClientID Property to get the id for HTML element):
$('#<%=cbOption1.ClientID%>').on('change', PublishToPreferredZerker);

The code
$('#cbOption1').on('change', PublishToPreferredZerker);
finds the control with id cbOption1 and then acts on that control
But when using this code on a master page, the control id does not remain cbOption1.
It is prefixed by master page content Id.
something like ct$001cbOption1
To make it work when using master pages use code like this to find the clientId for the control :
$(#"<%= cbOption1.ClientID %>").on( .... )

I got success while I added below code on Page load function.
cbOption1.Attributes.Add("onChange", "javascript:PublishToPreferredZerker()");
Javascript function
function PublishToPreferredZerker() {}
Also I have tried above answers but not get required output.
Thanks,

how to call javascript from asp.net HyperLink control

I simply want to call a JavaScript function from asp.net hyperlink
im using http://orangoo.com/labs/GreyBox/ my requirement is to show thumbnail on hyperlink and on click show full image. Should I use another control?
my code is below:
<asp:HyperLink ID="Hyperlink" runat="server" CssClass="Screenshot" ImageUrl="App_Themes/White/Images/thmb_screenshot_1.png"
NavigateUrl="App_Themes/White/Images/screenshot_1.png" ToolTip="screenshot 1" />
<script language="javascript" type="text/javascript">
//Greybox Image popup window
function OpenImage(url) {
var caption = "Home";
return GB_showImage(caption, url)
}
</script>
how can I use
onclick="OpenImage(this.src);
or
OnClientClick="OpenImage(this.src);

I know this is old but to anyone interested, just add onclick and it will work fine. The extra attribute (even though it doesn't show up on intellisense) will pass through to the rendered markup.
<asp:HyperLink ID="HyperLink4" runat="server" onclick="logDownload();" NavigateUrl="~/download/Sample-Icons.zip">Download Icons</asp:HyperLink>

If you use a LinkButton instead, you can use the OnClientClick property to execute a JavaScript function. Using the HyperLink control, you can use the NavigateUrl property like this:
<asp:HyperLink ID="Link1" runat="server"
Text="Click Me!"
NavigateUrl="javascript:OpenImage('App_Themes/White/Images/thmb_screenshot_1.png');">
</asp:HyperLink>
Here's an article that discusses it:
http://gchandra.wordpress.com/2007/09/27/call-javascript-function-inside/

I know this is old, but for anyone looking to do this on the server side and not through the markup, you can do.
var hyperLink = new HyperLink { Text = "Display text", ID = "hyperlinkId"};
hyperLink.Attributes.Add("onclick", "javascriptMethod()");

It looks like you are basically there, what's wrong with this?
<asp:HyperLink ID="Hyperlink" runat="server" OnClientClick="OpenImage(this.src)" />

jQuery file upload refreshing page

I saw this question, "Show Open Dialog on a Button click":
'I have to show a Open Dialog box on a button click. Basically I have to upload a file, for this I am using FileUpload control, but I don’t want to show it to user instead I want to show a Button'
And the answer was :
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$("#FileUpload1").click();
return false;
});
});
</script>
<style type="text/css">
.Class { visibility:hidden;}
</style> </head> <body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btn" runat="server" Text="Send File"/>
<asp:FileUpload ID="FileUpload1" CssClass="Class" runat="server" />
But i tried it and all it does is refreshing the page, anyone know what the problem is?

Because "FileUpload1" is not the ClientID. Just look at the generated HTML source of your page and you will see that.
You should use something like :
<script type="text/javascript">
$(document).ready(function() {
$("#<%= btn.ClientID %>").click(function() {
$("#<%= FileUpload1.ClientID %>").click();
return false;
});
});
</script>

That sounds like a security risk, and I wouldn't be surprised if security prevented that from working.
Take a look at this jQuery Ajax Upload plugin.

I would suggest you to not go that route. If you want to avoid showing FileUpload control to user.. use this.

make the client mode static to be able to access you controls like this
<asp:FileUpload ID="FileUpload1" ClientIDMode="Static" CssClass="Class" runat="server" />
<asp:Button ID="btn" ClientIDMode="Static" runat="server" Text="Send File"/>

All server-side controls (those with runat="server" attributes) have their IDs re-written by ASP.NET. Your IDs will actually look something like ctl00_MainContent_btn.
You can get around this by using <%= btn.ClientID %> server tags or by assigning a CSS class to your controls and referencing that class in JavaScript/jQuery.
Edit: You probably also need to make sure that your ASP button is not a submit button, which would cause the generated page to submit the form.

Your page refreshes because the target of your form is implicitly the current page. You need to set the target of your form to be (for example) a hidden iframe:
<form id="my-form" action="url" target="form-target" method="post">
<!-- your form here -->
</form>
<iframe id="form-target" name="form-target" style="display:none;"></iframe>
<script>
// Assuming you are using jquery
var form = $('#my-form'),
iframe = $('#form-target');
// create a function to be called each time the iframe loads
iframe.load(function () {
var responseText, iframeBody;
// Get the response from the server. It will be in the body tag of your iframe
iframeBody = $(this).contents().find('body');
responseText = iframeBody.text().trim();
// Don't continue until we actually have a response
if (!responseText) return;
// Clear the iframe's html so this function won't be called again for the same content
iframeBody.html('');
// do whatever you want with the response, for example JSON decode it
response = JSON.parse(responseText);
});
</script>

Once again, how do I convert ct100 IDs to original id using javascript?

I have a tag element in .aspx page:
<a id="loginLink" runat="server" class="loginLink" href="#" onclick="$('registerform').hide(); $('signin').show(); this.style.display='none'; $('back').show(); $('reg-signin-email').focus(); return false">Already signed up? Log in here</a>
and trying to get loginLink.ClientID , but it spits back ct100_main_loginLink. How do I get original 'loginLink' id in the same aspx page?
Tried var ctrl = document.getElementById('<%# loginLink.ClientID %>');
and it didnt work..
example:
<asp:Content runat="server" ContentPlaceHolderID="Main">
<a id="loginLink" runat="server" class="loginLink" href="#" onclick="$('registerform').hide(); $('signin').show(); this.style.display='none'; $('back').show(); $('reg-signin-email').focus(); return false">Already signed up? Log in here</a>
<script type="text/javascript"> alert('diplay here original loginLink ID instead of ct100_Main_LoginLink'); </script>
</asp:Content>

if you know the name, and that's what you want to have available in js, you can just type it in js. alternatively, if you want the control to provide its own id, you could do
<script type="text/javascript">
alert('<% =loginLink.ID %>');
</script>
although I don't see the point in that. if you need to grab the element during a javascript routine, you'll need the ClientID value as there won't be any element on the page with the short-form id in the example I've given.

You need to write '<%# loginLink.ClientID %>', and you can only write it in the original ASPX page. (Not an external JS file)
If you wnat to get the original ID (which never shows up on the client), use loginLink.ID.

if you use a tool like FireBug you will see that the actual ID output to the client is the long one with ct100.... in ASP.NET pages.
You will not normally get loginlink back to the client unless you are using Dot.NET 4.0 and controlling the client-mode.
in your example the var ctrl should hold a reference to the DOM element