I have a form where the submit function takes several minutes. I'd like to display an animated gif while the submit is cranking. The code below shows the gif, but it doesn't move. What can I do to get it going?
<script type="text/javascript">
$(function() {
$("#submit").click(function() {
$("#wait").show();
return true;
});
});
</script>
<% Using Html.BeginForm%>
<%-- Various input fields here --%>
<input id="submit" type="submit" value="Submit" />
<img id="wait" src="../../Content/images/ajax-loader.gif" alt="" style="display: none" />
<% End Using%>
This problem is happening only in IE, correct? Rick Strahl discussed this on his blog some time back. Be sure to read the comments.
Animated GIF images in hidden page elements
Followig Josh's link I was able to get it to work using:
setTimeout('document.images["loadimage"].src = "../Images/loading_bar.gif"', 200);
In case anybody is still having this issue in IE (and Edge now), I managed to fix the issue by doing the following
Give the following HTML:
<div id="loader" style="display:none;">
<img src="/loading-spinner.gif" alt="Loading">
</div>
and the following Jquery:
function ShowLoadingScreen {
$("#loading-screen").show();
}
adding in the following line fixes the issue:
$("#loader").html($("#loader").html());
so you're left with
function ShowLoadingScreen {
$("#loader").html($("#loader").html());
$("#loading-screen").show();
}
Related
Here's my case: I'm developing a little widget, and I was looking for a way to hide/show different DIVs on selecting a set of radio buttons. I found the proper code and adjusted it to my needs. The only problem is that the hide/show feature stops working after clicking on save while configuring the widget :S
Here's the JS:
jQuery(document).ready(function($) {
$(document).ready(function() {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="link_to_image"){
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page"){
$(".radio-option").hide();
$(".linked-page").show();
}
});
});
});
And the HTML:
<p>
<label>Link:</label><br>
<label>
<input type="radio" name="link_to" value="link_to_image">
Link to image
</label><br>
<label>
<input type="radio" name="link_to" value="link_to_page">
Link to page
</label>
</p>
<div class="linked-image radio-option">
<label for="linked_image">Linked image:</label>
<p>
Content for linked_image DIV
</p>
</div>
<div class="linked-page radio-option">
<label for="linked_page">Linked page:</label>
<p>
Content for linked_page DIV
</p>
</div>
And the [JSFiddle] (http://jsfiddle.net/ccwsy5z4/)
Could you give me a hand with this, guys?
So finally I found out that the problem was that the JS stopped working after the AJAX started by clicking on the Save button.
And the solution for that was to recall the JS function after AJAX finished it job. To do that first I had to give a name to the JS function, called it after that, and then call it again after AJAX stopped. Like this:
jQuery(document).ready(function($) {
function radioButtonShow() {
if($(this).attr("value")=="link_to_image") {
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page") {
$(".radio-option").hide();
$(".linked-page").show();
}
};
$('input[type="radio"]').click(radioButtonShow);
$(document).ajaxStop(function() {
$('input[type="radio"]').click(radioButtonShow);
});
});
Hope this may be useful to somebody :)
I have done a lot of research before posting it in here. So, here I got few imperfections.my link
Question 1: How do I make CV button to automatically pop-up the pdf resume or cv. So after I get this done, I won't need div saying lorem as a hyperlink.
Under the navigation class:
<li>CV</li>
When I replace #cv from href with a pdf link, the whole website goes wrong.
Thats it for now. Thanks in advance!
Javascript:
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</script>
HTML :
<li><a href="" onclick="return popitup('cv.pdf')" >CV</a></li>
I've been looking on the internet for solutions as to why IE7 isn't opening links correctly for example
<button class="class1">Google</button>
Does IE7 not like having ?
I hear I should use jquery for this? But no one linked to any article.
According to the W3C's specifications on anchor (<a>) tags and <button> tags, you should be able to do that fine, but according to a quick Google search, you can't and/or shouldn't do it, and it doesn't work in Internet Explorer.
This article actually recommends adding Javascript, so the link can be opened in IE also:
<button type="button" onclick="window.location('http://www.expertsguide.info/')">Click Me to go to Experts Guide</button>
Although you can, you shouldn't have a button (<button>) inside anchor (<a>).
Add an event handler to the button like this:
<input type="button" value="Google" onClick="javascript:location.href = 'http://google.com';" />
Note: you should considered not doing this, for a variety of reasons. Bottom line you can (and should) style your <a> element to look like a button.
You're better off not using a button inside a hyperlink.
Style the hyperlink to look like a button.
Try these
http://www.webresourcesdepot.com/css3-buttons-10-awesome-ready-to-use-solutions-all-related-tutorials-you-need/
Try this:
<script>
$(document).ready(function() {
$('.class1').click(function() {
window.location = $(this).parent().attr('href');
return false;
}
});
</script>
Or simply remove the button tag and use this:
<script>
$(document).ready(function() {
$('a').click(function() {
window.location = $(this).attr('href');
return false;
}
});
</script>
To be JavaScript independent (so that it also works on browsers with JS disabled, in contrary to many other answers here), I'd suggest to just wrap it in a <form> the usual way and make it a <button type="submit"> (or <input type="submit">) instead.
<form action="http://www.google.com">
<button type="submit" class="class1">Google</button>
</form>
or
<form action="http://www.google.com">
<input type="submit" value="Google" class="class1" />
</form>
I have a webform on which i display all the details of a particular record now i want to give my client print functionality so he can print those detail. Can this be done in asp.net and if yes then how?
You can use css to specify stylesheets to use for printing. There's not really anything asp.net specific about it - it's handled by the browser.
http://www.alistapart.com/articles/goingtoprint/
Based on what I understood, you want to print part of the page, right?
One option is to use a pop up a new page with content to be printed passed from the current page and let the user print it from the pop up page.
Please refer the following demo:
Print Demo
<script language="javascript" type="text/javascript">
function doPrint()
{
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="WithoutPrint">
This area will not print!
</div>
<div id="Print">
<!--startprint-->
This area will print!
<!--endprint-->
</div>
<input id="btnPrint" type="button" value="Print" onclick="doPrint()" />
</form>
</body>
</html>
Hope it helps...Thanks.
Using CSS, when a link is clicked it brings up a hidden DIV that contains a form. The user will then enter information and then submit the form. I'd like the hidden DIV to remain visible, and a 'success message' to be displayed after submission. Then the user will have the option of closing the DIV. I can't get it to work without reloading the page, which causes the DIV to become hidden again. Any ideas?
<body>
Click Me
<!--POPUP-->
<div id="hideshow" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv()">
<img src="images/icon_close.png" class="cntrl" title="Close" />
</a>
<h3>Remove Camper</h3>
<form method="post" onsubmit="email.php">
<p><input name="Name" type="text" /></p>
<p><input name="Submit" type="submit" value="submit" /></p>
</form>
<div id="status" style="display:none;">success</div>
</div>
</div>
</div>
<!--END POPUP-->
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>
</body>
Forms by default submit content by changing to the specified page in its 'action' attribute. You will need to build additional scripts to prevent it from doing that and submit the data using either AJAX or jQuery then process the result.
Or you could simply use whatever language you're programming in to set the default visibility for the division. If the form data exists, display it by default, otherwise hide it by default.
How about using an AJAX call to post the form instead of posting back the whole page?
Instead of using a "submit" type for your button, you can use a "button" type and use a script called by onclick which will use ajax to submit the form and do whatever is necessary.
This defeats slightly the meaning of a form, but works well. You might also want to think about using a javascript library like prototype or similar (jquery, etc) that gives you the functionality to create a get or post array of your form in order to make it easier.