Jquery Dialog is not opening on second time click.

Question

0.00/5 (No votes)

See more:

Here is My asps page code Plese Review the code and tell me why the link is not working on second time.

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Example.aspx.cs" Inherits="Example" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<style>
    .btn_styling {
        text-align: center;
        width: 32px;
        margin: 2px;
        cursor: pointer;
        border: 1px solid gray;
        border-radius: 3px; 

       /* add a background image to the div 
          to make the div look like a button */ 
       /* background-image: url('...')  */
    }
    .ui-dialog-titlebar-close {
        display: none;
    }
</style>
    <title></title>
<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");
    });  
  
    $(document).on("click", ".dialog-marker", function () {
      
            var d = $(this).next("div").first().dialog(dialogOptions);
            d.dialog("open");
    });
</script>

</head>
<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</itemtemplate></columns></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:SqlDataSource ID="SqlDataSource2" runat="server" 
                ConnectionString="<%$ ConnectionStrings:constr %>"
                SelectCommand="SELECT StopName from BusStops WHERE (BusNo = @BusNo)">
                <SelectParameters>
                  <asp:Parameter Name="BusNo" />
                </SelectParameters>
              
            </div>
          
        
      
      <rowstyle bordercolor="Blue" borderstyle="Solid" borderwidth="1px" />
    
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
      ConnectionString="<%$ ConnectionStrings:constr %>"
      SelectCommand="SELECT BusNo,RouteName from BusRoutes">
    
  
  <div id="dialogContainer">
  </div>
</form>
</body>
</html>

Posted 26-Jun-15 14:22pm

neeraj773

Updated 26-Jun-15 18:09pm

Suvendu Shekhar Giri

v4

Add a Solution

Comments

Suvendu Shekhar Giri 27-Jun-15 0:14am

Try debugging using F12 debugger of browsers.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sreekanth Mothukuru · Answer 1 · 2015-06-26T20:57:00

Solution 1

Instead of removing the dialog on cancel button click, just hide it or close it which ever applicable.

C#

Cancel: function () 
{
   $(this).hide(); 
   $(this).close();
}

Posted 26-Jun-15 20:57pm

Sreekanth Mothukuru

Comments

neeraj773 27-Jun-15 5:48am

Still after closing link is not working again.

abhishek_singh · Answer 2 · 2015-06-28T21:26:00

Solution 2

Please use below code opening dialog

$('#divSummary').modal('show');

and for hiding model

$('#divSummary').modal('hide');

also for hiding model you can use following attribute on your closing control

data-dismiss="modal"

Posted 28-Jun-15 21:26pm

abhishek_singh