Are you trying to have the modal pop after a button click in the grid?
My initial guess is that your jQuery is firing before the grid is completely done binding, even though you have (document).ready
I'm also curious as to why your page is using jQuery as well as update panels. In my opinion update panels are bad, get rid of them. Especially since you are already using jQuery.
I learn by helping others. I may not always be correct but my intentions are good. If my answer helps please mark it as so.
Actually I changed the logic a little bit. Now I am not using gridview anymore.There is just an empty div on the page to pop up. I am creating the table html on the jquery according to the values returned from the web method.
cenk1536
Contributor
2503 Points
2125 Posts
Jquery Dialog?
Dec 20, 2012 08:10 AM|LINK
Hi,
I have a dialog as follows:
<div id="grid" runat="server" style="display: none;"> <asp:UpdatePanel ID="HasarUpdatePanel" runat="server"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeaderWhenEmpty="True" AllowPaging="True" Width="600px"> <EmptyDataTemplate> Kayıt Bulunamadı. </EmptyDataTemplate> <Columns> <asp:BoundField DataField="Talebi_Yapan" HeaderText="Talebi Yapan"> <ItemStyle Font-Bold="True" /> </asp:BoundField> <asp:BoundField DataField="Talep_Zamanı" HeaderText="Talep Zamanı"> <ItemStyle Font-Bold="True" /> </asp:BoundField> <asp:BoundField DataField="BayiNo" HeaderText="Bayi No"> <ItemStyle Font-Bold="True" /> </asp:BoundField> <asp:BoundField DataField="HasarTipi" HeaderText="Hasar Tipi"> <ItemStyle Font-Bold="True" /> </asp:BoundField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:EformsConnectionString %>" ProviderName="<%$ ConnectionStrings:EformsConnectionString.ProviderName %>" SelectCommand="select u.Name AS 'Talebi_Yapan', CONVERT(CHAR(10),th.CreationDate,104) + SUBSTRING(CONVERT(varchar,th.CreationDate,113),12,9) AS 'Talep_Zamanı',thk.BayiNo,thht.HasarTipi from Eform_TerminalHasar th INNER JOIN Eform_TerminalHasar_Kalem thk ON th.EFormID = thk.EformID INNER JOIN Eform_TerminalHasar_HasarTipi thht ON thk.HasarTipi = thht.HasarTipiID INNER JOIN Eform_TerminalHasar_FaturaEdilecekKisi thf ON thk.KimeFaturaEdilecek = thf.KisiTipiID INNER JOIN Users u ON th.CreatedBy = u.SAMAccountName where thk.BayiNo = @BayiNo"> <SelectParameters> <asp:ControlParameter Name="BayiNo" ControlID="TextBox_bayino" PropertyName="Text" DefaultValue=" " /> </SelectParameters> </asp:SqlDataSource> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div>And here is how I make it modal dialog in jquery:
$(document).ready(function ($) { var bayino = "<%= TextBox_bayino.ClientID %>"; var btn = "<%= Button1.ClientID %>"; $("#" + bayino).live('blur', function () { if ($("#" + bayino).val() != '') { alert("POST"); __doPostBack("#" + btn, null); jQuery.ajax({ type: "POST", async: false, url: "TerminalHasar.aspx/IsDamagedVendor", data: "{bayino: '" + $("#" + bayino).val() + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, error: OnError }); } }); }); var grid = "<%= grid.ClientID %>"; var bayiadi = "<%= TextBox_bayiadi.ClientID %>"; function OnSuccess(response) { alert(response.d); if (response.d) { $("#" + grid).dialog({ resizable: false, height: 230, width: 650, modal: true, title: "Hasar / Kayıp-Çalıntı Kaydı", buttons: { "Continue": function () { $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); $(window.location).attr('href', 'http://www.google.com'); } } }); } }The problem is the gridview on this dialog. How can I bind this GridView before it is pop up?
Best Regards.
cornball76
Participant
1128 Points
211 Posts
Re: Jquery Dialog?
Dec 20, 2012 05:02 PM|LINK
Are you trying to have the modal pop after a button click in the grid?
My initial guess is that your jQuery is firing before the grid is completely done binding, even though you have (document).ready
I'm also curious as to why your page is using jQuery as well as update panels. In my opinion update panels are bad, get rid of them. Especially since you are already using jQuery.
cenk1536
Contributor
2503 Points
2125 Posts
Re: Jquery Dialog?
Dec 20, 2012 07:12 PM|LINK
Actually I changed the logic a little bit. Now I am not using gridview anymore.There is just an empty div on the page to pop up. I am creating the table html on the jquery according to the values returned from the web method.
Here is my javascript:
$(document).ready(function ($) { var drp = "<%= DropDownList_faturaEdilecekKisi.ClientID %>"; var bayi = "<%= bayi.ClientID %>"; var ad = "<%= ad.ClientID %>"; $("#" + drp).change(function () { // alert($("#" + drp).val()); //Added to test whether the event is fired or not if ($("#" + drp).val() == "1") { $("#" + bayi).show(); $("#" + ad).show(); } else { $("#" + bayi).hide(); $("#" + ad).hide(); } }); }); $(document).ready(function ($) { var bayino = "<%= TextBox_bayino.ClientID %>"; var btn = "<%= Button1.ClientID %>"; $("#" + bayino).live('blur', function () { if ($("#" + bayino).val() != '' && $.trim($("#" + bayino).val()) != '') { // alert("POST"); jQuery.ajax({ type: "POST", async: false, url: "TerminalHasar.aspx/IsDamagedVendor", data: "{bayino: '" + $("#" + bayino).val() + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, error: OnError }); } }); }); var grid = "<%= grid.ClientID %>"; var bayiadi = "<%= TextBox_bayiadi.ClientID %>"; var vName; var talepYapan; function OnSuccess(response) { // alert(response.d); $("#" + grid).html(""); var table = "<table id=tblResult width=630px border=2 cellpadding=2 bordercolor=#000000 bgcolor=#E0DCDC><thead><tr> <th>Talebi Yapan</th> <th>Talep Zamanı</th> <th>Bayi No</th> <th>Hasar Tipi</th> </tr></thead><tbody>"; for (var i = 0; i < response.d.length; i++) { var row = "<tr>"; row += "<td>" + response.d[i].CreatedBy + "</td>"; row += "<td>" + response.d[i].CreationDate + "</td>"; row += "<td>" + response.d[i].VendorNo + "</td>"; row += "<td>" + response.d[i].DamageType + "</td>"; row += "</tr>"; table += row; vName = response.d[i].CompanyName; talepYapan = response.d[i].CreatedBy; } table += "</tbody></table>"; // alert(talepYapan); if (talepYapan) { $("#" + grid).append(table); $("#" + grid).dialog({ resizable: false, height: 230, width: 650, modal: true, title: "Hasar / Kayıp-Çalıntı Kaydı", buttons: { "Devam": function () { $(this).dialog("close"); $("#" + bayiadi).val(vName); }, "İptal": function () { $(this).dialog("close"); $(window.location).attr('href', 'https://eforms.abc.com.tr/Default.aspx'); } } }); } else { $("#" + bayiadi).val(vName); } } function OnError(xhr, status, error) { alert("Error"); var err = eval("(" + xhr.responseText + ")"); jQuery.ajax({ type: "POST", async: false, url: "TerminalHasar.aspx/OnBlurError", data: "{msg: '" + err.Message + "'}", contentType: "application/json; charset=utf-8", dataType: "json" }); }