I have an anchor tag, an AsyncFileUpload control, and a span. The anchor tag's InnerText is set when a file exists in the database, if not, it is hidden. It also has a ServerClick event which downloads the file.
The span tag's InnerText displays the filename of the file uploaded using the AsyncFileUpload OnUploadedComplete.
When I click on the anchor, the file downloads (which is good.) But when I change the file (using the AsyncFileUpload) it posts back and the ServerClick method of the anchor tag is fired again therefore downloading the file again.
<a id="lnkDownloadFile" runat="server"></a>
<span id="spnFilename" runat="server"></span>
<input type="button" id="btnReplaceFile" value="Replace File" runat="server" />
<div>
<ajaxToolkit:AsyncFileUpload ID="fuFile" runat="server" OnUploadedComplete="UploadComplete" OnClientUploadError="UploadError" />
</div>
Is there any way around this?
Thank you.
I am not sure why this is happening but one of the work-around could be to use hidden field to confirm if post-back has happened due to click on download link. For example,
<input type="hidden" id="downloadFile" runat="server" />
<asp:LinkButton id="lnkDownloadFile" runat="server" OnClientClick="return setDownloadFile();" />
<script type="text/java-script" >
function setDownloadFile() {
document.getElementById('<%= downloadFile.ClientID>').value = 'true';
return true;
}
</script>
You can check downloadFile value in the link button click to decide whether to download file or not. Note that I have used LinkButton because I am sure about its client click attribute - you can try use click attribute with html anchor (what I am not 100% sure if it would interfare with ServerClick event handler).
Related
I have a webpage with a control to handle all the comments so I don't have to copy the code from one page to another. When I click the button, the code to handle the submit is not happening. I want the page to have no .axd references.
This is my form statement on the .aspx page
<form id="formAlpha" method="post" runat="server" action="">
<Comm:Comm ID="comments" runat="server" />
</form>
The processing for saving the comments is in the control.aspx
In the code of the webpage, I set the action to be
formAlpha.Action = Request.RawUrl;
This is my submit button in the control.
<asp:button ID="cmdSubmit" CausesValidation="false" UseSubmitBehavior="true" text="Submit" runat="server" OnClick="cmdSubmit_Click" OnClientClick="return ValidateSubmission();" />
The JS code executes correctly, it displays an alert box and then returns true. THe page reloads but the click event doesn't work. The load event fires up again and the IsPostBack is false. Its not submitting but reloading.
I'm using WebForms C#, not MVC
Just an idea taken from the official MSDN page, remove the "return" (and maybe the semicolon too) keyword from the onClientClick declaration:
OnClientClick="ValidateSubmission()"
In a ASP.NET C# website I have an input that uploads a file to my server. To overcome the issue of not being able to style an input of the type=file I have created a styled div that looks like the input but actually just relays the message to the actual input which has display: none to be invisible.
My Problem: Relaying the message isn't working, ie, when I relay the click message to the actual input the file is never uploaded(nothing happens). I know the button works because if I click the actual input it uploads the file sucessfully.
Is there some ASP.NET security stopping me from being able to do this? Whats going wrong? How can I acheive what I am trying to do:
Have a style input where type=file(not a boring browse button) & relay the click to the actual input?
My actual input which works:
<input id="fileUpload" type="file" Runat="server" NAME="fileUpload"/>
<asp:button id="btnSave" OnClick="bt1Clicked"
runat="server" Text="Upload File"></asp:button>
<asp:label id="lblMessage" runat="server"></asp:label>
My styled button:
<a onclick="$(\'btnSave\').click(); return false;" href="#">test</a>
Not sure what your aiming at but this should work
<a onclick="$('<%= btnSave.ClientID %>').click(); return false;"
href="#">test</a>
Why? Because by default, asp.net gives controls its own id, which is defined by ClientIdMode. See also System.Web.UI.Control.ClientID
In my humble opinion, this would be a neater solution:
<a id="btnRelay" href="#">test</a>
Hook it up with JQuery separately, so your code isn't mangled with your html.
$('btnRelay').click(function(event){
event.preventDefault();
$('<%= btnSave.ClientID %>').click()
}
I am placing some ASP.NET html elements(that upload a file) inside a JQuery Dialog.
My Problem: When I click the button to upload the file, nothing happens. I create the query dialog dynamically AFTER the page has loaded. My solution is to place the HTML/ASP elements(for uploading a file) in a div at the bottom of the body of the page & set its display to none.
Then upon opening the dialog, I move the HTML/ASP elements into the JQuery dialog. But my problem is that when I click my ASP.NET button to upload the file from within the dialog, nothing happens?
Note if I click the button whilst its outside the JQuery dialog is sucessfully uploads the file.
Whats going wrong & how do I fix this? Is there an easier way to add ASP.NET code to a JQuery dialog AFTER the page has loaded?
This sits in the body
<div id="test">
<input class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only"
style="display: inline-block;" id="fileUpload" type="file" Runat="server"
NAME="fileUpload"/>
<asp:button id="btnSave" OnClick="bt1Clicked" style="display: inline;"
class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only"
runat="server" Text="Upload File" ></asp:button>
<asp:label id="lblMessage" runat="server" style="height:20px;width:390px;"
</asp:label>
</div>
Then on dialog open I grab the above HTML & move it into the dialog:
$(this.dialog).dialog('open' function()
{
var e = $("#test");
$(body).remove(e);
$(this).append(e);
});
jQuery UI dialog creates the dialog elements at the very end of the document, right before the closing </body> element. So when you open your dialog and move your content div#test into the dialog, it is outside the <form> and does not work anymore with asp.net which requires it.
Try to create your dialog and move it back inside the <form> element:
$("#myDialog").dialog({
...
}).parent().appendTo($("form"));
I have a lengthy asp.net page. An HTML table in the page has a link with <a>. when the link is clicked the page shows the textbox using javascript and takes me to the top part of the page. Instead, i want to see the part of the page that has the link and textbox. It should automatically scroll down to that part once the page refreshes. How is that possible?
I have tried using Linkbutton instead of but have issues with javascript.
Here is the code.
<script type="text/javascript">
$(document).ready(
function()
{
$("#aChangeDefault").click
(
function()
{
alert('hi');
//$("#<%=trChangeLoc.ClientID %>").fadeIn(1000);
$("#<%=rowChangeLoc.ClientID %>").fadeIn(1000);
}
)
$("#btnClose").click
(
function()
{
$("#<%=rowChangeLoc.ClientID %>").fadeOut(1000);
if(document.getElementById("<%=divSearchResult.ClientID %>").style.display != "none")
{
$("#<%=divSearchResult.ClientID %>").fadeOut(1000);
}
//$("#<%=trChangeLoc.ClientID %>").fadeOut(10);
}
)
}
);
The Linkbutton is here :
<asp:LinkButton id="aChangeDefault" runat="server" style="font-size: 12px;font-family:Arial;vertical-align:bottom;" ToolTip = "Click here to set your town as default location" Text ="Change Location" > </asp:LinkButton>
And the portion that shows up when the link is clicked is here:
<input id="btnClose" type="button" class="closeButton2" language="javascript" onclick="return btnClose_onclick()" />
<div style="display: inline-block;">
<span class="searchheadder" style="color: #000000; padding-right: 8px; padding-top: 4px;">
LOCATION: </span>
<asp:TextBox ID="txtChangedLocation" onkeyup="doCapitalize();" runat="server" Height="19px"
Width="200px" CssClass="textBox" Style="margin-right: 10px;"></asp:TextBox>
<cc1:AutoCompleteExtender ID="ACE1" runat="server" TargetControlID="txtChangedLocation" ServicePath="../AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="2" CompletionSetCount="10" EnableCaching="true" CompletionInterval="0" ></cc1:AutoCompleteExtender>
<asp:Button ID="btnGetNewList" BorderWidth="0" CssClass="searchButton" runat="server" OnClick="btnGetNewList_Click" /> </div>
Appreciate all your help. Thank you!
MaintainScrollPositionOnPostBack only affects the position of the page in your browser when a PostBack occurs, and if you're using JavaScript you don't want a PostBack to happen. If you're doing everything in JavaScript, it sounds like the problem is that when you click a link, the browser's default behavior is to follow the link, even if it's to a location on the same page. In some browsers, for the click event to register on an <a> tag, the href property must have a value, so it's common practice to use a blank anchor name as the href:
<a onClick="MyJavaScriptFunction()" href="#">Click here</a>
What this is actually telling the browser to do is to call your function MyJavaScriptFunction() and unless that function evaluates to false, it will then follow the anchor to the top of the page, which is where href="#" takes you. You can either finish your onClick with return false; or else change your JavaScript function to always return false, either way it will keep the browser from following the link:
<a onClick="MyJavaScriptFunction();return false;" href="#">Click here</a>
I'm not sure I understand what you're trying to do, but if the page is reloading perhaps you can use a named anchor to have the browser go to the section of the page you want automatically.
I have a file upload Control and I have made this invisible.
I want to enable a browse Button for that file upload control when I click another Button.
How can I do it?
First make a file up loader like this one
To upload a file you need to do 2 things
1) Select the file. (click browse button)
2) Send it to server. (click the upload button)
So first lets write a java-script to do these.`
<script type="text/javascript" >
function uploadImage() {
$('#MainContent_UploadButton').click()
}
function selectFile() {
$('#MainContent_FileUploadControl').click();
}
</script>
Now make the file upload controller upload itself as soon as a file is selected
<asp:FileUpload id="MainContent_FileUploadControl" runat="server"
onChange="uploadImage()" class="hidden"/>
Then make a new button and let it select the file as soon as it is clicked.
<asp:Button ID="MainContent_UploadButton" runat="server" Text="Upload File"
OnClientClick="selectFile(); return false;" />
The most important point is put "return false" in the onClientClick field. It will block the buttons post back and let you choose a file without refreshing the page.
Now hide the unwanted components using css and you are done !!
I think this is not possible. This would likely be a security issue if a script could upload (or at least trigger the upload process) invisible from any user interaction.
Update:
Seems that someone actually developed a solution to hide the upload control. From what I read it seems to take some effort to develop and uses JavaScript.
Personally, I wouldn't dare to guarantee that this works on all platforms (just imagine someone with a BlackBerry or Windows Phone visits your website...) and thus avoid it.
<asp:FileUpload ID="FileUpload1" runat="server" style="display:none;"/>
<input id="btnFileUpload" type="button" value="Add" runat="server" />
btnFileUpload.Attributes.Add("onclick", "document.getElementById('" + FileUpload1.ClientID + "').click();");