Why does modal popup in templates only show on some pages?

88 Views Asked by At

Goal: Get modal popup to work on all pages (Note: It's done in codebehind because I need some actions to happen at the same time/before the popup shows)

Problem: I have a modal popup that works on one page (that uses Site.Master template), but does not work on the other page (that uses SiteValidation.Master template) The templates look identical, but the javascript references are placed lower in the aspx for SiteValidation.Master -- I'm not sure why as the developer who wrote this is no longer with us

I am calling the modal from codebehind when a user clicks a Checkbox toggle

What I've tried: I've tried debugging and it gets to the ScriptManager.RegisterStartupScript and upModal.Update() but the popup doesnt show on the pages using SiteValidation.Master I've also tried moving around the js references but it didnt help Ive tried switching the alternate pages to use Site.Master instead of SiteValidation.Master but that caused new problems

Site.Master:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Admin.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">       
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous">
        <link href="Content/admin.css" rel="stylesheet" />

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
    <body>
    <asp:CheckBox ID="chkOnOff12" runat="server" AutoPostBack="true" OnCheckedChanged="cbUpdateAvailability_Click"  />

    <div class="modal fade" id="availabilityModal" tabindex="-1" role="dialog" aria-labelledby="availabilityModal" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                        <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                            <ContentTemplate>
                                <div class="modal-content">
                            <div class="modal-header">
                                <b style="text-align:center;">AVAILABILITY CHANGE</b>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <p align="center">Are you sure you want to make <asp:Literal ID="ProfName" runat="server" /> <asp:Literal ID="availableTxt" runat="server" />?</p>
                                    </div>
                                </div>
                                <br />                          
                            </div>
                            <div class="modal-footer">
                                <div class="margin-center">
                                        <asp:Button ID="btnUpdateAvailability" AutoPostBack="true" runat="server" Text="Yes" CssClass="btn btn-green" ClientIDMode="Static" OnClick="btnUpdateAvailability_Click"/>
                                        <asp:Button ID="btnUpdateAvailabilityNo" AutoPostBack="true" runat="server" Text="No" CssClass="btn btn-secondary" ClientIDMode="Static"  OnClick="btnUpdateAvailability_Click"/>
                                </div>
                            </div>
                        </div>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                </div>
            ...
    </body>
</html>

Site.Master.cs:

protected void cbUpdateAvailability_Click(object sender, EventArgs e)
        {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "availabilityModal", "$('#availabilityModal').modal();", true);
        upModal.Update();
        }
    

SiteValidation.Master.cs:

protected void cbUpdateAvailability_Click(object sender, EventArgs e)
        {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "availabilityModal", "$('#availabilityModal').modal();", true);
        upModal.Update();
        }

How can I get the modal popup to also show on the pages using SiteValidation.Master ?

0

There are 0 best solutions below