ASP.NET

Jquery Dialog? RSS

2 replies

Last post Dec 20, 2012 07:12 PM by cenk1536

‹ Previous Thread|Next Thread ›

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.

Keep your friends close and your enemies even closer

- Reply
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.

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.

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"
            });

        }

Keep your friends close and your enemies even closer

Edited by cenk1536 on Feb 05, 2013 12:29 PM

‹ Previous Thread|Next Thread ›

Jquery Dialog? RSS

2 replies

cenk1536

Jquery Dialog?

cornball76

Re: Jquery Dialog?

cenk1536

Re: Jquery Dialog?

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft