It doesn't work on google chrome but works fine on IE

It doesn't work on google chrome but works fine on IE

The modal dialog works fine when I click on the gridview row on windows explorer, but it doesn't function at all when I try it on Chrome.


  2. <head id="Head1" runat="server">
  3.     <title>test</title>
  4.    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  5.     <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  6.     <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

  8.  
  9.     <style type="text/css">
  10.     
  11.     .ui-widget {
  12.     font-size:10%;
  13. }
  14.     </style>

  16.    <script type="text/javascript">
  17.        $(function () {
  18.            var tr = $('#GridView1').find('tr');
  19.            tr.bind('click', function (event) {
  20.                var tds = $(this).find('td:not(:first-child)');


  23.                $.each(tds, function (index, item) {
  24.                    $('#txtbadd' + (index + 1)).val(item.innerHTML);
  25.                });


  28.            });
  29.        });

  31.        $(function () {
  32.            $("#modialog").dialog({
  33.                autoOpen: false,
  34.                height: 270,
  35.                modal: true,
  36.                buttons: {
  37.                    Update: function () {

  39.                        $.ajax({

  41.                            type: "POST",
  42.                            url: "WebService.asmx/AddToDB",
  43.                            data: "{str1:'" + $("#txtbadd1").val() + "', 'str2': '" + $("#txtbadd2").val() + "', 'str3': '" + $("#txtbadd3").val() + "', 'str4': '" + $("#txtbadd4").val() + "', 'str5': '" + $("#txtbadd5").val() + "', 'str6': '" + $("#txtbadd6").val() + "'}",
  44.                            contentType: "application/json; charset=utf-8",
  45.                            dataType: "json",
  46.                            success: function (msg) {
  47.                                alert(msg.d);
  48.                            }
  49.                        });

  51.                    },
  52.                    Delete: function () {
  53.                        $(this).dialog("close");
  54.                    },
  55.                    Cancel: function () {
  56.                        $(this).dialog("close");
  57.                    }
  58.                }
  59.            });

  61.            $("#GridView1").click(function () {
  62.                $("#modialog").dialog("open");
  63.                return false;
  64.            });
  65.        });

  67.        </script>

  69. </head>
  70. <body>
  71.     <form id="form1" runat="server">
  72.     <p>Last unsaved data:</p><br /><br />

  74.                     <asp:GridView ID="GridView1" runat="server"
  75.                     Width="900px" CellPadding="4" 
  76.                     ForeColor="#333333" GridLines="None">
  77.                     <AlternatingRowStyle BackColor="White" />
  78.                     <Columns>
  79.                         <asp:TemplateField>
  80.                             <ItemTemplate>
  81.                                 <input type="button" id="upbutt" value="edit" />
  82.                             </ItemTemplate>
  83.                 
  84.                         </asp:TemplateField>
  85.                     </Columns>
  86.                     <EditRowStyle BackColor="#7C6F57" />
  87.                     <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
  88.                     <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
  89.                     <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
  90.                     <RowStyle BackColor="#E3EAEB" />
  91.                     <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
  92.                     <SortedAscendingCellStyle BackColor="#F8FAFA" />
  93.                     <SortedAscendingHeaderStyle BackColor="#246B61" />
  94.                     <SortedDescendingCellStyle BackColor="#D4DFE1" />
  95.                     <SortedDescendingHeaderStyle BackColor="#15524A" />
  96.                 </asp:GridView>
  97.  


  100.                 <div id="modialog" title="Modify selected row." >
  101.                 <table>
  102.                 <tr>
  103.                 <td><asp:Label ID="Label1" runat="server" Text="ID:"></asp:Label> </td>
  104.                 <td><asp:TextBox ID="txtbadd1" runat="server" ReadOnly="true"></asp:TextBox></td>
  105.                 </tr>
  106.                 <tr>
  107.                     
  108.                 <td><asp:Label ID="Label2" runat="server" Text="Name:"></asp:Label> </td>
  109.                 <td><asp:TextBox ID="txtbadd2" runat="server"></asp:TextBox></td>
  110.                 </tr>
  111.                 <tr>
  112.                 <td><asp:Label ID="Label3" runat="server" Text="Code:"></asp:Label> </td>
  113.                 <td><asp:TextBox ID="txtbadd3" runat="server"></asp:TextBox></td>
  114.                 </tr>
  115.                 <tr>
  116.                 <td><asp:Label ID="Label4" runat="server" Text="Address:"></asp:Label> </td>
  117.                 <td><asp:TextBox ID="txtbadd4" runat="server"></asp:TextBox></td>
  118.                 </tr>
  119.                 <tr>
  120.                 <td><asp:Label ID="Label5" runat="server" Text="Phone:"></asp:Label> </td>
  121.                 <td><asp:TextBox ID="txtbadd5" runat="server"></asp:TextBox></td>
  122.                 </tr>
  123.                 <tr>
  124.                 <td><asp:Label ID="Label6" runat="server" Text="nthg:"></asp:Label> </td>
  125.                 <td><asp:TextBox ID="txtbadd6" runat="server"></asp:TextBox></td>
  126.                 </tr>
  127.                 </table>
  128.                 </div>
  129.     </form>



  133.               
  134.    
  135. </body>
  136. </html>