I have multiple Usercontrols in my project. Please find below two such Usercontrols' markup.
Places Usercontrol
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Places.ascx.cs" Inherits="Places" EnableTheming="true" %>
<script type="text/javascript">
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
SetAutoComplete();
});
function SetAutoComplete() {
$("[id$=txtLocation]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetLocations") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfLocation]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />
Skills User Control
<%# Control Language="C#" AutoEventWireup="true" CodeFile="UCSkill.ascx.cs" Inherits="UCSkill" EnableTheming="true" %>
<script type="text/javascript">
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
SetAutoComplete();
});
function SetAutoComplete() {
$("[id$=txtSkill]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetSkills") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfSkillID]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtSkill" runat="server" SkinID="lg-TB"></asp:TextBox>
<asp:Button ID="btnAddSkill" runat="server" Text="Add" OnClick="btnAddSkill_Click" />
<asp:HiddenField ID="hfSkillID" runat="server" />
Now my problem is, if use both the usercontrols in same page as below, only the one in the bottom works, i.e., my PlacesUC works and SkillsUC doesn't work, it just remains blank and doesn't throw any error even. If I move PlacesUC to top and SkillsUC to bottom, then my SkillsUC works and PlacesUC doesn't work. To make it clear the last usercontrol in the page alone works. Rest all Usercontrols above it doesn't work. It may be a conflict with ready function or autocomplete function. How to resolve this?
<%# Page Language="C#" CodeFile="Test.aspx.cs" Inherits="Test" MasterPageFile="~/UI/HomePage.master" %>
<%# Register Src="~/UControls/Places.ascx" TagPrefix="uc1" TagName="Places" %>
<%# Register Src="~/UControls/UCSkill.ascx" TagPrefix="uc1" TagName="UCSkill" %>
<asp:Content ContentPlaceHolderID="PageContent" runat="server">
<div class="row">
<div class="col-md-12 form-inline">
<table class="table table-sm">
<tr>
<td>
<uc1:UCSkill runat="server" ID="UCSkill" />
</td>
</tr>
<tr>
<td>
<uc1:Places runat="server" ID="Places" />
</td>
</tr>
</table>
</div>
</div>
</asp:Content>
Edit:-
My Ajax Call Function is as follows.
function AjaxCall(url, prefix, response) {
$.ajax({
url: url,
data: "{ 'prefix': '" + prefix + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('|')[0],
val: item.split('|')[1]
};
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
}
My master page is as follows.
<%# Master Language="C#" CodeFile="HomePage.master.cs" Inherits="HomePage" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>e-Recruitment</title>
</head>
<body style="padding-left: 5px; padding-right: 5px">
<style type="text/css">
.borderless td, .borderless th {
border: none;
}
.checkboxlist-inline li, .radiobuttonlist-inline li {
display: inline-block;
}
.checkboxlist-inline, .radiobuttonlist-inline {
margin-left: 8px;
}
.checkboxlist-inline label, .radiobuttonlist-inline label {
padding-left: 0;
padding-right: 8px;
}
</style>
<script src="../Scripts/jquery-3.2.1.slim.min.js"></script>
<script src="../Scripts/popper.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery-ui.css" rel="stylesheet" />
<form id="MainForm" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Company" Name="Company.JavaScript.CompanyScript.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="MainUpdPanel" runat="server">
<ContentTemplate>
<div id="ParentDiv" class="container-fluid">
<div class="row">
<div class="col-md-1">
<img src="../Content/Images/logonew.png" class="img-responsive" />
</div>
<div class="col-md-11">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="col-md-12">
<asp:ContentPlaceHolder ID="PageContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="col-md-12">
<br />
<table class="table table-hover">
<tr>
<td style="width: 10%">
<asp:Label ID="lblTheme" runat="server" Text="Site Theme"></asp:Label>
</td>
<td style="width: 20%; text-align: left">
<asp:DropDownList ID="ddlTheme" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlTheme_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td style="width: 70%; text-align: right">
<small><i>©<asp:Label ID="lblComp" runat="server" Text=" Company 2018"></asp:Label>
®<asp:Label ID="lblRights" runat="server" Text=" All Rights Reserved"></asp:Label></i></small>
</td>
</tr>
</table>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Please update Jquery to select closest control to call your
SetAutoComplete();
code then all controls will work.
please check this line in your doucment.ready code.
prm.add_endRequest(EndRequest);
page is throwing
EndRequest is not defined error
.
Thank you all for your help, Finally the following solution worked.
All the Function names should be unique.
On page postback UpdatePanel content changes, so the events need to be registered again.
Considering the above two points, following is the new code.
Places User Control
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Places.ascx.cs" Inherits="Places" EnableTheming="true" %>
<script type="text/javascript">
$(function () {
GetLocations();
});
var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
prmInstance.add_endRequest(function () {
GetLocations();
});
function GetLocations() {
$("[id$=txtLocation]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetLocations") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfLocation]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />
Skill User Control
<%# Control Language="C#" AutoEventWireup="true" CodeFile="UCSkill.ascx.cs" Inherits="UCSkill" EnableTheming="true" %>
<script type="text/javascript">
$(function () {
GetSkills();
});
var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
prmInstance.add_endRequest(function () {
GetSkills();
});
function GetSkills() {
$("[id$=txtSkill]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetSkills") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfSkillID]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtSkill" runat="server" SkinID="lg-TB"></asp:TextBox>
<asp:Button ID="btnAddSkill" runat="server" Text="Add" OnClick="btnAddSkill_Click" />
<asp:HiddenField ID="hfSkillID" runat="server" />
Related
I want to run jquery code when i click on a button.
This is my jquery code:
<script src="scripts/jquery-1.4.1.js"></script>
<script type ="text/javascript" >
$(document).ready(function () {
$('#searchtextbtn').click(function () {
alert("Hello");
});
});
</script>
And my html looks like:
<body>
<div id="content_inner">
<div class ="page_header">
<h2>Location Master</h2>
<div id="search">
<table width="100%">
<tr>
<td align="left">
<font color="#AFBECF">#Html.Label("Search")</font>
</td>
<td>
<input id="searchtextbtn" type="submit" value="search">
<input id="searchtextbtn" type="button" value="search"> #*not woring*#
</td>
</tr>
</table>
</div></div></div>
But here when i click on the button nothing happens.
This is the page once I run my project:
When I click on the "Location Master" link, partial view will be displayed like this:
which contain search button.
Add the following CDN to your code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
I have (I think) a simple problem. I'm building application with Asp.net and I want to show something (for example "!!!") after user left empty textbox. I cannot use standard validation components in Asp.net because it blocks every postback.
My attempt:
<html>
<head runat="server">
<script src="/Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.validation-control-is-not-empty').focusout(function () {
if ($(this).val() === '') {
$(this).next('.validation-alert').show();
}
else {
$(this).next('.validation-alert').hide();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Validation test</h1>
<div>
<table>
<tr>
<td>
<asp:TextBox ID="TbName" CssClass="validation-control-is-not-empty" runat="server" />
</td>
<td>
<div class="validation-alert" style="display: none;">!!!</div>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TbMessage" CssClass="validation-control-is-not-empty" runat="server" />
</td>
<td>
<div class="validation-alert" style="display: none;">!!!</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Focus lost is calling my function but the problem is that this:
$(this).next('.validation-alert')
will not find the next needed object... What am I doing wrong?
Thanks for your help.
Because .validation-alert is not the next sibling of .validation-control-is-not-empty, they are the children of same tr, so you can find the tr parent of this and then find the .validation-alert element within it.
$('.validation-control-is-not-empty').focusout(function () {
if ($(this).val() === '') {
$(this).closest('tr').find('.validation-alert').show();
} else {
$(this).closest('tr').find('.validation-alert').hide();
}
});
You can shorten it using .toggle() like
$('.validation-control-is-not-empty').focusout(function () {
$(this).closest('tr').find('.validation-alert').toggle($(this).val() === '');
});
Demo: Fiddle
When i click into the Button which is placed inside a usercontrol, i dont get the values that are inputted into the textbox on the button click event. please suggest any alternate.
my UserControl Markup:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SearchPopup.ascx.cs"
Inherits="trg.dgs.sites.web.ui.ui.charternew.usercontrol.SearchPopup" %>
<script type="text/javascript">
// function searchPopuptester() {
// debugger;
// var address = document.getElementById('<%= txtAddress.ClientID %>').value;
// //alert(address);
// var zip = document.getElementById('<%= txtZip.ClientID %>').value;
// // alert(zip);
// var aptnum = document.getElementById('<%= txtSuite.ClientID %>').value;
// alert(aptnum);
// debugger;
// $.ajax({
// type: "GET",
// url: "ui/charternew/usercontrol/SearchPopup.ascx/SearchAddress",
// data: [{ address: address, suite: aptnum, zip: zip}],
// datatype: "json",
// success: function (data) {
// window.location = data.d;
// },
// failure: function () {
// alert("Sorry,there is a error!");
// }
// });
// }
</script>
<div class="form_wrapper">
<div class="formarea">
<div class="form_heading">
<h4>
Check Service Availability</h4>
<p>
TO FIND THE BEST DEALS IN YOUR AREA</p>
</div>
dddddddddddd
<p>
<img src="ui/charternew/images/lock_icon.png" alt="Lock Icon" class="lock_icon" />Your
Information is Private and Secure</p>
<div class="feild_set">
<div class="feild_bar">
<asp:TextBox ID="txtAddress" runat="server" MaxLength="30" CssClass="feild1" />
</div>
<div class="feild_bar">
<div class="apt_feild">
<asp:TextBox ID="txtSuite" runat="server" MaxLength="25" CssClass="feild2" />
</div>
<div class="zipcode_feild">
<asp:TextBox ID="txtZip" runat="server" MaxLength="5" CssClass="feild2" />
</div>
</div>
<div class="feild_bar">
<asp:CheckBox ID="Ismoving" CssClass="tflables" TextAlign="right" runat="server"
Checked="false" />
<label>
Moving?</label>
<label id="lblMoveDate" style="display: none;">
<asp:TextBox ID="txtmovedate" runat="server" CssClass="txtfield" MaxLength="50" />
</label>
</div>
<asp:LinkButton ID="btnSubmit" runat="server" CssClass="btn" OnClick="btnSubmit_Click">Find My BEST Deals</asp:LinkButton>
</div>
<!-- End Form -->
</div>
</div>
My UserControl Code:
protected void btnSubmit_Click(object sender, EventArgs e)
{
string add = txtAddress.Text; }
I have my masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="KezberProjectManager.master.cs" Inherits="KezberProjectManager.KezberProjectManager" %>
<!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>
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<link href="assets/css/kezblu.styles.css" rel="stylesheet"/>
<style type="text/css">
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="assets/js/kezcommon.js"></script>
<script type="text/javascript">
$(document).ready
(
function () {
createAutoClosingAlert('.success_alert', 6000);
}
);
function createAutoClosingAlert(selector, delay) {
var alert = $(selector).alert();
window.setTimeout(function () { $(alert).slideUp() }, delay);
}
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater runat="server" id="MenuRepeater">
<headertemplate>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">KezBlu</a>
<div class="nav-collapse collapse">
<ul class="nav">
</headertemplate>
<itemtemplate>
<%# Eval("Content") %>
</itemtemplate>
<footertemplate>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</footertemplate>
</asp:Repeater>
<div id="wrap">
<div id="content">
<div id="alerts">
<div class="bs-docs-example">
<div id="auth">
<asp:HyperLink id="HyperLink1" runat="server">HyperLink</asp:HyperLink>
</br>
<asp:HyperLink id="HyperLink2" runat="server">HyperLink</asp:HyperLink>
</div>
<div runat="server" id="success_alert" class="success_alert alert alert-success fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<div runat="server" id="success_alert_text">
</div>
</div>
</div>
<div class="bs-docs-example">
<div runat="server" id="error_alert" class="error_alert alert alert-error fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<div runat="server" id="error_alert_text">
</div>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>
In there I have:
<div id="auth">
<asp:HyperLink id="HyperLink1" runat="server">HyperLink</asp:HyperLink>
</br>
<asp:HyperLink id="HyperLink2" runat="server">HyperLink</asp:HyperLink>
</div>
Like this, the links show up fine in code behind.
Now, if I move them into my repeater's footer:
...
<div class="nav-collapse collapse">
<ul class="nav">
</headertemplate>
<itemtemplate>
<%# Eval("Content") %>
</itemtemplate>
<footertemplate>
</ul>
<div id="auth">
<asp:HyperLink id="HyperLink1" runat="server">HyperLink</asp:HyperLink>
</br>
<asp:HyperLink id="HyperLink2" runat="server">HyperLink</asp:HyperLink>
</div>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</footertemplate>
</asp:Repeater>
Then they no longer can be used in code behind.
I really really do not understand this.
Why is it not working?
The RepeaterItem has a different NamingContainer. You can access only controls that are on top of the page directly since these controls are created in the partial codebehind class automatically. You have to use FindControl to get the reference of a control in a RepeaterItem.
In this case you could use the Repeater's ItemDataBound event:
protected void Repater1_ItemDataBound(Object Sender, RepeaterItemEventArgs e)
{
// This event is raised for the header, the footer, separators, and items.
if (e.Item.ItemType == ListItemType.Footer)
{
HyperLink hl = (HyperLink)e.Item.FindControl("HyperLink1");
}
}
Because the controls are no longer on the main form they are no longer properties of the Page. They can instead be accessed through the Repeater.
See this question for an example on accessing the controls through the Repeater.
When you are putting objects into Repeaters, Grids, etc, you have to do a lot more processing in the backend to be able to find them. Basically when the repeater is bound, you can go through and search for the object, and then access its properties.
For example here is a link to some code for a repeater looking up the various item controls when an Item is bound
protected void rptTaskListOnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
var lnkEdit = e.Item.FindControl("lnkEdit") as HyperLink;
var lnkDelete = e.Item.FindControl("lnkDelete") as LinkButton;
var pnlAdminControls = e.Item.FindControl("pnlAdmin") as Panel;
var t = (Task)e.Item.DataItem;
if (IsEditable && lnkDelete != null && lnkEdit != null && pnlAdminControls != null)
{
pnlAdminControls.Visible = true;
lnkDelete.CommandArgument = t.TaskId.ToString();
lnkDelete.Enabled = lnkDelete.Visible = lnkEdit.Enabled = lnkEdit.Visible = true;
lnkEdit.NavigateUrl = EditUrl(string.Empty, string.Empty, "Edit", "tid=" + t.TaskId);
ClientAPI.AddButtonConfirm(lnkDelete, Localization.GetString("ConfirmDelete", LocalResourceFile));
}
else
{
pnlAdminControls.Visible = false;
}
}
}
Personally I have never tried to get to the controls in a header or footer of a repeater, but I am sure it would be something similar
I have datepicker in modal popup dialog. In first iteration everything is ok. When I open the popup second time the clandar icon in datepicker is missing, general datepicker is not responding. I assume it is not proper instantiate.
Bellow is the difference comapre to default project MVC 2.0:
Index.aspx:
<asp:content id="Content2" contentplaceholderid="MainContent" runat="server">
<link href="../../Content/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script type="text/javascript">
function updatePlaceholder(context) {
// the HTML output of the partial view
var html = context.get_data();
// the DOM element representing the placeholder
var placeholder = context.get_updateTarget();
// use jQuery to update the placeholder. It will execute any JavaScript statements
$(placeholder).html(html);
// return false to prevent the automatic update of the placeholder
return false;
}
</script>
<%: Ajax.ActionLink("Show popup", "Popup", new AjaxOptions { UpdateTargetId = "popup", OnSuccess = "updatePlaceholder" })%>
<div id="popup" style="visibility: hidden">
</div>
HomeController.cs
public ActionResult Popup() {
return PartialView("PopupControl");
}
PopupControl.ascx
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<script src="../../Scripts/jquery.bgiframe-2.1.2.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.core.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.mouse.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.draggable.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.position.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.resizable.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.dialog.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-modal").dialog({
height: 250,
width: 450,
modal: true
});
$("#dateFrom").datepicker({
showOn: "button",
buttonImage: "../../Content/Images/calendar.gif",
buttonImageOnly: true,
showButtonPanel: true
});
$("#dateTo").datepicker({
showOn: "button",
buttonImage: "../../Content/Images/calendar.gif",
buttonImageOnly: true,
showButtonPanel: true
});
});
</script>
<div id="dialog-modal" title="My popup">
<% using (Html.BeginForm("PopupClosed", "Home")) { %>
<div class="search-table">
<table>
<tr>
<td class="col1">
<p>
Valid from:
</p>
</td>
<td>
<input type="text" id="dateFrom" name="From" style='width: 100px;' />
</td>
</tr>
<tr>
<td class="col1">
<p>
Valid to:
</p>
</td>
<td>
<input type="text" id="dateTo" name="To" style='width: 100px;' />
</td>
</tr>
<tr>
<td class="col1">
</td>
<td align="right">
<input class="search-button" name="" type="submit" value="Go" />
</td>
</tr>
</table>
</div>
<% } %>
</div>
Thanks in advance,
Leszek
SOLUSION
<script type="text/javascript">
$(function () {
$("#dialog-modal").dialog({
height: 300,
width: 450,
modal: true,
resizable: false,
create: function(event, ui) {
$("#dateFrom").datepicker({
showOn: "button",
buttonImage: "#Url.Content("~/Content/Images/calendar.gif")",
buttonImageOnly: true,
showButtonPanel: true
});
$("#dateTo").datepicker({
showOn: "button",
buttonImage: "#Url.Content("~/Content/Images/calendar.gif")",
buttonImageOnly: true,
showButtonPanel: true
});
},
close: function(event, ui) {
$("#dateFrom").datepicker("destroy");
$("#dateTo").datepicker("destroy");
$("#ui-datepicker-div").remove();
$(".ui-dialog").remove();
$("#dialog-modal").remove();
}
});
});
</script>
I think you should use dialog.("close") not destroy.
and
Use the Jquery Dialog buttons to add a "Go" button to your partial view.
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
http://jqueryui.com/demos/dialog/#modal-message