Bootstrap Feature not working - Masterpage issue

Question

User-1193791088 posted

I have tried to use a bootstrap dropdown menu feature on a webpage, but is not workings. Says it requires popper.js

I already have the feature on the Masterpage and it works just fine, but on a content page will not work

I used nuget to download the file, says it already exists

Why would it work on the masterpage part of the page, but not on the content part of the page and give the error?

1. yes I have scriptmanager - remember it works on the masterpage!

Answer 1

User503812343 posted

does js file located in your application or cdn? Path may not be accessible from content page physical location. 

Try adding js file like. 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Panel ID="panelContent" GroupingText="ContentPage Controls" runat="server">
        // other control
    </asp:Panel>

    <script type="text/javascript" src="<url>">
            </script>
</asp:Content>

or add code on content page load

Page.ClientScript.RegisterClientScriptInclude("selective", ResolveUrl(@"js url"));

Answer 2

User-1193791088 posted

It also works opposite, If i add it to content page, the masterpage doesn't work? strange

Answer 3

User-943250815 posted

Could you provide some code of your master page and page?

Answer 4

User409696431 posted

"It also works opposite, If i add it to content page, the masterpage doesn't work? strange"

What URL are you using for the JavaScript in each case?

Answer 5

User-887854963 posted

It should not matter if you use a feature in your Layout file, or the actual page as it's all transformed into a single page of html before being sent to the user. Are you sure you're using the feature correctly? You mentioned it asks for popper.js, did you modify the default CDN links that Visual Studio setup for you?

Answer 6

User-1174608757 posted

Hi RobertH3

 According to your description,I suggest you to check the status of page by F12 in  browser. If it shows 404 error to find the script, it means the script path in your page is not right.

Is your project and js folder both  in separate folder? if so, you should add '../' which means find the root of file before  your  reference to your js file  ,such as below.

 <script src="../Scripts/jquery-3.3.1.js"></script>

Best Regards

Wei Zhang

Answer 7

User-1193791088 posted

ANSWER TO THIS PROBLEM FINALLY FOUND!


Reference to Popper.js in Script manager or script MUST COME BEFORE reference to Bootstrap!

<asp:ScriptManager runat="server" ID="ScriptManager" EnablePageMethods="true">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Path="~/Scripts/umd/popper.js" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                
                <asp:ScriptReference Name="WebFormsBundle" />
            </Scripts>
        </asp:ScriptManager>

Answer 8

User2142532087 posted

Hi,

Hi,

I have the same issue.

I have a master page which uses bootstrap dropdown and content page which has a bootstrap modal. i added the popper.js in master page and dropdown pop over working fine but modal dialog at content page stopped. if i add pooper.js reference to content page as well i can see the modal dialog but now popover functionality of master page is gone.

as  you mentioned in your post that you have resolved the issue can you assist me in this.

Regards,

Jamal