I am creating a simple mvc application where the user uploads a document and clicks submit on a form to upload the file. I am trying to change the 'Upload' text to 'Pending' while the computer is uploading the document to the database (it takes five minutes).
I have something like this:
<input type="submit" class="btn btn-primary btn-block" value="Upload" onclick="this.disabled = true; value = 'Pending';" />
which changes the text of the 'Upload' button to 'Pending'. However, if the user clicks the 'Upload' button when the file has not been submitted the text of the 'Upload' button still changes to 'Pending', even though the computer is not uploading the document to the database.
Is there someway I can do this - with Javascript or something else?
you could create a custom 'button'
merely a pretty div, and attach a javascript function to its 'onclick' event.
next, in the javascript function you can either set the text of that div to "uploading" and
do a
document.forms.yourFormName.submit();
and get rid of your input button,
or make that button's visibility to "hidden"
and in the javascript use jQuery to find the button and do a
.toggle("click");
Try something like this
onclick="this.disabled = true; this.value= 'Pending';"
Although from server side change text of this one after file has been uploaded
And if you want to check file has a file or not
onclick="if($('#fileupload').val()!=''){this.disabled = true; this.value= 'Pending';}else{$('#fileupload').focus();}"
Using jQuery:
$("form").submit(function() {
$('input[type="submit"]').attr('disabled', 'true').val('Pending');
});
Or you can do:
$('input'[type="submit"]').click(function(e){
if ($('#upload').val != "") //if the input isn't empty (assuming id is called #upload)
{
$('input[type="submit"]').attr('disabled', 'true').val('Pending');
$('form').submit();
}
e.preventDefault();
});
So the submit button will only be changed to disabled and change value when then form is submitted, rather than just when the button is clicked.
Related
I have a MVC web application with two buttons - Save and Submit.
When a user first Submits and simultaneously clicks the Save button as soon as he clicks the submit button there is a error in the data send.
I am pretty new to programming and hence have no idea how can i avoid the simultaneous clicks.
Any suggestions on how i can handle this?
Thanks
You can do the following:
Have Submit button as “Submit” button (rendered in html as input type=“submit”)
Have Save button as normal button.
To have Save button rendered as normal button (rendered as input type=“button” you can have UseSubmitBehavior: False.
You can then use OnClientClick on one of the buttons and prevent the other button from being clicked.
Here you can get creative also. You can disable the clicked button and show “Saving ...” like below:
// its a button or document.getElementById
if (button.getAttribute('type') == 'button') {
button.disabled = true;
button.className = "inactive class";
button.value = "Saving, please wait. Have some peanuts while we save...";
Try disabling the Save button in the code of the Submit button HTML onclick=" ... "
Simple solution with jQuery:
$("[type='submit']").on("click", function (e) {
// !!!IMPORTANT!!!
e.preventDefault();
var $self = $(this), $form = $self.closest("form");
// Valid - before submit
if ($form.valid()) {
// Update text in button, ex: Sending..., Loading...
$self.attr("disabled", "disabled").html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw' aria-hidden='true'></i>Loading...");
// Block all inputs.
$form.find(":input:not([type=hidden])").attr("readonly", "readonly");
// Submit form.
$form[0].submit();
return true;
}
// !!!IMPORTANT!!!
return false;
});
I have two button in my cshtml page. When i click the first button data fetch from the database and bind it my controls. The records are many so the second button goes down, then i click the second button same thing happened fetch from the database and bind the grid, so the page is loaded then the page goes up. I want to stay same place when i click the second button. How to prevent it.
make your button like this :
<input type="button" id"button2" onclick="CallAjax();return false;"/>
//then in javascript
function CallAjax()
{
//your ajax call here to retrieve or update data
}
This is MVC 101...
Make your button a standard HTML5 button, which calls a JavaScript function on click...
<input type="button" id="goButton" value="Go »" onclick="goFunction();">
(I don't think you have to "return false" with a button, only with a submit)
Then, use Razor helpers in your view to do the Ajax call to the controller...
function goFunction() {
var url = '#Url.Action("MyActionMethodName", "MyControllerName")';
var settings = { 'some data': 'some values' };
$.ajax(url, settings);
}
See the JQuery Ajax page for more information about how to work the "settings" object.
BTW - sounds like you are "paging a grid" but you just forgot to say so... use a tool for that, such as Kendo. Paging is solved, don't solve it again.
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.
I am trying to auto submit form using webbrowser control. I am using the following code to submit"
currentElement.InvokeMember("submit");
Now this methods works fine. But sometimes a form may have some javascript function that is called on button click at the time of submission. So let's say if a form has some button image called "Submit" and when a user presses it, a javascript function somefunction() is called and then form is submitted.
Problem is when I use the above method InvokeMember then it only submits the form and doesn't execute associated scripts (in this case somefunction()) and I have to manually write code
webBrowser1.Document.InvokeScript("somefunction");
But this requires that I know before hand if there is some function. Is there any way I submit form and it will automatically run all associated javascript?
And I don't know button name or ID either which is clicked by user to submit form. Because in some cases it may not even have ID or name for e.g.
<span class="btn" onclick="somefunction()">
<img style="cursor:pointer" title="Submit" alt="Submit" src="http://stackoverflow.com/imagesbutton.png?2012">
<div id="s" style=""></div>
</span>
It's been a while since I have messed around with the WebBrowser control, but I used to make it jump through hoops for me. I've come across this issue in the past.
http://www.codeproject.com/Tips/60924/Using-WebBrowser-Document-InvokeScript-to-mess-aro
When you get a Form object, take the string out of the OnSubmit and run this to execute it before submitting the form:
object[] codeString = {"myObject.setVariable(0);"};
webBrowser1.Document.InvokeScript("eval",codeString);
Works like a charm.
If you know the name or id of the image tag you can use
webBrowser1.Document.GetElementById("button").InvokeMember("click");
or
webBrowser1.Document.GetElementByName("button").InvokeMember("click");
to call the associate function in javascript
I am working on an WebForms app, and we want to put a speed bump, for lack of a better term, in for the users at a particular point in the app. There is a particular action which is not supposed to be undone. So when they click the button to do that action we want to display a small confirmation window, have them enter a random string that we give them. Once they enter that string, and it matches the corresponding label, the submit button becomes enablesand they can perform the action. But for the life of me I can't figure out a good way to do this client side with WebForms. Is there a simple mechanism to use this type of workflow without a ton of post back events?
Note: This is an internal app where high security isn't truly a necessary requirement in this case. As I said, this is meant to be something to slow the user down slightly.
This is similar to the mint.com confimration style.
Add JavaScript to the textbox onChange or onKeyUp event, there do your check and enable the button.
For example:
<script type="text/javascript">
function checkConfirmationText(){
// Check if value of entered text = value of hidden text
var isOk = document.getElementById('confirmation-label').value == document.getElementById('confirmation-text').value);
// Show/Hide button depending on the text
document.getElementById('btn-submit').style.dispaly = isOk ? '' : 'none';
}
</script>
<!-- HTML -->
<input type="hidden" id="confirmation-label" value="DELETE" />
Enter "DELETE": <input type="text" id="confirmation-text" value="" onkeyup="checkConfirmationText()" />
<input type="submit" id="btn-submit" style="display:none" />
You could generate the javascript method to check the code (including the code in the method) server side and use registerclientscriptblock (or whatever the current method is), then use the onblur to call that method.