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..
Related
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>
how to animate grid view rows to display one row after another in a same page. And all should be on the page?
any body please help me out.thanks in advance
Animating an ASP.NET GridView is not what you're after. You'll want to animate the HTML generated from the ASP.NET GridView, and for that you'll need javascript and/or jQuery. These scripting languages were built for the web and facilitate DOM manipulation.
In this case, a possible approach is to render the rows invisible on document ready, then display (and animate) them one at a time.
You should now have sufficient information to continue your search.
after 2 days of my work i had done the following :
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("span[id$='label']").animate({marginLeft: "0.05in"},100).first().show("fast", function showNext() {
$(this).next().show(200, showNext);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater runat="server" ID="repeater1">
<ItemTemplate>
<asp:Label runat="server" ID="label" style="display:none" Text='<%#Eval("ename") %>'>
</asp:Label>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
How to access controls in master page using javascript? The master page consists of a search textbox, on key down event of the control I call a javascript function writtern inline of the master page. I get the value of entered in textbox in that javascript function. I have tried giving document.getElementById("<%=txtSearch.ClientID %>").value as well as document.getElementById("txtSearch").value. Both display error. I have to access the textbox control from within the master page itself!
I think some important bits of markup are missing from what you showed in the comment. I tried it, and the following code works. Check it out, maybe you'll see where your problem is; otherwise, please explain where your markup is different.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplicationDummy.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<script type="text/javascript">
function txtSearch_KeyDown() {
alert(document.getElementById('<%=txtSearch.ClientID %>').value);
}
</script>
</head>
<body>
<form runat="server">
<table width="226" border="0" cellpadding="2" cellspacing="2">
<tr>
<td width="150" align="right">
<asp:TextBox ID="txtSearch" CssClass="para1Black" Width="180px" ValidationGroup="GlobalSearch"
runat="server" MaxLength="100" onkeydown="txtSearch_KeyDown()"></asp:TextBox>
</td>
<td width="62">
<asp:ImageButton ID="imgbtnSearch" ToolTip="Click to search." ImageUrl="images/search2.jpeg"
CausesValidation="true" Width="22px" Height="22px" runat="server" ValidationGroup="GlobalSearch" />
</td>
</tr>
</table>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="App_Themes/jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script src="Scripts/jquery-1.3.2.min.js"type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript" >
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
</script>
<form id="form1" runat="server">
<div>
<table border="1px" >
<tr>
<td><asp:Label ID="Label4" runat="server" Text="Text"></asp:Label></td>
<td><asp:TextBox ID="TextBox2" runat="server" ></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="Date"></asp:Label></td>
<td><asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
<input id="myButton" type="button" value="button" />
</td>
</tr></table>
</div>
</form>
</body>
</html>
this is my webform design code..
click function wat written in side script tag is not working...!! Anything wrong.??
.datepicker( "show" ) -->> Call up a previously attached date picker. but I can't see where you initialize your date picker.. call it like this first... $("#datepicker").datepicker();
$(function() {
$("#datepicker").datepicker();
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
});
try to uncomment this line ($("#datepicker").datepicker();) on the demo
demo
Add your script to the document.ready(...) function.
One reason it is not working is that when your script is executed, the myButton element has not yet been added to the DOM, and is thus not found. When using jquery, you should generally wrap your javascript code in the $(document).ready(..) to be sure the DOM is fully loaded when your code is invoked. Try the following:
<script type="text/javascript" >
$(document).ready(function(){
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
});
</script>
from the documentation:
show
Signature:
.datepicker( "show" )
Call up a previously attached date
picker.
so first of all you need to attach it!! eg:
$(document).ready(function() {
var textBox = $('#<%= this.datepicker.ClientID %>');
var icon = $('#myButton');
var datepicker = textBox.datepicker();
icon.click(function() {
datepicker.datepicker('show');
});
});
your you might go with the icon-trigger
Look at the source code that has been generated. Is the id still called myButton and datepicker ? Often the id's are rewritten by asp.net unless specified otherwise and you are using version 4.
You will need to use the client id of the controls, e.g
$("#<%=datepicker.ClientId%>").datepicker("show");
Here's what I have so far but thing aren't really working. (I dragged the jQuery.js file from the Solution Explorer to the area of my html.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SignUpFormTest._Default" %>
<!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 src="Scripts/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//fade in the context of whatever is inside the div tag.
$('#name').fadeIn("slow");
});
</script>
</head>
<body bgcolor="#FFFFFF">
<p>
Note that this form doesn't actually do anything
except illustrate the Required Field Validator.
</p>
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<div id="name"><asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage='<img src="../Images/no.png">' runat="server" /></div>
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
<p>
Hint: Try submitting it before you enter something.
</p>
</body>
</html>
When validating the icon just pops up.
No fade in or anything. Also, I know my current solution is hacky, so I'd really like someone to tell me what I should do instead of a creating a DIV tag just for the purpose of one animation.
Make sure the reference to JQuery is valid and use this code:
$(document).ready(function() {
$('#name').hide().fadeIn("slow");
});
If I'm not mistaken, since the div is already visible in your case, jQuery will not fade it in. The hide() method ensures that the div is initially not visible and then fades in slowly.
$(document).ready(function() {
document.getElementById('valTxtName').onpropertychange = function(){
$('#name').fadeIn("slow");
}
});