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
Related
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>
Good Morning
I have a webpage with a button pad on it. It is used at a gas station with bad network so everytime they click on the button to add a number to the textbox it will load forever so I changed the button clicks to javascript.
It works perfectly but now the code behind gets an empty value (Not null) when i retrieve the value from the textbox.
This is my code
The buttons used to add the numbers to the textbox
and the textbox
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OVKWEBAPP.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="mainstyle.css" />
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
/*background-color: black;*/
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtRknr" runat="server" CssClass="txtBoxRknr" PlaceHolder="Rekening Nommer" Enabled="False" autocomplete="off" Width="175px"></asp:TextBox>
<input type="button" id="btnPad1" runat="server" value="1" class="buttonsb" onclick="input(this);"/>
<input type="button" id="btnPad2" runat="server" value="2" class="buttonsb" onclick="input(this);"/>
<asp:Button ID="btnMsg1" runat="server" Text="Gaan Voort" CssClass="buttonsa" OnClick="btnMsg1_Click" />
</form>
</body>
<script type="text/javascript">
function input(e) {
document.getElementById("<%=txtRknr.ClientID %>").value = document.getElementById("<%=txtRknr.ClientID %>").value + e.value;
}
</script>
</html>
And this is my code in the code behind file
protected void btnMsg1_Click(object sender, EventArgs e)
{
lblError.Text = "";
//string user = txtRknr.Text;
string user = ((TextBox)FindControl("txtRknr")).Text;
if(user == "")
//if (txtRknr.Text == "")
{
lblError.Text = "ONGELDIGE REKENING NOMMER";
return;
}
}
Basically all this needs to do is add an account number to a textbox from an button pad on the website.
After the account is added they would click on continue button and then the code behind checks if the textbox is empty if it is not empty it connects to database to check if it is valid.
But no matter how many numbers i add to the textbox it is still empty when i access it from code behind.
Enabled="False" means that your input field will have a disabled attribute. Disabled form elements do not get posted in HTML forms, which means that when you access it from the code-behind, it's using the default value of the textbox.
Try ReadOnly="True" instead of Enabled="False" if you don't want the field to be edited by hand.
EDIT
I guess ASP.NET prevents you from reading the value from a ReadOnly=True textbox, to prevent you from doing exactly what you're trying to do. A <asp:HiddenField> creates an <input type="hidden">, which you should be able to write the value and have it posted properly to the codebehind.
In the line
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OVKWEBAPP.WebForm1" %>
replace in Inherits="OVKWEBAPP.WebForm1" with Inherits="OVKWEBAPP.default"
try this.
Request.Form["by-name-attribute"];
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');
I am displaying a floating feedback form in my website and using JQuery to handle the slide in and out functionality. Following is the code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SlidingWindow.Default" %>
<%# Register TagPrefix="ajax" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<!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></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<form id="form1" runat="server">
<asp:ScriptManager runat = "server"></asp:ScriptManager>
<div class="feedback-panel">
<asp:UpdatePanel ID="UpdatePanel1" runat = "server">
<ContentTemplate>
<a class="feedback-tab" href="#"></a>
<asp:Panel ID = "panel1" runat = "server">
<table>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="Label1" runat = "server" Text = "Name"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtName" CssClass = "feedbacktextbox"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="lblEmail" runat = "server" Text = "Email"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtEmail" CssClass = "feedbacktextbox"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="lblFeedback" runat = "server" Text = "Comments"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtFeedback" TextMode="MultiLine" CssClass = "width"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Button runat = "server"
ID = "btnFeedbackSubmit" Text = "Submit" onclick="btnFeedbackSubmit_Click" />
</td></tr>
</table>
</asp:Panel>
<asp:Panel ID = "panel2" runat = "server"><asp:Label runat = "server" ID = "lblFeedbackMsg"></asp:Label></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
var feedbackTab = {
speed: 300,
containerWidth: $('.feedback-panel').outerWidth(),
containerHeight: $('.feedback-panel').outerHeight(),
tabWidth: $('.feedback-tab').outerWidth(),
init: function () {
$('.feedback-panel').css('height', feedbackTab.containerHeight + 'px');
$('a.feedback-tab').click(function (event) {
if ($('.feedback-panel').hasClass('open')) {
$('.feedback-panel')
.animate({ left: '-' + feedbackTab.containerWidth }, feedbackTab.speed)
.removeClass('open');
} else {
$('.feedback-panel')
.animate({ left: '0' }, feedbackTab.speed)
.addClass('open');
}
//event.preventDefault();
});
}
};
feedbackTab.init();
});
</script>
<style type="text/css">
.feedback-panel {
padding:5px;
width: 250px;
background:#C4C4FF;
border: 5 solid #8080FF;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
color: White;
position:fixed;
top:77px;
left:-261px;
}
.feedback-panel a.feedback-tab {
background: url(/images/feedbackbutton.gif) no-repeat scroll 0 0;
display:block;
height:122px;
left:45px;
bottom:5px;
position:relative;
float:right;
text-indent:-9999px;
width:40px;
outline:none;
}
.feedbackformtable
{
width: 215px;
}
.feedbacklabel
{
font-family: Arial Helvetica Sans-Serif;
font-size: medium;
color: Black;
}
.feedbacktextbox
{
width: 200px;
font-family: Verdana;
font-size: 12px;
border: 1px solid #8080FF;
}
</style>
The form is used to send feedback as an email. As soon as the submit button is clicked, the form is closed. Is there any way to keep the form open after clicking the submit button? I want to display a message on the form instead of closing it. Much appreciate any help.
Thanks.