jQuery dialog is not opening on second click
Question
I am giving the codes in which link inside gridview1 do not work after closing it once
<script type="text/javascript">
var dialogOptions = {
autoOpen: false,
appendTo: "#dialogContainer",
modal: true,
height: "auto",
width: "auto",
title: "Dialog Title",
closeOnEscape: true,
show: { effect: "fold", duration: 4000 },
buttons: {
Cancel: function () {
$(this).remove();
}
}
};
$(".ui-widget-overlay").live("click", function () {
$("div:ui-dialog:visible").dialog("close");
});
$( function() {
$(".dialog-marker").on("click", function () {
var d = $(this).next("div").first().dialog(dialogOptions);
d.dialog("open");
return false;
});
});
</script>
My aspx page code is
<body>
<form id="form1" runat="server">
<div style="width: 400px;">
<asp:GridView ID="GridView1" OnRowDataBound="GridView1_RowDataBound" runat="server" AutoGenerateColumns="False"
DataKeyNames="BusNo"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="RouteName" HeaderText="RouteName" SortExpression="RouteName" />
<asp:TemplateField HeaderText="Info">
<ItemTemplate>
<div id="divButton" runat="server" class="btn_styling dialog-marker" title="This could also have been a <button> element or maybe an <img> element...anything really">X</div>
<div id="popup" style="display: none;">
<asp:GridView ID="GridView2" runat="server"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource2">
<Columns>
<asp:BoundField DataField="StopName" HeaderText="StopName" SortExpression="StopName" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:constr %>"
SelectCommand="SELECT StopName from BusStops WHERE (BusNo = @BusNo)">
<SelectParameters>
<asp:Parameter Name="BusNo" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BorderColor="Blue" BorderStyle="Solid" BorderWidth="1px" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:constr %>"
SelectCommand="SELECT BusNo,RouteName from BusRoutes">
</asp:SqlDataSource>
</div>
<div id="dialogContainer">
</div>
</form>
</body>
and code behind code is
public void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow) {
GridView gv2 = (GridView)e.Row.FindControl("GridView2");
SqlDataSource sds = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
sds.SelectParameters["BusNo"].DefaultValue = GridView1.DataKeys[e.Row.RowIndex].Value.ToString();
gv2.DataBind();
}
}
2 answers
solution1
0 2015-06-26 03:48:50
Try this may work,
$(document).off("click", ".dialog-marker").on("click", ".dialog-marker", function () {
var d = $(this).next("div").first().dialog(dialogOptions);
d.dialog("open");
return false;
});
The .off() method removes event handlers that were attached with .on(). See the discussion of delegated and directly bound events on that page for more information. Calling .off() with no arguments removes all handlers attached to the elements. Specific event handlers can be removed on elements by providing combinations of event names, namespaces, selectors, or handler function names.
You may refer http://api.jquery.com/off/
solution2
0 2015-06-26 03:50:00
Please add $(".ui-widget-overlay").live("click", function () { inside document.ready . Some thing like this
$(document).ready(function(){
$(".ui-widget-overlay").live("click", function () {
$("div:ui-dialog:visible").dialog("close");
});
$(".dialog-marker").on("click", function () {
var d = $(this).next("div").first().dialog(dialogOptions);
d.dialog("open");
return false;
});
});
Or simply
make a funtion like this and add a function call on onClick event
function showDialogBox(){
var d = $(this).next("div").first().dialog(dialogOptions);
d.dialog("open");
return false;
}
function closeDialogBox(){
$(".ui-widget-overlay").live("click", function () {
$("div:ui-dialog:visible").dialog("close");
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.