I have a page with a jqueryui datepicker control.
On each day selection, I post with ajax to a web method to do some server side data population to fill the drop down box which is beneath the calendar control.
I used this code for two pages already, first works perfect, but am having issues with this one.
The first time I select a date, the event fires fine, second time nothing happens, then the next click works fine again. So the event only fires on every second click, be it the same date or a different date.
I added an input control to capture date selection, which works fine on each select.
What bugs me now is, If I add an alert inside my select jquery function, it fires every time, take it out and I have this issue again.
Thanks
Markup:
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="Site.Master" CodeBehind="calendartest.aspx.cs" Inherits="Test.calendartest" EnableEventValidation="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
onSelect: function(dateStr, inst) {
document.getElementById('<%= hSelectedDate.ClientID %>').value = dateStr;
var hubid = 2;
$('#<%=ddlAvailableTimes.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>');
$.ajax
({
type: "POST",
url: "UserCP.aspx/PopulateAvailableTimeSlots",
data: ("{date:'" + dateStr + "', hubid:'" + hubid + "'}"),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnTimeSlotsPopulated
});
$("#datepicker_value").val(dateStr);
}
});
});
function OnTimeSlotsPopulated(response) {
PopulateControl(response.d, $("#<%=ddlAvailableTimes.ClientID %>"));
}
function PopulateControl(list, control) {
if (list.length > 0) {
control.removeAttr("disabled");
control.empty().append('<option selected="selected" value="0">--Select Time Slot--</option>');
$.each(list, function() {
control.append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
else {
$("#<%=ddlAvailableTimes.ClientID%>").attr("disabled", "disabled");
control.empty().append('<option selected="selected" value="0">--No Slots Available--<option>');
}
}
</script>
<input id="hSelectedDate" type="hidden" value="" runat="server" />
<input id="hfHub" type="hidden" value="" runat="server" />
<table style="width: 290px" cellpadding="0" cellspacing="0"
align="center">
<tr>
<td align="center">
<div id="datepicker">
</div>
<asp:DropDownList ID="ddlAvailableTimes" runat="server" Width="192px" Enabled="false">
<asp:ListItem Text="--Select Time Slot--" Value="0"></asp:ListItem>
</asp:DropDownList>
<input id="datepicker_value" />
</td>
</tr>
</table>
</asp:Content>
Server Side:
public partial class calendartest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static ArrayList PopulateAvailableTimeSlots(string date, string hubid)
{
ArrayList list = new ArrayList();
//Do stuff here
return list;
}
}
HTML Output:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link href="css/master.css" rel="stylesheet" type="text/css" />
<link href="themes/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="themes/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.datepicker.js"></script>
<title>Test</title>
</head>
<body>
<form name="aspnetForm" method="post" action="calendartest.aspx" id="aspnetForm">
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
onSelect: function(dateStr, inst) {
document.getElementById('ctl00_MainContent_hSelectedDate').value = dateStr;
var hubid = 2;
$('#ctl00_MainContent_ddlAvailableTimes').empty().append('<option selected="selected" value="0">Loading...</option>');
$.ajax
({
type: "POST",
url: "UserCP.aspx/PopulateAvailableTimeSlots",
data: ("{date:'" + dateStr + "', hubid:'" + hubid + "'}"),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnTimeSlotsPopulated
});
$("#datepicker_value").val(dateStr);
}
});
});
function OnTimeSlotsPopulated(response) {
PopulateControl(response.d, $("#ctl00_MainContent_ddlAvailableTimes"));
}
function PopulateControl(list, control) {
if (list.length > 0) {
control.removeAttr("disabled");
control.empty().append('<option selected="selected" value="0">--Select Time Slot--</option>');
$.each(list, function() {
control.append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
else {
$("#ctl00_MainContent_ddlAvailableTimes").attr("disabled", "disabled");
control.empty().append('<option selected="selected" value="0">--No Slots Available--<option>');
}
}
</script>
<input name="ctl00$MainContent$hSelectedDate" type="hidden" id="ctl00_MainContent_hSelectedDate" />
<input name="ctl00$MainContent$hfHub" type="hidden" id="ctl00_MainContent_hfHub" />
<table style="width: 290px" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center">
<div id="datepicker">
</div>
<select name="ctl00$MainContent$ddlAvailableTimes" id="ctl00_MainContent_ddlAvailableTimes" disabled="disabled" style="width:192px;">
<option selected="selected" value="0">--Select Time Slot--</option>
</select>
<input id="datepicker_value" />
</td>
</tr>
</table>
</form>
</body>
</html>
Related
In my project there is a print button . after clicking that button I want to open a popup but it's not loading
<table class="inputForm">
<tfoot>
<tr>
<td align="right">
<asp:Button ID="btnPrint" OnClick="btnPrint_Click" Text="Printuiuiuiui" CssClass="button" runat="server" Visible="true" />
</td>
</tr>
</tfoot>
</table>
Page.ClientScript.RegisterStartupScript(typeof(Page), "s1", "<script FOR=window EVENT=onload>openViewer('" + (int)ABCDEF.enReportName.PortfolioPrint + "');</script>");
Now when I debugged Page.ClientScript throws error in Header
Header = {InnerText = {"Cannot get inner content of ctl00 because the contents are not literal."}}
openViewer is a function that shows popup
function openViewer(reportName) {
sPath = "/ADDCD/Popups/ifggfjfj.aspx?Viewer.aspx?ReportName=" + reportName;
if (navigator.userAgent.indexOf("Chrome") != -1) {
return window.open(sPath, self, "dialogHeight: 374px; dialogWidth: 430px; status: no; resizable: no; center: yes;");
}
else if (navigator.userAgent.indexOf("Firefox") != -1) {
return window.open(sPath, self, "dialogHeight: 374px; dialogWidth: 430px; status: no; resizable: no; center: yes;");
}
else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) { //IF IE > 10
return window.showModalDialog(sPath, self, "dialogHeight: 374px; dialogWidth: 430px; status: no; resizable: no; center: yes;");
}
}
ifggfjfj.aspx
<%# Page Language="C#" MasterPageFile="~/Page.master" AutoEventWireup="true" Inherits="Popups_i" CodeBehind="ifggfjfj.aspx.cs" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Literal id="lDoctype" runat="server"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></asp:Literal>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>ABCDEF</title>
<script language="javascript" type="text/javascript" src="/apps/xyzdfg/Script.js"></script>
</head>
<body>
<div style="position:absolute;width:100%;height:100%;overflow:hidden;">
<iframe frameborder="0" src="<% Response.Write(Server.UrlDecode(Request.QueryString.ToString())); %>" style="width: 100%; height: 100%; ">
</iframe>
</div>
</body>
</html>
</asp:Content>
Viewer.aspx
<%# Register Assembly="XSAWERTYU" TagPrefix="dica" Namespace="ashgsb.fjgdjgj.kfhgkhg.xcvbmvbmx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Report</title>
<link rel="stylesheet" type="text/css" href="../shfhf/dfdfdfdf/css/default.css"/>
<script type="text/javascript">
function Init()
{
theForm.document.all.ctl00_ContentPlaceHolder1_viewer.style.width = "100%";
theForm.document.all.ctl00_ContentPlaceHolder1_viewer.style.height = "100%";
}
</script>
</head>
<body>Report content is written in this area </body>
</html>
</asp:Content>
Now I closed tag in ifggfjfj.aspx but it's not working. So what am I doing wrong? Anybody can tell me? I don't understand this error at all. Please help
EDIT:
Now I get an error like error CS0103: The name or method openViewer does not exist in the current context in this line
Page.ClientScript.RegisterStartupScript(typeof(Page), "s1", "<script FOR=window EVENT=onload>openViewer('" + (int)ABCDEF.enReportName.PortfolioPrint + "');</script>");
I have a textbox on my web form. I want to bind this textbox with the column "name" in my database table. I want that when the user will type alphabets in this textbox then based on the data matching with the alphabet the suggestion will be given in a dropdown just like any other search engine. I want to do it without using Ajax Autocomplete extender or any web services. I tried doing this through Jquery, but I did it with static names. I want these names to be fetched from database. please guide me how can I do this?
aspx page-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
var items = [
"Argo",
"Alex",
"Mike",
"Mark",
"Joseph",
"John",
"Alex",
"Marrie"
];
$("#TextBox1").autocomplete({
source: items
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Name:</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
</form>
</body>
</html>
If you want something to be read from database, there should be some server side script, hence you will need the webservice to do so.
This is how it can be done-
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
var items=[<%=autotag %>];
$("#TextBox1").autocomplete({
source:items
});
});
</script>
<body>
<form id="form1" runat="server">
<div class="article" id="article">
<table>
<tr>
<td>Name:</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
</form>
</body>
and in cs code-
public string autotag="";
protected void Page_Load(object sender, EventArgs e)
{
bind1();
}
public void bind1()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString);
con.Open();
string query="select name from tbl_data_show";
SqlCommand cmd=new SqlCommand(query,con);
SqlDataReader dr=cmd.ExecuteReader();
dr.Read();
while(dr.Read())
{
if(string.IsNullOrEmpty(autotag))
{
autotag+="\""+dr["name"].ToString()+"\"";
}
else
{
autotag+=", \""+dr["name"].ToString()+"\"";
}
}
}
I have an UL that I control using hide and show. The problem is that when I click on level1 it shows level2 for only a moment before it disappears, I believe this is because of a postback or something. The functionality works but it just doesnt stay like it. I need to be able to toggle the items in the list to show and hide them.
<script>
$(function(){
$('.level2').hide();
$('.level3').hide();
$('.level1').click(function () {
$('.level2').show();
return false;
$('level2').click(function () {
$('.level3').show();
return false;
$(this).find('ul').slideToggle();
});
})
}
)
</script>
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<title></title>
<link href="styles/Menu.css" rel="stylesheet" />
<script type="text/javascript">
function openNewWin(url) {
var x = window.open(url, 'mynewwin', 'toolbar=no,directories=no,location=no,menubar=no,left=0,top=0,resizable=no,status=no');
x.focus();
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
$(function(){
$('.level2').hide();
$('.level3').hide();
$('.level1').click(function () {
$('.level2').show();
return false;
$('level2').click(function () {
$('.level3').show();
return false;
$(this).find('ul').slideToggle();
});
})
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu" class="MenuBar">
<asp:Menu ID="Menu1" runat="server" CssClass="mainmenu" StaticDisplayLevels="3" Target="_blank" StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="0px" >
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1"/>
<asp:MenuItemStyle CssClass="level2"/>
<asp:MenuItemStyle CssClass="level3" />
<asp:MenuItemStyle CssClass="level4" />
</LevelMenuItemStyles>
<StaticMenuItemStyle CssClass="staticItem" />
</asp:Menu>
</div>
</form>
</body>
</html>
I'm new here.
I'm trying to make an application that calculates distance and driving time between two adresses using google maps API.
My problem is that google DirectionsService() doesn't seem to respond. and I can't figure it out. I have been trying to figure it out for one week now.
I hope you guys can help.
the problems seems to be in gmapApi.js
here is my code.
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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 type="text/javascript">
function postbackObj() {
var orig = document.getElementById('<%= txbOrigin.ClientID %>').value;
var dist = document.getElementById('<%= txbDestination.ClientID %>').value;
var temp = showLocation(orig, dist);
__doPostBack('gmAPIObj',temp);
}
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">< /script>
<script type="text/javascript" src="gmapApi.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txbOrigin" Text="" runat="server" />
<asp:TextBox ID="txbDestination" Text="" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Search" OnClientClick="postbackObj()"/>
<p>
< asp:Label runat="server" ID="lblPrint" />
</p>
</div>
</form>
</body>
</html>
gmapApi.js
function showLocation(orig, dist) {
var directionService = new google.maps.DirectionsService();
var t = "";
var request = {
origin: orig,
destination: dist,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionService.route(request, function (response, status) {
if (status != google.maps.DirectionsStatus.OK) {
alert(status + " \nreq. failed.");
}
else {
t = request.origin + ';' + request.destination + ';' + response.routes[0].legs[0].distance.value + ';' + response.routes[0].legs[0].duration.value;
}
});
return t;
}
the response variable is null and the status variable is emptystring in the directionService.route(request, function (response, status)
I have tried to change to without lock. And I have tried to place the tags in the body tag without lock.
the rendered html code.
<!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>
<script type="text/javascript">
function postbackObj() {
var orig = document.getElementById('txbOrigin').value;
var dist = document.getElementById('txbDestination').value;
var temp = showLocation(orig, dist);
__doPostBack('gmAPIObj',temp);
}
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="gmapApi.js"></script>
</head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MjMyMzMwNTZkZHxi8IJlhy7bL8nAZqZfL2Vh4Yr8uF80ja6jX9Ypc87B" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALsorucDwLTmobsAwK0weWLAwLCi9reA32PxME86E6mQhRTgBkF7cdktbiURIpf/IzKvAs5PHwI" />
</div>
<div>
<input name="txbOrigin" type="text" value="tilst" id="txbOrigin" />
<input name="txbDestination" type="text" value="aarhus" id="txbDestination" />
<input type="submit" name="btnSubmit" value="Search" onclick="postbackObj();" id="btnSubmit" />
<p>
<span id="lblPrint"></span>
</p>
</div>
</form>
</body>
</html>
thanks in advance.
requesting the directionService is an asynchronous process, your variable t inside the function showLocation will not be modified by the call of directionService.route()
call __doPostBack('gmAPIObj',t) from within the successfull callback of directionService.route() instead.
function postbackObj() {
var orig = document.getElementById('txbOrigin').value;
var dist = document.getElementById('txbDestination').value;
showLocation(orig, dist);
}
//-----
function showLocation(orig, dist) {
var directionService = new google.maps.DirectionsService();
var t = "";
var request = {
origin: orig,
destination: dist,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionService.route(request, function (response, status) {
if (status != google.maps.DirectionsStatus.OK) {
alert(status + " \nreq. failed.");
}
else {
t = request.origin + ';' + request.destination + ';' + response.routes[0].legs[0].distance.value + ';' + response.routes[0].legs[0].duration.value;
__doPostBack('gmAPIObj',t);
}
});
}
I have a javascript function showAlert(). There is a draggable image. After the drag is stopped, we need to show the alert. Its not working How do we correct it?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.draggable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$("#d1").draggable(
{
drag: function (event, ui)
{
},
stop: function (event, ui)
{
showAlert();
},
cursor: "move"
});
});
function showAlert()
{
alert("hai");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:2px solid orange; width:500px; height:300px;" >
<br />
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" runat="server" />
<br />
</div>
</form>
</body>
</html>
I tried with the jquery UI libraries and it worked http://jsfiddle.net/5HyyP/
The image is run on server, so the render ID is different, and the script not found it to use it: Change the javascript
$("#<%=d1.ClientID%>").draggable(
{
OR change the image, remove the run=server
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" />