Hide Label (Label71) inside Modal popup on Button Click using jQuery in ASP.Net

lingers
 
on Sep 13, 2021 10:50 PM
660 Views

I have this page that has GridView and two (2) jQuery popup window. Normally on popup 1 window pop pot the Label71 is supposed to be false. It was working before, but edited the code so that on button click the page will not load and the Label71 which displays record updated when record is updated refuse to be false.so what it means is that if you update a record it displays, if you come back to that popup windows you will still see the label71 saying record updated even when you have not updated any record, normally it is supposed to be Label71 visible false, but it doesn’t work, It was working before i edited the code to prevent page load on button click

The code where everything works well before i edited it

<%@ Page Language="C#" AutoEventWireup="true"  Debug="true"  CodeFile="Material.aspx.cs" Inherits="Material" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Manage Material</title>    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src=" https://code.jquery.com/jquery-3.5.1.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="ASPSnippets_Pager.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        GetCustomers(1);
    });
    $(document).on("click", '.Pager .page', function () {
        GetCustomers(parseInt($(this).attr('page')));
    });

    $(document).on('click', '.view', function () {
        $('[id*=hfId]').val($(this).closest('tr').find('td').eq(0).html());
    });
    var i = 0;
    function GetCustomers(pageIndex) {
        $.ajax({
            type: "POST",
            url: "Material.aspx/GetCustomers",
            data: '{pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                $('[id$=gvDetails]').prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first"))).DataTable().destroy();
                var xmlDoc = $.parseXML(response.d);
                var xml = $(xmlDoc);
                var customers = xml.find("job_material");
                var row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
                $("[id$=gvDetails] tbody tr").not($("[id$=gvDetails] tbody tr:first-child")).remove();
                $.each(customers, function () {
                    $("td", row).eq(0).html($(this).find("id").text());
                    $("td", row).eq(1).html($(this).find("boardname").text());
                    $("td", row).eq(2).html($(this).find("materialgsm").text());
                    $("td", row).eq(3).html($(this).find("materialcode").text());
                    $("td", row).eq(4).html($(this).find("materialwebwidth").text());
                    $("td", row).eq(5).html($(this).find("costpersqmeter").text());

                    $("[id$=gvDetails]").append(row);
                    row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
                });
                $("[id$=gvDetails] tbody tr:first-child").remove();
                if (i != 0) {
                    $('[id$=gvDetails]').DataTable({
                        "paging": false,
                        "info": false
                    });
                } else {
                    $('[id$=gvDetails]')
                        .prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first")))
                        .DataTable({
                            "paging": false,
                            "info": false
                        });
                }
                i++;
                var pager = xml.find("Pager");
                $(".Pager").ASPSnippets_Pager({
                    ActiveCssClass: "current",
                    PagerCssClass: "pager",
                    PageIndex: parseInt(pager.find("PageIndex").text()),
                    PageSize: parseInt(pager.find("PageSize").text()),
                    RecordCount: parseInt(pager.find("RecordCount").text())
                });
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>
 <script type="text/javascript">
     function ShowPopup() {
         $('#label71').html('');
         $("#dialog").dialog({
             title: "VIEW  MATERIAL  DETAILS",
             width: 830,
             height: 300,
             buttons: {
                 Close: function () {
                     $(this).dialog('close');
                 }
             },
             modal: true
         });
         $("#dialog").parent().appendTo($("form:first"));
     };

     function ShowPopup1() {
         $('#label71').html('');
         $("#dialog1").dialog({
             title: "EDIT  MATERIAL  DETAILS",
             width: 830,
             height: 300,
             buttons: {
                 Close: function () {
                     $(this).dialog('close');
                 }
             },
             modal: true
         });

         $("#dialog1").parent().appendTo($("form:first"));
     };
    </script>
</head>

 

public partial class Material : System.Web.UI.Page
{
    SqlCommand cmd1 = new SqlCommand();
    SqlCommand cmd = new SqlCommand();
    SqlConnection dbConn = new SqlConnection();
    SqlConnection dbConn1 = new SqlConnection();
    SqlConnection dbConn2 = new SqlConnection();
    SqlDataReader dr, dr2, dr1, dr3;
    string selectSQL, updateSQL, selectSQL1;
    private static int PageSize = 45;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDummyRow();
        }

        MainView.ActiveViewIndex = 0;
        MainView1.ActiveViewIndex = 0;
    }

    protected void Tab6_Click(object sender, EventArgs e)
    {
        Tab6.CssClass = "Clicked";
        MainView.ActiveViewIndex = 0;
        gvDetails.UseAccessibleHeader = true;
        gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup()", true);
    }

    protected void Tab2_Click(object sender, EventArgs e)
    {
        Tab2.CssClass = "Clicked";
        MainView1.ActiveViewIndex = 0;
        gvDetails.UseAccessibleHeader = true;
        gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup1()", true);
    }
   
    protected void Inkview_Click(object sender, EventArgs e)
    {
        MainView.ActiveViewIndex = 0;
        Tab6.CssClass = "Clicked";

        gvDetails.UseAccessibleHeader = true;
        gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
        ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "Popup", "ShowPopup();", true);
    }

    protected void Inkview_Click1(object sender, EventArgs e)
    {
        MainView1.ActiveViewIndex = 0;
        Tab2.CssClass = "Clicked";
        gvDetails.UseAccessibleHeader = true;
        gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
        ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "Popup", "ShowPopup1();", true);
    }
}

Please i want Label71 visibility to be false when popup 1 pops out on this second code. It is set to false yet it is visible when popup 1 pops out.

Please help

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 16, 2021 02:29 AM
on Sep 17, 2021 02:31 AM
lingers says:
    protected void Tab6_Click(object sender, EventArgs e)
    {
 
        Tab6.CssClass = "Clicked";
 
        MainView.ActiveViewIndex = 0;
        gvDetails.UseAccessibleHeader = true;
        gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup()", true);
    }
 
    protected void Tab2_Click(object sender, EventArgs e)
    {
         
        Tab2.CssClass = "Clicked";
 
        MainView1.ActiveViewIndex = 0;
        gvDetails.UseAccessibleHeader = true;
        gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup1()", true);
    }

Replace with below code.

protected void Tab6_Click(object sender, EventArgs e)
{
    Label71.Visible = false;
    Tab6.CssClass = "Clicked";
    MainView.ActiveViewIndex = 0;
    gvEmployees.UseAccessibleHeader = true;
    gvEmployees.HeaderRow.TableSection = TableRowSection.TableHeader;
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup()", true);
}

protected void Tab2_Click(object sender, EventArgs e)
{
    Label71.Visible = false;
    Tab2.CssClass = "Clicked";
    MainView1.ActiveViewIndex = 0;
    gvEmployees.UseAccessibleHeader = true;
    gvEmployees.HeaderRow.TableSection = TableRowSection.TableHeader;
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup1()", true);
}

Your label id is Label71.

But in JavaScript you are using label71.

So change with below.

function ShowPopup() {
    $('#Label71').hide();
    $("#dialog").dialog({
        title: "VIEW  CYLINDER  DETAILS",
        width: 830,
        height: 300,
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        },
        modal: true
    });
    $("#dialog").parent().appendTo($("form:first"));
};

function ShowPopup1() {
    $('#Label71').hide();
    $("#dialog1").dialog({
        title: "EDIT  CYLINDER  DETAILS",

        width: 830,
        height: 300,
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        },
        modal: true
    });

    $("#dialog1").parent().appendTo($("form:first"));
};