I've got a HTML input in my asp.net page:
<input type="file" name="image" accept="image/*" id="AttachMe">
This is all fine and dandy - it opens the file browse dialog etc.
However, what I would like to do is:
1 - make this invisible (if at all possible - if not I can just move it elsewhere in the page)
2 - trigger this from codebehind
I've got multiple rows in a datalist, each with a button on. The button loads up the relevant bit in C# which finds out which row we've pressed the button on. I then want it to load up the HTML file input.
Unfortunately, I can't simply put the HTML input in each row as we're talking about mobile handsets and space is limited (I tried). Plus I'd like to get the URL of the selected file (I think that's pretty easy to get anyway).
But mainly, I need to know just how to trigger the HTML file input from C# - so I can basically click the button and C# will then trigger the HTML file input for me.
EDIT - this is the code I now have:
My FileUpload:
<asp:FileUpload id="FileUploadControl" runat="server" />
The script to call it:
<script type="text/javascript">
function AttachAFile() {
document.getElementById('<%= FileUploadControl.ClientID %>').click();
}
</script>
This script is called from within the C# codebehind. It is called (I've tried it with alerts and calling other buttons).
However, it's still not calling the FileUploadControl for some reason. Anyone any ideas? I've come across similar topics which all seem to have worked out doing exactly the same as I'm doing (and the FileUploadControl does work on its own).
Related
I'm Writing a Selenium text case for an ASPX page. I want to click this ASP.NET asp:LinkButton element:
<asp:LinkButton runat="server" OnClick="Test_Click" Text="Just try to click me" ID="testtest123"></asp:LinkButton>
Which appears like this in the HTML page generated by .NET:
<a id="testtest123" href="javascript:__doPostBack('testtest123','')">Just try to click me</a>
But while Selenium has no problem finding the element, the Click() does nothing. I get no element missing exceptions or timeouts, the testcase just runs on as if the click fired properly.
Here's the simple line for clicking the element;
Browser.Driver.FindElement(By.Id("testtest123")).Click();
This code works fine with other ASP elements such as buttons and text boxes. I use C# to write my test cases using the 64 bit webdriver and IE 11.
I researched the solutions here: ASP.Net LinkButton Prevent Postback Not Working - JavaScript but they do not seem to apply to my situation:
Any help would be greatly appreciated!
EDIT: I posted another thread about the issue on this website:
https://code.google.com/p/selenium/issues/detail?id=7846&can=8&colspec=ID%20Stars%20Type%20Status%20Priority%20Milestone%20Owner%20Summary
I had a similar problem where some controls were rendered as espected and other don't, so are you sure the link ID is "testtest123"?
You have to set Client ID Mode to static in order to make the HTML ID be the same as in the .NET (the default is inherit, but in the web.config it is generlly set to be AutoID).
<asp:LinkButton runat="server" OnClick="Test_Click" Text="Just try to click me" ID="testtest123" ClientIDMode ="Static"></asp:LinkButton>
If the rendered HTML is actually <A id=testtest123 then that is not valid HTML since the attribute does not have quotation marks around the value. If this is actual value then the problem is further upstream than Selenium
One possibility is that selenium is correctly clicking the element, but that the linkbutton's javascript code is not executing quickly enough for the rest of your test. This is because when selenium encounters an <input type="submit"> tag (like asp.net button controls), it knows that it has to wait for the form submission before going to the next test step. However, a linkbutton is just an <a> tag, and worse, it has javascript as the href as opposed to a url. So it's possible that the postback javascript takes 50 milliseconds to execute or whatever, in that case, it's possible a test like this:
step n: click linkbutton - selenium does not know how long this takes so proceeds to next step
step n+1: click some button - if this happens before the js finishes executing, it would be like step n did not happen at all
This is plausible in the case of selenium because it operates at the speed of a program, whereas a human tester would never be able to click the next step quickly enough to cause such a problem. The fix for this is to add a delay step, or, to add a watch step on a javascript variable that you set on click of your linkbutton.
Edit:
Ok, so then this is not the issue. I'm almost positive it has something to do with the javascript in the href, though, so could you try the answer here: https://stackoverflow.com/a/18847713/1981387 ?
We want to reduce the number of steps it takes for a user to upload a file on our website; so we're using jQuery to open and postback files using the below markup (simplified):
<a onclick="$('#uplRegistrationImage').click();">
Change profile picture
</a>
<!-- Hidden to keep the UI clean -->
<asp:FileUpload ID="uplRegistrationImage"
runat="server"
ClientIDMode="static"
Style="display:none"
onchange="$('#btnSubmitImage').click();" />
<asp:Button runat="server"
ID="btnSubmitImage"
ClientIDMode="static"
Style="display:none"
OnClick="btnSubmitImage_OnClick"
UseSubmitBehavior="False" />
This works absolutely fine in Firefox and Chrome; opening the file dialog when the link is clicked and firing the postback when a file is selected.
However in IE9 after the file upload has loaded and a user has selected a file; insteaed of the OnChange working I get a "SCRIPT5 Access is denied" error. I've tried setting an arbitrary timeout, setting intervals to check if a file is given to no avail.
There are a number of other questions relating to this; however none appear to have a decent answer (One said set the file dialog to be transparent and hover behind a button!)
Has anyone else resolved this? Or is it absolutely necessary that I provide a button for IE users?
For security reasons, what you are trying to do is not possible. It seems to be the IE9 will not let you submit a form in this way unless it was an actual mouse click on the File Upload control that triggers it.
For arguments sake, I was able to use your code to do the submit in the change handler, but it worked only when I clicked the Browse button myself. I even set up polling in the $(document).ready method for a variable set by the change handler that indicates a submission should be triggered - this didn't work either.
The solutions to this problem appear to be:
Styling the control in such a way that it sits behind a button. You mentioned this in your question, but the answer provided by Romas here In JavaScript can I make a "click" event fire programmatically for a file input element? does in fact work (I tried in IE9, Chrome v23 and FF v15).
Using a Flash-based approach (GMail does this). I tried out the Uploadify demo and it seems to work quite nicely.
Styling a File Upload:
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
References:
jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?
IE9 file input triggering using Javascript
getting access is denied error on IE8
Hey this solution works.
for download we should be using MSBLOB
$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
var fileName = invoiceNumberEntity + ".pdf";
var pdfDownload = document.createElement("a");
document.body.appendChild(pdfDownload);
AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
window.navigator.msSaveBlob(fileBlob, fileName);
} else { // for other browsers
var fileURL = window.URL.createObjectURL(fileBlob);
pdfDownload.href = fileURL;
pdfDownload.download = fileName;
pdfDownload.click();
}
});
};
This solution looks like it might work. You'll have to wrap it in a <form> and get it to post in the jquery change handler, and probably handle it in form_load using the __eventtarget or and iframe or whatever it is that web forms uses, but it allows you to select a file, and by submitting the form, it should send it. I can't test it however, since I don't have an environment set up at home.
http://jsfiddle.net/axpLc/1/
<a onclick="$('#inputFile').click();">
Change profile picture
</a>
<div id='divHide'>
<input id='inputFile' type='file' />
</div>
$('#inputFile').change(function() { alert('ran'); });
#divHide { display:none; }
Well, like SLC stated you should utilize the <Form> tag.
First you should indicate the amount of files; which should be determined by your input fields. The second step will be to stack them into an array.
<input type="file" class="upload" name="fileX[]"/>
Then create a loop; by looping it will automatically be determined based on the input field it's currently on.
$("input[#type=file]:nth(" + n +")")
Then you'll notice that each file chosen; will replace the input name to the file-name. That should be a very, very basic way to submit multiple files through jQuery.
If you'd like a single item:
$("input[#type=file]").change(function(){
doIt(this, fileMax);
});
That should create a Div where the maximum file found; and attaches to the onEvent. The correlating code above would need these also:
var fileMax = 3;
<input type="file" class="upload" name="fileX[]" />
This should navigate the DOM parent tree; then create the fields respectively. That is one way; the other way is the one you see above with SLC. There are quite a few ways to do it; it's just how much of jQuery do you want manipulating it?
Hopefully that helps; sorry if I misunderstood your question.
Hi everyone I have a web form in which I am having a button on clicking which data back up is being taken, I used the following javascript :
<script language="javascript" type="text/javascript">
function showPleaseWait() {
document.getElementById('PleaseWait').style.display = 'block';
}
</script>
<asp:Button ID="btnTakebackup" runat="server" Text="Take Backup" Enabled="true"
onMouseDown="showPleaseWait()" CausesValidation="false" />
<div id="PleaseWait" style="display: none;">"Please Wait Backup in Progress.."</div>
Hi I am using a button to take a back up.
Now I want to show a message in btnTakebackup_Click() event, whether Back up was successful or not.
I used Response.Write("<script>alert('abcd');</script>"); in btnTakebackup_Click() event.
But the problem is that I want to show the page also, which is not showing instead white background is showing.
Thanks in advance...
To show a message box alert should be able to write out a new script to the response stream:
var script =
"<script type=\"javascript\">" +
"alert(\"Backup in progress, don't go!\");" +
"</script>"
Response.Write(script);
However much this is distasteful, I suppose it is sometimes "necessary".
You can add client side event handlers to ASP controls:
How to: Add Client Script Events to ASP.NET Web Server Controls
Cheers.
Do you really want it to be an alert? (You should know that they lock up the whole browser not just the tab your page is on), do your users really need to acknowledge the backup success by clicking ok or just be informed of it?...
I suggest you have a div on the page that says "Backup successful". The visibility of which can be set by a boolean property BackUpSuccess which you can set to true in the code behind you mention.
<div id="backUpSuccess" <%=BackUpSuccess ? "" : "style='display:none;'"%>>
Backup was successfull
</div>
...you can style the div as you like in your .css file to get attention.
If you really do want an alert you could run some JavaScript on page load to check the content of a hidden input that you set server side in similar fashion...but running javascript on page load is tricky...unless your using jQuery and then you will know it's very easy.
From your question, I understood that after clicking on the button, the data back up is happening, but the alert is not displaying as soon as you clicked the button.This is because you are calling the JavaScript in the button click event which will be fired only after all the code in the button click is executed.I suggest you to add a JavaScript function in the .aspx source page it self and call the JavaScript function as shown below:
<script ...>
function xyz()
{
alert('Please Wait');
}
</script>
and in button declaration
<asp:button id='btn_submit' runat="server" OnClientClick="return xyz();" />
I have a pretty simple web-form set up in .Net where I am leveraging jQuery for some of the functionality. I am using the DOMWindow portion for part of the presentation layer.
There is a login form in a div that is set to display:none. When a user clicks a button on the page, it displays the login form. However the .Net button for the login form will not fire it's event when display is set to none. If i take this out, it fires fine. I have also tried using the visibility attribute, but no luck.
the div code is:
<div id="Login" style="display:none;">
The launching code is:
click here to login.<br />
the jQuery code is:
function LaunchLoginWindow() {
$(document).append("#Login");
$.openDOMWindow({
loader: 1,
loaderImagePath: 'animationProcessing.gif',
loaderHeight: 7,
loaderWidth: 8,
windowSourceID: '#Login'
});
}
Any help or explanation that anyone can offer is appreciated.
I noticed i had some code in there defining a client-side function on the Login div. I removed this so as to eliminate it as a possible issue.
I can see in your code that you are appending the div #Login but not setting its style property back to normal like block so. Set it back to block and i am sure it will work
try adding somthing like:
$(document).append("#Login").show();
OK, after playing around with this using firebug, I found the issue: When the jQuery plug-in DOMWindow creates its display layer, it appends to the HTML node of the DOM, which places the control outside the asp.net form tag. Therefore the button and actions associated with it via the DOMWindow are not recognized by .Net. So i edited the DOMWindow source file to append to the DOM form node rather then the html node.
The drawback is that the source has now been customized and will have to be QA'd thoroughly, especially if any further changes are made. But I hope to manage this effectively via commenting in the file.
Hope this helps anyone else who hits this issue.
pbr
I have an asp button that produces this html:
<input type="submit" name="ctl00$m$g_a2ba5666_c8e9_4bd7_a44a_f9407dbe2199$ctl00$btnAddWebPart" value="Add Report" id="ctl00_m_g_a2ba5666_c8e9_4bd7_a44a_f9407dbe2199_ctl00_btnAddWebPart" />
When the button is submitted and the page_load method is hit, I am trying to do this:
String target = Page.Request.Params.Get("__EVENTTARGET");
but, for some reason 'target' is empty. I checked to see if __EVENTTARGET is getting populated and it is an empty string. Any ideas as to why this is happening? It is something really silly.
Thanks.
Wrap this button up in an ajaxtoolkit update panel. that way you can update the various page components (add / remove your web parts) within an async call.
This means that the page is partially rendered instead of it being the result of a full postback.
I agree with Josh on this ... handling the event in this way is ugly and against the intended purpose of this part of asp.net from microsoft.
partial postbacks dont result in that ugly flicker effect so this should produce the result you want and not effect the rest of the page.