jQuery JavaSript ASP.NET 4.0 VS 2010 with MasterPage
I have following in Master Page (inside head tag)
<script type="text/javascript" language="javascript" src="~/jquery/jquery-1.6.2
<script type="text/javascript" language="javascript" src="~/jquery/jquery.ui.co
<script type="text/javascript" language="javascript" src="~/jquery/jquery.ui.wi
<script type="text/javascript" language="javascript" src="~/jquery/jquery.ui.da
</head>
I also have
<div id="content">
<asp:ContentPlaceHolder ID="contentBody" runat="server">
</asp:ContentPlaceHolder>
</div>
in Master page.
--------------------------
I have
<script type="text/javascript">
$(function showCal() {
alert($('#contentBody_Text
$("#contentBody_TextBox4")
});
</script>
in the content page.
I got the alert working so I know that jQuery is working.
This confirms that "#contentBody_TextBox4" is found.
But for some reason, datepicker would not work.
What gives?
Thanks,
Ashok
<script type="text/javascript" language="javascript" src="~/jquery/jquery-1.6.2
<script type="text/javascript" language="javascript" src="~/jquery/jquery.ui.co
<script type="text/javascript" language="javascript" src="~/jquery/jquery.ui.wi
<script type="text/javascript" language="javascript" src="~/jquery/jquery.ui.da
</head>
I also have
<div id="content">
<asp:ContentPlaceHolder ID="contentBody" runat="server">
</asp:ContentPlaceHolder>
</div>
in Master page.
--------------------------
I have
<script type="text/javascript">
$(function showCal() {
alert($('#contentBody_Text
$("#contentBody_TextBox4")
});
</script>
in the content page.
I got the alert working so I know that jQuery is working.
This confirms that "#contentBody_TextBox4" is found.
But for some reason, datepicker would not work.
What gives?
Thanks,
Ashok
leakim971
could you post the page content of your page? or provide a link to see it?
ASKER
Content Page code
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPa
<asp:Content ID="Content1" ContentPlaceHolderID="cont
<link href="~/css/base/jquery.ui
<table width="960" style="height: 100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" scope="row" class="styleB" style="width: 289px;">
<!----------- Roundtrip ------------->
<div id="round_trip" style="margin: 10px 0px 0px 10px;">
<p>
<img src="images/leavingfrom.jp
<p align="left">
<span class="copy">From:</span><
<asp:TextBox ID="TextBox1" runat="server"></asp:TextB
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">To:</span><br
<asp:TextBox ID="TextBox2" runat="server"></asp:TextB
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<img src="images/datesleaving.j
height="31" /></p>
<p>
<span class="copy">Leaving:</spa
<asp:TextBox ID="dateASP1" runat="server"></asp:TextB
<asp:Button ID="Button10" runat="server" onclientclick="showCal()"
Text="Button" />
</p>
<p>
<span class="copy">Returning:</s
<input id="date2" type="text" name="date2" size="20" />
</p>
<p>
<img src="images/numpass.jpg" alt="Number of Passengers" width="272" height="31" /></p>
<table width="0%" border="0" align="left">
<tbody>
<tr align="left">
<td width="66" scope="row">
<div align="center">
<select name="Adult" class="form1" id="Select1" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="63">
<div align="center">
<select name="Child" class="form1" id="Select2" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="62">
<div align="center">
<select name="Infant" class="form1" id="Select3" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center" class="sm">
<span class="style10">Adults<br />
(12-24)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Children<b
(2-12)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Infants<br
(0-2)</span></div>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
</p>
<p align="center">
<input type="submit" name="submit" value="Submit" /></p>
</div>
<%-- End of an option on left --%>
<hr width="100%" />
<script type="text/javascript">
$(document).ready(function
$("input[id*='dateASP']").
});
</script>
</asp:Content>
By the I had the <script> on the top before and that did not make any difference.
Thanks,
Ashok
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPa
<asp:Content ID="Content1" ContentPlaceHolderID="cont
<link href="~/css/base/jquery.ui
<table width="960" style="height: 100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" scope="row" class="styleB" style="width: 289px;">
<!----------- Roundtrip ------------->
<div id="round_trip" style="margin: 10px 0px 0px 10px;">
<p>
<img src="images/leavingfrom.jp
<p align="left">
<span class="copy">From:</span><
<asp:TextBox ID="TextBox1" runat="server"></asp:TextB
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">To:</span><br
<asp:TextBox ID="TextBox2" runat="server"></asp:TextB
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<img src="images/datesleaving.j
height="31" /></p>
<p>
<span class="copy">Leaving:</spa
<asp:TextBox ID="dateASP1" runat="server"></asp:TextB
<asp:Button ID="Button10" runat="server" onclientclick="showCal()"
Text="Button" />
</p>
<p>
<span class="copy">Returning:</s
<input id="date2" type="text" name="date2" size="20" />
</p>
<p>
<img src="images/numpass.jpg" alt="Number of Passengers" width="272" height="31" /></p>
<table width="0%" border="0" align="left">
<tbody>
<tr align="left">
<td width="66" scope="row">
<div align="center">
<select name="Adult" class="form1" id="Select1" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="63">
<div align="center">
<select name="Child" class="form1" id="Select2" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="62">
<div align="center">
<select name="Infant" class="form1" id="Select3" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center" class="sm">
<span class="style10">Adults<br />
(12-24)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Children<b
(2-12)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Infants<br
(0-2)</span></div>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
</p>
<p align="center">
<input type="submit" name="submit" value="Submit" /></p>
</div>
<%-- End of an option on left --%>
<hr width="100%" />
<script type="text/javascript">
$(document).ready(function
$("input[id*='dateASP']").
});
</script>
</asp:Content>
By the I had the <script> on the top before and that did not make any difference.
Thanks,
Ashok
Ok, if you have :
use :
<asp:TextBox ID="dateASP1" runat="server"></asp:TextBox>use :
<script type="text/javascript">
$(document).ready(function () {
$("<%= dateASP1.ClientID %>").datepicker();
});
</script>ASKER
leakim971
Ok, I just followed exactly as you said.
but when I click in the dateASP1 textbox, datepicker still does not show up.
Thanks,
Ashok
Ok, I just followed exactly as you said.
but when I click in the dateASP1 textbox, datepicker still does not show up.
Thanks,
Ashok
ok, do a right click on the page in your favorite browser, choose view source and post the content here.
thanks
thanks
ASKER
<!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><title>
FlyteRide
</title><link id="lnkStyle" href="styles/style.css" rel="stylesheet" type="text/css" /><link href="css/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.styleB
{
width: 286px;
}
.style1
{
width: 135px;
}
.style2
{
width: 100px;
}
.style3
{
width: 140px;
}
.style4
{
width: 160px;
}
.style5
{
width: 110px;
}
</style>
<script type="text/javascript" language="javascript">
function select_oneway() {
document.getElementById('one_way').style.display = 'block';
document.getElementById('round_trip').style.display = 'none';
document.getElementById('multi_city').style.display = 'none';
}
function select_roundtrip() {
document.getElementById('one_way').style.display = 'none';
document.getElementById('round_trip').style.display = 'block';
document.getElementById('multi_city').style.display = 'none';
}
function select_multicity() {
document.getElementById('one_way').style.display = 'none';
document.getElementById('round_trip').style.display = 'none';
document.getElementById('multi_city').style.display = 'block';
}
</script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js”></script>
<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css” type=”text/css” rel=”Stylesheet” class=”ui-theme” />
</head>
<body>
<form method="post" action="WorldTkt.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0NzU5NTA4OTVkZJ0YiKqOa6i/oparws5AvPF/8XhQXueXOUF+3vRaWsz7" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCQKT8pi5AQKKzZCUBAKqzviBAwLJgriWAQLErMaxAwLy69jRDALy69TRDAKp772MAgL2uL/YAQ1JYk3gvFnkeO/Qyg9H9cUbC38mf3yAtFGytSyZLBjf" />
</div>
<!-- #start header -->
<div id="container">
<div id="Header">
<table class="menu">
<tr>
<td class="styleB"> </td>
<td class="style1"><a href="/Default.aspx">BOOK A FLIGHT<br /><br />USA/CANADA<br /><br />BUY ONLINE</a></td>
<td class="style2"><a href="/Hotel.aspx"><br /><br />HOTEL</a></td>
<td class="style3"><a href="/WorldTkt.aspx">AIRLINE TICKET<br /><br />WORLDWIDE<br /><br />RESERVATION</a></td>
<td class="style4"><a href="/Limo.aspx"><br />LIMOUSINE<br /><br />TRANSPORTATION</a></td>
<td class="style5"><a href="/Contact.aspx"><br />CONTACTS<br /><br />FEEDBACK</a></td>
</tr>
</table>
</div>
<!-- #end header -->
</div>
<div align="center">
<img id="Image1" src="images/Flight.jpg" />
</div>
<div id="content">
<script type="text/javascript">
$(document).ready(function () {
$("dateASP1").datepicker({
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
<table border="0" cellpadding="0" cellspacing="0" style="width: 960px">
<tr bgcolor="#ffffff">
<td align="center">
<table id="contentBody_RadioButtonList1" style="width:335px;">
<tr>
<td><input id="contentBody_RadioButtonList1_0" type="radio" name="ctl00$contentBody$RadioButtonList1" value="Roundtrip" checked="checked" onclick="select_roundtrip(this);" /><label for="contentBody_RadioButtonList1_0">Roundtrip</label></td><td><input id="contentBody_RadioButtonList1_1" type="radio" name="ctl00$contentBody$RadioButtonList1" value="One Way" onclick="select_oneway(this);" /><label for="contentBody_RadioButtonList1_1">One Way</label></td><td><input id="contentBody_RadioButtonList1_2" type="radio" name="ctl00$contentBody$RadioButtonList1" value="Multi-city" onclick="select_multicity(this);" /><label for="contentBody_RadioButtonList1_2">Multi-city</label></td>
</tr>
</table>
</td>
<td>
</td>
</tr>
</table>
<table width="960" style="height: 100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" scope="row" class="styleB" style="width: 289px;">
<!----------- Roundtrip ------------->
<div id="round_trip" style="margin: 10px 0px 0px 10px;">
<p>
<img src="images/leavingfrom.jpg" alt="Leaving From and Going to" width="272" height="32" /></p>
<p align="left">
<span class="copy">From:</span><br />
<input name="ctl00$contentBody$TextBox1" type="text" id="contentBody_TextBox1" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">To:</span><br />
<input name="ctl00$contentBody$TextBox2" type="text" id="contentBody_TextBox2" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<img src="images/datesleaving.jpg" alt=" Dates Leaving and Returning" width="272"
height="31" /></p>
<p>
<span class="copy">Leaving:</span><br />
<input name="ctl00$contentBody$dateASP1" type="text" id="dateASP1" />
<input type="submit" name="ctl00$contentBody$Button10" value="Button" onclick="showCal();" id="contentBody_Button10" />
</p>
<p>
<span class="copy">Returning:</span><br />
<input id="date2" type="text" name="date2" size="20" />
</p>
<p>
<img src="images/numpass.jpg" alt="Number of Passengers" width="272" height="31" /></p>
<table width="0%" border="0" align="left">
<tbody>
<tr align="left">
<td width="66" scope="row">
<div align="center">
<select name="Adult" class="form1" id="Select1" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="63">
<div align="center">
<select name="Child" class="form1" id="Select2" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="62">
<div align="center">
<select name="Infant" class="form1" id="Select3" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center" class="sm">
<span class="style10">Adults<br />
(12-24)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Children<br />
(2-12)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Infants<br />
(0-2)</span></div>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
</p>
<p align="center">
<input type="submit" name="submit" value="Submit" /></p>
</div>
<!----------- One Way ------------->
<div id="one_way" style="margin: 10px 0px 0px 10px; display: none">
<p>
<img src="images/leavingfrom.jpg" alt="Leaving From and Going to" width="272" height="32" /></p>
<p align="left">
<span class="copy">From:</span><br />
<input name="FROM1" id="FROM1" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">To:</span><br />
<input name="TO1" id="TO1a" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">Leaving:</span><br />
<input id="firstinput" class="date" type="text" name="firstinput" size="20" />
<input type="button" tabindex="31" name="btnCanS" onclick="showCaL('firstinput','DivCalendar');"
style="border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="btnCanE1"/>
<input type="button" name="btnCalendar" onclick="show(ddlReq_date);" style="display: none;
border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="btnCalendar"/>
</p>
<p>
<img src="images/numpass.jpg" alt="Number of Passengers" width="272" height="31" /></p>
<table width="0%" border="0" align="left">
<tbody>
<tr align="left">
<td width="66" scope="row">
<div align="center">
<select name="Adult" class="form1" id="Adult" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="63">
<div align="center">
<select name="Child" class="form1" id="Adult2" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="62">
<div align="center">
<select name="Infant" class="form1" id="Adult3B" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center" class="sm">
<span class="style10">Adults<br />
(12-24)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Children<br />
(2-12)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Infants<br />
(0-2)</span></div>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
</p>
<p align="center">
<input type="submit" name="submit" value="Submit" /></p>
</div>
<!----------- Multi-city ------------->
<div id="multi_city" style="margin: 10px 0px 0px 10px; display: none">
<p>
<img src="images/leavingfrom.jpg" alt="Leaving From and Going to" width="272" height="32" /></p>
<p align="left">
<span class="copy">From:</span><br />
<input name="FROM1" id="Text4" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">To:</span><br />
<input name="TO1" id="Text5" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">Leaving:</span><br />
<input id="Text6" class="date" readonly="readonly" type="text" name="firstinput" size="20" />
<input type="button" tabindex="31" name="btnCanS" onclick="showCaL('firstinput','DivCalendar');"
style="border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button3"/>
<input type="button" name="btnCalendar" onclick="show(ddlReq_date);" style="display: none;
border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button4"/>
</p>
<hr width="100%" />
<p>
<span class="copy">To:</span><br />
<input name="TO1" id="Text7" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">Leaving:</span><br />
<input id="Text8" class="date" readonly="readonly" type="text" name="firstinput" size="20" />
<input type="button" tabindex="31" name="btnCanS" onclick="showCaL('firstinput','DivCalendar');"
style="border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button6"/>
<input type="button" name="btnCalendar" onclick="show(ddlReq_date);" style="display: none;
border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button7"/>
</p>
<hr width="100%" />
<p>
<span class="copy">To:</span><br />
<input name="TO1" id="Text9" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">Leaving:</span><br />
<input id="Text10" class="date" readonly="readonly" type="text" name="firstinput" size="20" />
<input type="button" tabindex="31" name="btnCanS" onclick="showCaL('firstinput','DivCalendar');"
style="border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button8"/>
<input type="button" name="btnCalendar" onclick="show(ddlReq_date);" style="display: none;
border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button9"/>
</p>
<hr width="100%" />
<p>
<img src="images/numpass.jpg" alt="Number of Passengers" width="272" height="31" /></p>
<table width="0%" border="0" align="left">
<tbody>
<tr align="left">
<td width="66" scope="row">
<div align="center">
<select name="Adult" class="form1" id="Select4" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="63">
<div align="center">
<select name="Child" class="form1" id="Select5" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="62">
<div align="center">
<select name="Infant" class="form1" id="Select6" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center" class="sm">
<span class="style10">Adults<br />
(12-24)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Children<br />
(2-12)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Infants<br />
(0-2)</span></div>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
</p>
<p align="center">
<input type="submit" name="submit" value="Submit" /></p>
</div>
</td>
<td valign="top" scope="row" class="styleB" style="width: 500px; height: 205px;">
<div style="margin: 10px 0px 0px 20px; width: 581px;">
</div>
</td>
</tr>
</table>
<div align="center">
¿<!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>
<title></title>
<style type="text/css">
/* Container DIV - automatically generated */
.simply-scroll-container {
position: relative;
}
/* Clip DIV - automatically generated */
.simply-scroll-clip {
position: relative;
overflow: hidden;
z-index: 2;
}
/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list {
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}
.simply-scroll-list li img {
border: none;
display: block;
}
/* Custom class modifications - adds to / overrides above
.simply-scroll is default base class */
/* Container DIV 960,940,960*/
.simply-scroll {
width: 940px;
height: 24px;
}
/* Clip DIV */
.simply-scroll .simply-scroll-clip {
width: 940px;
height: 24px;
}
/* Explicitly set height/width of each list item */
.simply-scroll .simply-scroll-list li {
float: left; /* Horizontal scroll only */
width: 940px;
height: 24px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/simplyscroll.js"></script>
<script type="text/javascript">
(function ($) {
$(function () { //on DOM ready
$("#scroller").simplyScroll({
autoMode: 'loop'
});
});
})(jQuery);
</script>
</head>
<body>
<ul id="scroller">
<li><font color="white">Airline tickets, hotels and limousine service in the United States of America & Canada. We have worldwide best price and good service. </font></li>
</ul>
</body>
</html>
</div>
<hr width="100%" />
</div>
</form>
</body>
</html>
We miss the << # >>
$("#<%= dateASP1.ClientID %>").datepicker();
$("#<%= dateASP1.ClientID %>").datepicker();
ASKER
I changed above so now when I view Source code of the page, it has.....
$("#dateASP1").datepicker(
but the Calendar is not showing up.
Thanks,
Ashok
$("#dateASP1").datepicker(
but the Calendar is not showing up.
Thanks,
Ashok
Your page may not included jquery datepicker
it use jquery 1.3.2 but jquery ui 1.7.2
you're including jquery two times, you've two pages in the same document
it use jquery 1.3.2 but jquery ui 1.7.2
you're including jquery two times, you've two pages in the same document
ASKER
I have 2 pages.
I just realized on was using src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
Should I just place one jQuery in MasterPage and use only one version of the jQuery?
Thanks,
Ashok
I just realized on was using src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
Should I just place one jQuery in MasterPage and use only one version of the jQuery?
Thanks,
Ashok
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I temporarily remove one of the page which uses 1.3.2 and does not use datepicker.
so the code now from browswr looks like...
so the code now from browswr looks like...
<!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><title>
FlyteRide
</title><link id="lnkStyle" href="styles/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.styleB
{
width: 286px;
}
.style1
{
width: 135px;
}
.style2
{
width: 100px;
}
.style3
{
width: 140px;
}
.style4
{
width: 160px;
}
.style5
{
width: 110px;
}
</style>
<script type="text/javascript" language="javascript">
function select_oneway() {
document.getElementById('one_way').style.display = 'block';
document.getElementById('round_trip').style.display = 'none';
document.getElementById('multi_city').style.display = 'none';
}
function select_roundtrip() {
document.getElementById('one_way').style.display = 'none';
document.getElementById('round_trip').style.display = 'block';
document.getElementById('multi_city').style.display = 'none';
}
function select_multicity() {
document.getElementById('one_way').style.display = 'none';
document.getElementById('round_trip').style.display = 'none';
document.getElementById('multi_city').style.display = 'block';
}
</script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<form method="post" action="WorldTkt.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTQ3NzY5ODY3NWRkXS3HtRntd4P8zWd/IC7ThFygqa5SaC3qqQjcQ9QnuqA=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCQLvkpXsDwKKzZCUBAKqzviBAwLJgriWAQLErMaxAwLy69jRDALy69TRDAKp772MAgL2uL/YARhKQXAxaMmooIYjUj6mZ88xUIHgEEBamBBA2EU+xknT" />
</div>
<!-- #start header -->
<div id="container">
<div id="Header">
<table class="menu">
<tr>
<td class="styleB"> </td>
<td class="style1"><a href="/Default.aspx">BOOK A FLIGHT<br /><br />USA/CANADA<br /><br />BUY ONLINE</a></td>
<td class="style2"><a href="/Hotel.aspx"><br /><br />HOTEL</a></td>
<td class="style3"><a href="/WorldTkt.aspx">AIRLINE TICKET<br /><br />WORLDWIDE<br /><br />RESERVATION</a></td>
<td class="style4"><a href="/Limo.aspx"><br />LIMOUSINE<br /><br />TRANSPORTATION</a></td>
<td class="style5"><a href="/Contact.aspx"><br />CONTACTS<br /><br />FEEDBACK</a></td>
</tr>
</table>
</div>
<!-- #end header -->
</div>
<div align="center">
<img id="Image1" src="images/Flight.jpg" />
</div>
<div id="content">
<script type="text/javascript">
(function ($) {
$(function () { //on DOM ready
$("#contentBody_dateASP1").datepicker({
numberOfMonths: 2,
showButtonPanel: true
});
})(jQuery);
</script>
<table border="0" cellpadding="0" cellspacing="0" style="width: 960px">
<tr bgcolor="#ffffff">
<td align="center">
<table id="contentBody_RadioButtonList1" style="width:335px;">
<tr>
<td><input id="contentBody_RadioButtonList1_0" type="radio" name="ctl00$contentBody$RadioButtonList1" value="Roundtrip" checked="checked" onclick="select_roundtrip(this);" /><label for="contentBody_RadioButtonList1_0">Roundtrip</label></td><td><input id="contentBody_RadioButtonList1_1" type="radio" name="ctl00$contentBody$RadioButtonList1" value="One Way" onclick="select_oneway(this);" /><label for="contentBody_RadioButtonList1_1">One Way</label></td><td><input id="contentBody_RadioButtonList1_2" type="radio" name="ctl00$contentBody$RadioButtonList1" value="Multi-city" onclick="select_multicity(this);" /><label for="contentBody_RadioButtonList1_2">Multi-city</label></td>
</tr>
</table>
</td>
<td>
</td>
</tr>
</table>
<table width="960" style="height: 100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" scope="row" class="styleB" style="width: 289px;">
<div id="round_trip" style="margin: 10px 0px 0px 10px;">
<p>
<img src="images/leavingfrom.jpg" alt="Leaving From and Going to" width="272" height="32" /></p>
<p align="left">
<span class="copy">From:</span><br />
<input name="ctl00$contentBody$TextBox1" type="text" id="contentBody_TextBox1" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">To:</span><br />
<input name="ctl00$contentBody$TextBox2" type="text" id="contentBody_TextBox2" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<img src="images/datesleaving.jpg" alt=" Dates Leaving and Returning" width="272"
height="31" /></p>
<p>
<span class="copy">Leaving:</span><br />
<input name="ctl00$contentBody$dateASP1" type="text" id="dateASP1" />
<input type="submit" name="ctl00$contentBody$Button10" value="Button" onclick="showCal();" id="contentBody_Button10" />
</p>
<p>
<span class="copy">Returning:</span><br />
<input id="date2" type="text" name="date2" size="20" />
</p>
<p>
<img src="images/numpass.jpg" alt="Number of Passengers" width="272" height="31" /></p>
<table width="0%" border="0" align="left">
<tbody>
<tr align="left">
<td width="66" scope="row">
<div align="center">
<select name="Adult" class="form1" id="Select1" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="63">
<div align="center">
<select name="Child" class="form1" id="Select2" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="62">
<div align="center">
<select name="Infant" class="form1" id="Select3" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center" class="sm">
<span class="style10">Adults<br />
(12-24)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Children<br />
(2-12)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Infants<br />
(0-2)</span></div>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
</p>
<p align="center">
<input type="submit" name="submit" value="Submit" /></p>
</div>
<div id="one_way" style="margin: 10px 0px 0px 10px; display: none">
<p>
<img src="images/leavingfrom.jpg" alt="Leaving From and Going to" width="272" height="32" /></p>
<p align="left">
<span class="copy">From:</span><br />
<input name="FROM1" id="FROM1" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">To:</span><br />
<input name="TO1" id="TO1a" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">Leaving:</span><br />
<input id="firstinput" class="date" type="text" name="firstinput" size="20" />
<input type="button" tabindex="31" name="btnCanS" onclick="showCaL('firstinput','DivCalendar');"
style="border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="btnCanE1"/>
<input type="button" name="btnCalendar" onclick="show(ddlReq_date);" style="display: none;
border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="btnCalendar"/>
</p>
<p>
<img src="images/numpass.jpg" alt="Number of Passengers" width="272" height="31" /></p>
<table width="0%" border="0" align="left">
<tbody>
<tr align="left">
<td width="66" scope="row">
<div align="center">
<select name="Adult" class="form1" id="Adult" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="63">
<div align="center">
<select name="Child" class="form1" id="Adult2" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="62">
<div align="center">
<select name="Infant" class="form1" id="Adult3B" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center" class="sm">
<span class="style10">Adults<br />
(12-24)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Children<br />
(2-12)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Infants<br />
(0-2)</span></div>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
</p>
<p align="center">
<input type="submit" name="submit" value="Submit" /></p>
</div>
<div id="multi_city" style="margin: 10px 0px 0px 10px; display: none">
<p>
<img src="images/leavingfrom.jpg" alt="Leaving From and Going to" width="272" height="32" /></p>
<p align="left">
<span class="copy">From:</span><br />
<input name="FROM1" id="Text4" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">To:</span><br />
<input name="TO1" id="Text5" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">Leaving:</span><br />
<input id="Text6" class="date" readonly="readonly" type="text" name="firstinput" size="20" />
<input type="button" tabindex="31" name="btnCanS" onclick="showCaL('firstinput','DivCalendar');"
style="border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button3"/>
<input type="button" name="btnCalendar" onclick="show(ddlReq_date);" style="display: none;
border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button4"/>
</p>
<hr width="100%" />
<p>
<span class="copy">To:</span><br />
<input name="TO1" id="Text7" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">Leaving:</span><br />
<input id="Text8" class="date" readonly="readonly" type="text" name="firstinput" size="20" />
<input type="button" tabindex="31" name="btnCanS" onclick="showCaL('firstinput','DivCalendar');"
style="border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button6"/>
<input type="button" name="btnCalendar" onclick="show(ddlReq_date);" style="display: none;
border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button7"/>
</p>
<hr width="100%" />
<p>
<span class="copy">To:</span><br />
<input name="TO1" id="Text9" type="text" />
<strong><a href="http://www.cheaphotfare.com/codes.html" target="_blank"><u class="copy">
Airport Codes</u></a></strong></p>
<p>
<span class="copy">Leaving:</span><br />
<input id="Text10" class="date" readonly="readonly" type="text" name="firstinput" size="20" />
<input type="button" tabindex="31" name="btnCanS" onclick="showCaL('firstinput','DivCalendar');"
style="border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button8"/>
<input type="button" name="btnCalendar" onclick="show(ddlReq_date);" style="display: none;
border: 0px solid; background-image: url('./images/smallcal.gif'); width: 18px;
height: 18px; background-color: rgb(207, 239, 255);" id="Button9"/>
</p>
<hr width="100%" />
<p>
<img src="images/numpass.jpg" alt="Number of Passengers" width="272" height="31" /></p>
<table width="0%" border="0" align="left">
<tbody>
<tr align="left">
<td width="66" scope="row">
<div align="center">
<select name="Adult" class="form1" id="Select4" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="63">
<div align="center">
<select name="Child" class="form1" id="Select5" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
<td width="62">
<div align="center">
<select name="Infant" class="form1" id="Select6" style="margin-left: 10px; width: 44px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center" class="sm">
<span class="style10">Adults<br />
(12-24)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Children<br />
(2-12)</span></div>
</td>
<td>
<div align="center" class="sm">
<span class="style10">Infants<br />
(0-2)</span></div>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
</p>
<p align="center">
<input type="submit" name="submit" value="Submit" /></p>
</div>
</td>
<td valign="top" scope="row" class="styleB" style="width: 500px; height: 205px;">
<div style="margin: 10px 0px 0px 20px; width: 581px;">
</div>
</td>
</tr>
</table>
<hr width="100%" />
<script type="text/javascript">
$(document).ready(function () {
$("#dateASP1").datepicker()
</script>
</div>
</form>
</body>
</html>
be sure to have datepicker in your jquery ui package : http://jqueryui.com/download
ASKER
But after having only one jQuery, it still does not work.
Ashok
Ashok
please provide a link to your page
ASKER
leakim971,
There is something I have to do to have other functionality of scrolling text
because after I removed it (I have only one page using jQuery), it's working.
As soon as I try to add another page that was working before with 1.3.2 jQuery, my DatePicker stops working.
But that is altogether another problem.
Thanks,
Ashok
There is something I have to do to have other functionality of scrolling text
because after I removed it (I have only one page using jQuery), it's working.
As soon as I try to add another page that was working before with 1.3.2 jQuery, my DatePicker stops working.
But that is altogether another problem.
Thanks,
Ashok
thanks