I have code (that works in another ASP.Net application) that I've added to a very simple page. It's supposed to show a spinner with the word "Loading" when a button (btnSubmit) is clicked. What it's doing, however, is showing the spinner and "Loading" the instant the page loads. Here's the aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/default.master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="SAM2.Test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function() {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({
top: top,
left: left
});
}, 200);
}
$('form').live("submit", function() {
ShowProgress();
});
</script>
<div class="loading" align="center">
Loading. Please wait.<br /><br />
<img src="/images/ajax-loader.gif" />
</div>
<asp:TextBox runat="server" ID="tbTest" />
<asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" />
</asp:Content>
In the code behind I have this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
}
}
I've tried adding this above the ShowProgress() function:
$(window).on('load', function () {
$("#loading").hide();
});
but it doesn't help. As I said, this works in another application. I"m no jquery guru, so what am I missing?
The hide method can't find a "loading" ID. Set the div ID to "loading", you may need runat=server as well.
<div class="loading" id="loading" runat="server" align="center">
In your script tag call it in the load function. This should hide/ fadeout the div id 'loading' when page loads.
<script>
$(window).load(function ()
{
$('#loading').fadeOut();
});
</script>
Related
I have a page with a frameset that consists of two frames; a top frame and a bottom frame. The top frame has a menu with submenus. The problem I am having is that the bottom frame does not allow the submenus to drop down as they should. I could expand the size of the top frame but management does not want this. Since it appears to not be possible to have the dropdown menu flow over the bottom menu, the best way I can think of to make it work is to hide the bottom frame while expanding the top frame. This is theory only though. I have never worked with asp.net or frames before so, to be honest, I'm not sure if it will work or not.
There is a separate page for the frameset and frames and it looks like this:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="dhss.mohsaic.webapplication.mohsaic.DefaultFrameset" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>MOHSAIC</title>
<link rel="shortcut icon" href="/Images/bavicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0" />
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0" />
<meta name="vs_defaultClientScript" content="JavaScript" />
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />
</head>
<frameset border="0" framespacing="0" rows="95,*" name="frameset" class="frameset" id="frameset">
<frame src="<%=HeaderFrameURL%>" scrolling="no" frameborder="0" noresize="noresize" name="fraHeader" />
<frame src="<%=EntireBodyURL%>" scrolling="auto" frameborder="0" noresize="noresize" name="fraEntireBody" id="bottomFrame" />
</frameset>
</html>
The the html of the menu, which in a separate file is:
<div>
<table id="tblAreaTabs" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px; padding-top: 0px" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td class="DarkHeader" width="100%" bgcolor="#000000">
<asp:Menu ID="mainMenu" Runat="server" Orientation="Horizontal"
DynamicMenuItemStyle-CssClass="ChildLink" StaticMenuItemStyle-Font-Underline="true" StaticMenuItemStyle-CssClass="ParentLink" StaticEnableDefaultPopOutImage="false"
style="text-align:center;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='black', Positive='true');">
</asp:Menu>
</td>
<td valign="middle" class="DarkHeader">
<asp:HyperLink ID="hlError" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
ImageUrl="/images/error.gif" BorderWidth="0px" Height="15px">The connection to DSS is not available.</asp:HyperLink><asp:HyperLink
ID="hlWarn" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
ImageUrl="/images/warn.gif" BorderWidth="0px" Height="15px">The connection to DSS is partially available. </asp:HyperLink>
</td>
</tr>
</tbody>
</table>
</div>
the submenus are created dynamically depending upon the login credentials of the user
I have tried several ways to do what I want to do. The first was to add onmouseover="whileHovering()" to the asp:menu tag and add the following javascript:
var origCols = null;
function whileHovering() {
//alert("Yes, I'm working");
if (origCols !== null)
showFrame();
else
hideFrame();
};
function hideFrame() {
var frameset = parent.document.getElementById("frameset");
origCols = frameset.rows;
frameset.rows = "120, 0";
};
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
};
However, this did not work. I receive the error 'cannot read property 'rows' of null. After investigating, the frameset is null and nothing I did would change that. So I gave up on that route and tried:
(function() {
alert("I have entered the function")
$('#mainMenu').hover(function () {
alert('hidden function working')
$(this).parent.document.getElementById('bottomFrame').style.visibility = "hidden"
}), function () {
alert('visible function working')
$(this).parent.document.getElementById('bottomFrame').style.visibility = "visible"
}
});
I get no errors from this but nothing happens. It doesn't even hit the anonymous function.
I would appreciate it if someone could tell me what I am doing wrong.
If you use frameset and frames you will have such problems. Writing JS/Jquery code is just a workaround and frankly not so good.
Any specific reason why you are using it?
Have you tried using ASP.NET master pages to have common menu and using it on different pages?
If that's not a feasible option, have you tried using iframe? In the main html file, create your menu and below the div/table tag of your menu, add an iframe. This iframe will show different pages that you are currently showing in #bottomFrame.
Do you put $ before (function() in your code? $(function() {}) fires when the document has been parsed and is ready, without it your function won't work. Also you don't need to use getElementById('bottomFrame').style.visibility in jQuery, there are quite short and elegant way to edit css rules, using css(property, value). Also don't forget to put ; in the end of your statements. The whole code looks like this:
$(function () {
alert("I have entered the function");
$('#mainMenu').hover(function() {
alert('hidden function working');
$(this).parent().css("visibility", "hidden");
}, function() {
alert('visible function working');
$(this).parent().css("visibility", "visible");
});
});
UPDATE:
If I understood you correctly you want to hide bottomFrame when hover on MainMenu, then use this code:
$(function () {
alert("I have entered the function");
$('#mainMenu').hover(function() {
alert('hidden function working');
$('#bottomFrame').css("visibility", "hidden");
}, function() {
alert('visible function working');
$('#bottomFrame').css("visibility", "visible");
});
});
I have implemented some web-page in ASP.NET. I want to add a progress bar to my page. Because the page takes several minutes to load.
I want to put show Progress bar function at the start of Page_Load function. And hide it at the end of the Page_Load function. How can I implement this?
Please give me some advice. Thank you in advance.
<%# Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 220px;
height: 20px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
text-align: center;
line-height: 20px;
}
</style>
<script type="text/javascript">
function ToggleProgressBar() {
var loading = window.jQuery('#loading');
if (loading.is(':visible')) {
loading.hide();
}
else {
var top = Math.max(parseInt($(window).height() / 2 - loading.height() / 2), 0);
var left = Math.max(parseInt($(window).width() / 2 - loading.width() / 2), 0);
loading.css({ top: top, left: left });
loading.show();
}
}
function blahblah(s, e) {
// some blah blah function contents
}
function blahblah2(s, e) {
// some blah blah function contents
}
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
**// TODO: Show Progress Bar**
DelayTime(); // dummy function to delay page load
**// TODO: Hide Progress Bar**
}
protected void DelayTime()
{
txt_delay.InnerText = "";
for (int i = 0; i < 3000; i++)
{
txt_delay.InnerHtml += i.ToString("0000") + ", ";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="txt_delay" runat="server"></span>
<div id="loading" align="center" runat="server">
Loading...
<%--<img src="/Images/progress-indicator.gif" alt="" />--%>
</div>
</div>
</form>
</body>
</html>
Another way would be to give your css a class. Then put a div as a placeholder where you want the window to show. Give the div an id and assign it's css class the id of your class and set the display attribute to none. Then when you are ready use a bit of jquery to change the display from none to say block. assuming you have done something like div id='myWait' display='none' class='mycssclass'
then jquery along the lines ('#myWait').attr('display','block');
Simple question: How do I refer to JavaScript code on a Master page file, (which is also on the same folder as many other ASPX pages), from one of my ASPX pages?
Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="JobRegister.master.cs" Inherits="JobRegister_Job" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Tec-NQ miJob Register</title>
<style type="text/css">
textarea { font-family: Arial; font-size: 10pt; }
a { white-space: nowrap; }
.tablestyle { background-color:#eeeeee; width:100%; margin-bottom:2px; padding:3px; }
.checkboxlist input { position:relative; left: 360px; }
.checkboxlist label { position:relative; left: -22px; }
.hidepanel { display: none; }
.showpanel { display: block; }
</style>
<script src="<%# ResolveUrl("~/") %>" type="text/javascript">
/*
Added : Variables required for image uploading & validation checking.
By : Amit Champaneri
On : 4th April 2008
*/
var hoverColor = "#00000b"; //DIV Color when mouse is hover the DIV
var defaultColor = "black"; //DIV default color
var selectColor = "#000000"; // DIV color when its selected.
var selectedDIV = ""; //ID of the DIV user has currently selected(it will be 1,2,3 or 4)
var objActiveX; //Object of Clipboard ActiveX control.
..
..etc..
My ASPX page has a reference to the Javascripts in the Master Page ...
ASPX page
<%# Page Language="C#" MasterPageFile="~/JobRegister/JobRegister.master" AutoEventWireup="true" CodeFile="Details.aspx.cs" Inherits="JobRegister_Details" %>
<%# Register TagPrefix="tecnq" TagName="JobAction" Src="ActionControl.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="JobID, CreatedBy" GridLines="None"
AllowPaging="True" DefaultMode="Edit" OnDataBound="FormView1_OnDataBound" OnItemCreated="FormView1_OnItemCreated"
OnItemUpdated="FormView1_OnItemUpdated" OnItemUpdating="FormView1_Updating"
HeaderText="Job Details" CellPadding="0" Font-Names="Arial" Font-Size="10pt">
<HeaderStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" Height="30px" />
<InsertItemTemplate>
...
..etc..
...
<img id="imgPaste1" src="Images/imgPaste.gif" class="LinkImage" title="Click here to Paste any copied Image" onclick="javascript:pasteOnClick('1');" />
..
..etc..
..
I got all this from a great blog on how to paste clipboard IMAGEs into a web form ...
http://www.codeproject.com/Articles/25967/Clipboard-ActiveX-for-Image-Copy-Paste-into-Web-Fo
The demo in the above blog works great, but both the Javascript and the ASPX code are all inside the same file!
How can I do the same with the Javascript in the MasterPage and have references to the scripts in my ASPx file?
I tried also to place all the code inside just my ASPX file but I get an invalid reference error on this line of code ...
document.getElementById("<%=hdnImageFileName1.ClientID %>").value = "";
It's saying it cannot find a reference to "hdnImageFileName1", but I know it's in my ASPX page further down ...
ie
<asp:HiddenField runat="server" ID="hdnImageFileName1" />
Thanks in advance.
The answer was like #deostroll said. I moved all my JS code into a custom.js file and referenced it simply via markup. Simple. Done! Thank you
i want to show hide div onclick jquery slowly when i click the button.this div will have result from database .i want it when it opened open with slow motion.
<head runat="server">
<title></title>
<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="script/jquery-1.11.1.min.js">
$(document).ready(function () {
$("#Button1").click(function () {
$("#showdivslowly").slideDown('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div runat="server" id="showdivslowly" style="width:500px; height:200px; background-color:Blue" visible="false">Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
Use the toggle function of jQuery:
<script>
$(document).ready(function () {
$("#Button1").click(function () {
$("#showdivslowly").toggle("slow");
});
});
</script>
Toggle function is used to show the div if it is hide and to hide if it is visible.
You can also pass the time in seconds in instead of "slow".
Few things:
You can't set a src in your script tag and then have script inside that - it must be closed:
Your buttons have a server generated ID (caused by runat="server") - so you need to use the ClientID
Your div doesn't need to include runat="server" - I suspect you're only doing this for the Visible="false attribute. Instead, use CSS
slideDown also takes a time in milliseconds as a parameter
<script src="script/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#<%=Button1.ClientID%>").click(function () {
$("#showdivslowly").slideDown(2000);
});
});
</script>
<div id="showdivslowly" style="width:500px; height:200px; background-color:Blue; display: none;">Welcome</div>
It appears that when the JQuery modal finishes loading it closes. None of the alerts in my script are appearing. Why doesn't it stay open? Any help would be greatly appreciated =)
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="JS/jquery.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function () {
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 600,
width: 800,
modal: true,
buttons: {
Cancel: function () {
alert("Cancel Button")
}
}
});
form = dialog.find("form").on("submit", function (event) {
alert("Submit");
event.preventDefault();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
});
</script>
-
<div id="dialog-form" style="display: none">
<asp:Panel ID="AddReference" runat="server">
<form action=# id="form">
<asp:GridView ...>
<Columns>
...
</Columns>
</asp:GridView>
<input type="submit">
</form>
</asp:Panel>
</div>
I've taken your code and placed it into a JSFiddle and the alerts fire for me.
Have a look at the fiddle to see it working:
Demo
Your issue could be caused by any number of things:
1) An incorrect reference:
Open your browser's developer tools (F12) and click on console. Any JS errors will be listed there. I'm sorry if this is basic but from your example you are linking to jQueryUI but there is no reference to jQuery. You have to have both to work and if jQuery is referenced incorrectly, in the JS console you will see:
$ is undefined.
2) Incompatible Versions:
If it is not a reference error, make sure that you have a stable version of jQuery and jQuery UI. (The latest version of jQuery UI (v1.11.0) requires jQuery 1.6+ for example)
3) A Postback:
If you are using a hyperlink to trigger the dialogue, you need to cancel the dialogue's default action using either:
Prevent Default:
$("#create-user").button().on("click", function (e) {
//somecode
e.preventDefault();
});
or Return False:
$("#create-user").button().on("click", function () {
//somecode
return false;
});
Please note: In the fiddle example I have changed the width and the height of the dialogue so it fits into the output pane.