We have lots of internal websites that could use a little standardization. I am looking to add a common banner page to all websites for a couple of reasons -
Consistent look
Easily update Banner logo
Display announcements like server maintenance ones
We have IIS and ASP.net. I did do work around where I have the banner page as a free standing html page that sits on top of the existing site, but I'm sure there is a better way around. I don't want to go the way of master pages mainly because it changes the control ID's of pages and we have several sites that use JQuery and Javascript that would break when the control ID's change.
You can create a javascript function as below and update body tag of all pages to call that function like onload="onAllPageLoad()"
function onAllPageLoad() {
$('body').prepend('My common banner HTML elements');
}
This shall put your banner html elements as the first elements in the body tag.
I was able to hack up a solution by using Jquery get function to splice the Banner page with the site page. The caveat being, each of the internal website pages must carry the get function for a uniform look. Since most of our sites are single page apps, this works for now. I have some site specific info that I want to add to the banner and any updates to the banner page are reflected on the site page.
Here is the code I came up with -
Banner.htm page:
<table width="100%" border="0">
<tr>
<td style="width: 30%" align="left">
<a href="http://SiteHomePage">
<img alt="Site Home" border="0" src="http://SiteHomePage/img/SiteHomePagelogo.png"
width="119px" height="67px" /></a>
</td>
<td style="width: 70%">
<table width="100%">
<tr>
<td style="text-align:left;">
<div id="SiteName" style="font-weight: bold; font-size: 30px;">
</div>
</td>
<td>
<div id="ExtraInfo" style="float: right; font-weight: bold; font-size: 15px;">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Default.aspx Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--Script to add banner page starts here--%>
<script runat="server">
<%--Fetch site specific info from the site web.config --%>
string SiteInfo =
ConfigurationManager.AppSettings["SiteInfo"];
string PageTitle =
ConfigurationManager.AppSettings["PageTitle"];
<%--BannerURL value is Banner.htm--%>
string BannerURL =
ConfigurationManager.AppSettings["BannerURL"];
</script>
<script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var extraInfo = '<%= SiteInfo %>';
var title = '<%= PageTitle %>';
var BannerURL = '<%= BannerURL %>';
$(document).ready(function() {
$.get(BannerURL, function(data) {
$("#Banner").html(data);
$("#SiteName").html(title);
document.title = ":: " + title + " ::";
$("#ExtraInfo").html(extraInfo);
});
});
</script>
<%--Script to add banner page ends here--%>
</head>
<body>
<form id="form1" runat="server">
<div id="Banner">
</div>
< %--Add site code here--%>
</form>
</body>
</html>
Related
I have an .aspx in which there is one anchor tag whose href property is set by the server side code i.e. DataTable.
My site url is : [xxx/Pages/Home.aspx] and suppose the href from the DataTable is bound http://www.google.com then the link redirects to [xxx/Pages/http//www.google.com] instead of http://www.google.com . Somehow it prefixes relative url of page.
My ascx file is :
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<asp:ListView ID="Feed" runat="server">
<ItemTemplate>
<div class="Main">
<div class="Ttile">
<a href="<%# Eval("Link") %>" target="_blank" title="<%# Eval("Title") %>" ><%# Eval("Title") %></a>
</div>
</td>
</tr>
</table>
I want to redirect the user to http://www.google.com when user clicks on the link but the anchor tag redirects to http://xxx/Pages/http//www.google.com
If I put <%# Eval("Link") %> outside the anchor tag then it displays the proper url like : http://www.google.com. It means the data in "Link" column is perfect
How should I tackle this issue?
try this one
<%# RemoveServerUri(Convert.ToString(DataBinder.Eval(Container.DataItem, "Link")))
C#
public string RemoveServerUri(string link)
{
link = link.Replace("xxx/Pages/", "");
return link;
}
<script>
function ShowCommentBox() {
$("#dialog").dialog({ modal: true });
}
function GrabDetails() {
var obj = jQuery.parseJSON('{"name":"John"}');
$("#item").val(obj.name);
}
</script>
<div id="dialog" title="Comments" style="display:none;">
<table class="detailstable FadeOutOnEdit">
<tr>
<th>Item</th>
</tr>
<tr>
<td><asp:Label ID="ItemIdLabel" Text="item" runat="server"/></td>
</tr>
</table>
</div>
<input id="SubmitCommentsToInvoice" type="button" value="Comments" onclick="ShowCommentBox()" />
In my asp.net project when the user clicks the 'Comments' button the div appears containing the label.
I'm trying to use JSON to display the string "John" - stored in them #item object in the 'GrabDetails()'
Then in the label text="" How do I pull across the value stored in the #item object.
Thanks
#item is an ID selector in jQuery, which there is no element here with ID "item". Also, <asp:Label /> renders from the server as html in a different way. However, it appears you are not using this label on the server side at all? if this is the case i would just make an html element like
<td id="WhereNameGoes"></td>
then
function GrabDetails() {
var obj = jQuery.parseJSON('{"name":"John"}');
$("#WhereNameGoes").text(obj.name);
// this still needs to be called somewhere, perhaps in ShowCommentBox()?
}
jQuery $.val() is more for <input /> elements
I need to open a page like a modal dialog .I find an exemple on net but it doesn't work.
In the main page I have this code:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Button Text ="Add New Course" runat="server" ID="btnAddCourse" OnClientClick="showPanel('dialog');return false;"/>
<script type="text/javascript">
function showPanel(panelID) {
$panel = $('#' + panelID);
$.ajax({
url: "/AddNew.aspx",
type: "GET",
dataType: "html",
async: false,
data: { "param": "abcd"
},
success: function (obj) {
// obj will contain the complete contents of the page requested
// use jquery to extract just the html inside the body tag
$content = $(obj).find('body').html();
// then update the dialog contents with this and show it
$panel.html($content);
$panel.dialog();
}
});
}
</script>
<div id="dialog">
</div>
</asp:Content>
When I click the button I need to open the page below .I receive an error that tell that element $ is not recognized.I don't know exactly who is element panel .Must I add a panel control ,but where ?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="AddNew.aspx.cs" Inherits="WebApplicationDialog.AddNew" %>
<!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>Add New Course </title>
</head>
<body>
<form >
<div id="div1">
<table>
<tr><td colspan="3"> <asp:Label ID="lblCourse" runat="server" Text="Add New Course"></asp:Label></td></tr>
<tr><td colspan="3"> </td></tr>
<tr>
<td style="width:40%"> <asp:Label ID="lblName" runat="server" Text="Course Name" ></asp:Label></td>
<td style="width:20%"> </td>
<td style="width:40%">
<input id="txtName" type="text" />
</td>
</tr>
<tr>
<td style="width:40%"> <asp:Label ID="lblDescription" runat="server" Text="Description" ></asp:Label></td>
<td style="width:20%"> </td>
<td style="width:40%">
<input id="txtDescription" type="text" />
</td>
</tr>
<tr><td colspan="3" style="float:right">
<input value ="Save" id="btnSave" type="submit" /> </td></tr>
</table>
</div>
</form>
</body>
</html>
Can somebody help me with this code ,to make it works ?
Thanks
It looks like you are trying to use JQuery to load a page content into a panel but if I'm reading your code right you may not have included the JQuery library, you need to include this line of code in the <head> of your html code. You are also using JQueryUI dialog and will need to reference the JQueryUI library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
For Example
<head>
<title>Page Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<head>
EDIT: I also notice you are using the dialog, which is in JQuery UI, pleasse make sure you reference JQuery UI toolkit as well
EDIT: Have stripped your code into jsFiddle: http://jsfiddle.net/EhPk7/1/
this seems to work for me
You need to add jquery lib reference.
At the top of a page:
<script src="http://code.jquery.com/jquery-1.8.2.min.js"/>
Include jQuery.
Change this line -> $panel = $('#' + panelID); to -> $panel = $('#div1'); and see if it works.
Consider adding jQuery script references on your page, above the jQuery Code that you are using.
Also, add reference jQuery UI
Download jQuery
There is a boolean property/setting called modal on the jQueryUI dialog, this will create a modal-type dialog.
I myself use this:
d.dialog({
autoOpen: true,
closeOnEscape: false,
closeText: '',
modal: true,
draggable: false,
resizable: false,
width: (window.document.width * 0.75),
dialogClass: 'popup loading',
title: 'title'),
});
when you wrap this sort of function in the
$(document).ready(function() {
})
it should popup the moment the DOM is ready..
Design mode has this problem site-wide since upgrading to .NET 4.0 / VS 2010 from 1.1 / 2003.
There's plenty to google on this and I've tried it all. What am I missing?
-Trying to debug from another instance of Visual Studio: Error Creating Control vs2010 MasterPage - there's not a whole lot of detail on how this is supposed to work. I started another empty instance of VS2010 and attached to devenv.exe. Set Debug->Break All. Switched to design mode in the website instance of VS. Ran the website instance of VS in debug mode. Nothing happens. I was hoping this could help because I DO have some user controls in the page. I can't find anything wrong with them though. Can I get more detail on how exactly to do this type of debugging? See the end of this post for the .aspx source.
-Commented out some <% =Session["Username"]%> junk in the tag of the page, since apparently accessing session stuff could cause this
-Checked the OnInit() method for dynamically adding controls or accessing uninstantiated objects. It's clean:
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.cboURLFunction.SelectedIndexChanged += new System.EventHandler(this.cboURLFunction_SelectedIndexChanged_1);
this.cboStandard.SelectedIndexChanged += new System.EventHandler(this.cboStandard_SelectedIndexChanged);
this.cboType.SelectedIndexChanged += new System.EventHandler(this.cboType_SelectedIndexChanged);
this.chkLegacy.CheckedChanged += new System.EventHandler(this.chkLegacy_CheckedChanged);
this.btnRoute.Click += new System.EventHandler(this.btnRoute_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
.Aspx page source (thinned):
<%# Page language="c#" Codebehind="addRoute.aspx.cs" AutoEventWireup="false" Inherits="HTP.RHIO.WebPortal.addRoute" %>
<%# Register TagPrefix="HeaderControl" TagName="ucHeader" Src="ucHeader.ascx" %>
<%# Register TagPrefix="TopMenu" TagName="ucTopMenu" Src="ucTopMenu.ascx" %>
<%# Register TagPrefix="uc1" TagName="ucHelpLink" Src="ucHelpLink.ascx" %>
<HTML>
<HEAD>
<title>Add Route -
<% =Session["Domain"]%>
<% =Session["Username"]%>
</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<link href="./style/WebPortalMain.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
function jvsValidate() {
(removed for brevity)
}
</script>
</HEAD>
<body leftmargin="5" topmargin="0" rightmargin="5">
<form id="Form1" method="post" runat="server" onsubmit="return jvsValidate() ;">
<table id="Table1" class="tableWidth" cellspacing="0" cellpadding="0" border="0">
<!-- BEGIN HEADER ROW -->
<tr>
<td class="headerSection" colspan="3"><HeaderControl:ucHeader id="UcHeader1" runat="server"></HeaderControl:ucHeader></td>
</tr>
<!-- END HEADER ROW -->
<!-- BEGIN TOP NAV (IF NECCESSARY) -->
<tr>
<td class="topNavSection" colspan="3">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td style="WIDTH: 857px"><TopMenu:ucTopMenu id="UcTopMenu1" runat="server" xmlfilename="./MenuFiles/menu.xml" xslfilename="./MenuFiles/menu.xsl"></TopMenu:ucTopMenu></td>
<td align="right" width="15%"><uc1:ucHelpLink id="UcHelpLink1" runat="server"></uc1:ucHelpLink></td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table id="Table2" class="tableWidth" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3"><img src="graphics/servicers_routes.gif"></td>
<td align="right">
<asp:hyperlink id="backLink" runat="server">
<img src="./graphics/back.gif" border="0"></asp:hyperlink></td>
</tr>
.
.
etc
.
</table>
<!-- END MAIN BODY SECTION --></form>
</body>
</HTML>
you will find your answer there : http://blogs.msdn.com/b/webdev/archive/2010/05/06/another-error-creating-control-in-the-design-view-with-object-reference-not-set-in-visual-studio-2010.aspx
i Stackoverflow,
I'm trying to get my head around make tooltips to show a description for each item in my asp:Repeater control. The problem is my jquery have to loop through all the divs and make a .tooltip(). I have tried to use the each() function in jQuery, but there's no tooltip showing up :-/
My current code:
<script type="text/javascript">
$(document).ready(function () {
$('.tooltip').each(function (index, domEle) {
domEle.tooltip();
});
});
</script>
And my repeater:
<asp:Repeater ID="rptListPartners" runat="server">
<HeaderTemplate>
<table border="0" cellpadding="7" cellspacing="0">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="font-family:Verdana; font-size:11px; height: 18px; width:400px;">
<div id="data_tooltip_from_div" style="display:none;"> <%#Eval("profile") %></div>
<a id="tooltip_from_div" href="#" class="tooltip"> <%#Eval("name") %>, <%#Eval("address") %>, <%#Eval("zip") %> <%#Eval("city") %> <img src='/kort/www.png' /></a>
</td>
<td style="font-family:Verdana; font-size:11px; height: 18px;"><%#Eval("phone") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Is this approach totally off, or? :-)
Any hint will be greatly appreciated!
Thanks in advance!
Inside your .each() domEle refers to the DOM element directly, not a jQuery object that has the .tooltip() plugin method...so it should look like this:
$(document).ready(function () {
$('.tooltip').each(function (index, domEle) {
$(domEle).tooltip();
});
});
But...it's a plugin, so there's no need to loop at all:
$(document).ready(function () {
$('.tooltip').tooltip();
});
IDs have to be unique...it's not causing the error here but remove it if it's repeated to be valid and avoid other issues later. You already have the class you need to select the elements you're after here.
Also, you should be seeing a JavaScript error in your console with your current approach, this will tell you exactly what's going on. If you're in a browser without a console I'd recommend grabbing Firefox and FireBug to go with it, or Chrome and it's included developer tools.