i'm trying to show the progress bar while uploading. I have a gif image that has a class with the property display:none and on button click I switch the property to display: block using javascript.
this is my function.
function showProgress() {
$('#uplImage').css('display','block')
}
this is the image class
.uplImage {
display: none;
margin-left: 100px;
z-index: 999;
position:absolute;
margin-top: -800px;
}
this is my button
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="submit"
Height="35px"
Width="100px" OnClick="btnSubmit_Click" OnClientClick="showProgress()"
ValidationGroup="validate" />
gif image doesn't show.
When pressing on asp button it would postback to the server side. So the thing is that you image does appear for a millisecond and then the postback is send
If you want to show an upload image while the file is uploading you need to use ajax.
If you want to show a progress bar, you need to post the files asynchronously using ajax. Right now you're simply posting the form back to the server, of course nothing shows up :)
Related
I have a page with a jqGrid. On that grid I've added a custom button to the pager that, when clicked, opens a file browser for the user to upload an excel file. The file input is wrapped in a form and targeted to a hidden iframe.
I know that in Internet explorer, you cannot submit a file using javascript. I'm trying to figure out a way to submit the iframe and actually get the file to pass to the server with a value.
In chrome I'm able to submit it by triggering a click on a submit button I have way off the page on file input change and get the file, but in Internet Exploder it comes back null.
HTML:
<form action="/ManagedCatalog/ImportContractsFromExcelFile" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="">
<input type="file" id="uploadedFile" name="uploadedFile" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<input type="submit" id="submitBtn" name="submitBtn" value="Upload" style="position: absolute; z-index: 19999; top: -1000px; left: -1000px;"/>
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width: 0; height: 0; border: 0px solid #fff;"></iframe>
The custom nav button fires this:
function ImportContractsFromExcelFile() {
$('#uploadedFile').trigger('click');
}
And what I've got to work in Chrome:
$('#uploadedFile').change(function () {
$('#submitBtn').trigger('click');
});
Any tips, tricks, advice, reviews, or beatings are fully encouraged.
plz help.
Edit:
I'm doing it this way, because the silverlight app my team and I are rewriting acts this way and the client would like to keep this behavior. I may go down a jquery dialog window route and give the user a button to click, but I'd like to try and keep it as similar as possible.
I am generating excel file from sql database, sql datatable contain 50k data so that file took long time to download. so i want to display one waiting dialog box to user while downloading that file. Any suggestion?
you can try the way I did it using jquery. this will show a loading image during a long process.
Add a gif(loading image) in your _Layout.cshtml. Put this inside the body.
<div id="loaderblock"></div>
<div id="loadercontainer">
<img src="~/Images/sampleloadingimage.gif" />
</div>
add this to your Site.css
#loadercontainer { display:none;position: fixed;margin-top: 20%; margin-left: 45%; z-index: 999999;}
#loaderblock {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
add this javascript in your view.
function generateexcel() {
$('#loaderblock').fadeIn();
$('#loadercontainer').fadeIn();
$("#idofyourform").submit(); //submit your form
}
and change your submit button to something like this:
<input type="button" value="Generate Excel" onclick="generateexcel();" />
this sample will show you how it works: sample
that is not my issuse.i want that loading image display only while the file is downloading.when file is successfully download and save dialog appear on browser at that time loading image should disappear automatically.
In my Asp project,..
I have used Icon file in Button. But those Icons not fit to Buttons. It half of the height only visible.
My Code is..
<asp:Button ID="btnCoverPlus" runat="server"
style="background-image: url('Images/plus.ico'); background-repeat:no-repeat; background-position:center; width:32%; font-size:medium;"
Height="25px" onclick="btnCoverPlus_Click" /> <br />
How to fit the Icons in ASP buttons?.
The obvious is to change the icon side, but you can also try to auto resize it with the style by adding :
background-size: 100% Auto;
or direct set the size
background-size: 16px 16px;
please note that only CSS 3 supports that.
try to increase button height by changing Height="25px property
I am using ASP.NET in my project. In that I have add a Button With Background Image.
But Image is Locating on Button Left Site As the Below Image Show. I want to make This Image in Very near to the Text.(As I Marked). The Text is in Center of the Button. Is any Way to Do This?.,
COde -
<asp:Button ID="btnKotAdd" runat="server" Text="Kot Addtion"
onclick="btnKotAdd_Click"
style="margin-left: 10%; background-image: url('Images/add.png'); background-repeat:no-repeat; height:35px;"
width="80%" Font-Overline="False" />
Thanks In advance.
You have to adjust the background-position of your button image as per your requirement. like this:
style="margin-left: 10%;
background-image: url('Images/add.png');
background-repeat:no-repeat;
height:35px;
background-position:30% 0;"
<asp:ImageButton ID="btn_Send" runat="server" ImageUrl="Styles/Images/send_message.png"
ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" />
I have this button in my website, how can I change image when the user hover over the image or when the user clicks the image, I want to show the user the button is clicked. So I have created another image for send_message.png(1) which looks like clicked, so when user hover over of clicks the image I want to display send_message.png(2)
<asp:ImageButton ID="btn_Send" runat="server" CssClass="myButton"
ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" />
CSS
.myButton{
background:url("Styles/Images/send_message.png") no-repeat scroll 0 0 transparent;
}
.myButton:hover{
background:url("Styles/Images/send_message2.png") no-repeat scroll 0 0 transparent;
}
if you can make a one image with using both images, it will be more easier.
.myButton{
background:url("Styles/Images/send_message.png") no-repeat scroll 0 0 transparent;
}
.myButton:hover{
background-position:bottom;
}
To change image in click event, you can add this on your buttonclick
btn_Send.Attributes.Add("class", "some-class");
and in your css
.some-class{background:url("Styles/Images/send_message2.png") no-repeat scroll 0 0 transparent !important;}
Try this
<asp:ImageButton id="ImageButton1" runat="server" ImageUrl="Images\1.gif"
OnMouseOver="src='Images/2.gif';"
OnMouseOut="src='Images/1.gif';">
</asp:ImageButton>
Use javascript on mouse over event.
See it here!
Try this:
<asp:ImageButton ID="btn_Send" runat="server" ImageUrl="Styles/Images/send_message.png" ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" onmouseover="this.src='button2.jpg'" onmouseout="this.src='Styles/Images/send_message.png'"/>
Add following lines at page_load event in your code page.
Image1.Attributes.Add("onmouseover", "this.src='originalPic.jpg'");
Image1.Attributes.Add("onmouseout", "this.src='newPic.jpg'");