WebMediaPortl x64 with IISExpress 10 (1 Viewer)

[ajs]

 

[BCEly]

Thanks for your help - I'm getting closer but there's either a javascript or css issue.

I've put the Bootstrap skin in place and set it as default in settings but with this (or even with the default skin) I can log in but get no layout or functionality if I use http://localhost/WebMediaPort (see attached)

If I use the host name http://tvserver/WebMediaPortal or FQN http://tvserver.stephens-ely.local/WebMediaPortal I just get a blue spinner.

Any thoughts

 

[BCEly]

I've pulled down a newer version of the Bootstrap Skin (Bootstrap.0.7.255) and get past the spinner issue but still the css doesn't load, HOWEVER, the Dark version of the same skin does load fine.

The issue now is that the navigation menus don't work but if you view source and manually enter the links, you can get to the pages.

Is there a know issue with the menus ?

 

[ajs]

Bootstrap Skin (Bootstrap.0.7.255)

Try from Github release page

 

[BCEly]

Is there a GitHub page for that skin or is it the one I took from the MPEx GitHub repository?

This is where I got my copy from...

https://github.com//MPExtended/releases/tag/v0.7.7.x64

 

[BCEly]

I've tried the Bootstrap skins (light and dark) under IIS (x64) and IISExpress 7.5 (x86) environments now and the issue is the same.

In both cases, the navigation dropdown menus do not work so you can't get to any pages other than the defaults offered by the Home page.

If you manually enter the links, they do go to the correct pages.

This is in the Bootstrap Skin v0.7.255 - If anyone has a working version of this or a newer version, can they let me know.

Also, is there a separate Github repository just for the Skin ?

 

[BCEly]

Could be a jquery-3.7.1 issue with an uncaught Error - If I click on my login name at top of skin I get;

3 - jquery-3.7.1.min.js?v=7393293:2 Uncaught Error: Syntax error, unrecognized expression: #
at I.error (jquery-3.7.1.min.js?v=7393293:2:11769)
at Y (jquery-3.7.1.min.js?v=7393293:2:17234)
at re (jquery-3.7.1.min.js?v=7393293:2:20008)
at Function.I [as find] (jquery-3.7.1.min.js?v=7393293:2:7520)
at ce.find (jquery-3.7.1.min.js?v=7393293:2:21991)
at new <anonymous> (jquery-3.7.1.min.js?v=7393293:2:22483)
at ce (jquery-3.7.1.min.js?v=7393293:2:1077)
at i (bootstrap.min.js?v=7393293:6:7876)
at HTMLAnchorElement.toggle (bootstrap.min.js?v=7393293:6:8214)
at HTMLDocument.dispatch (jquery-3.7.1.min.js?v=7393293:2:40035)

I also get an Uncaught Error if I click on the Name of my TVServer in the Nav Bar where you'd expect a drop down and the "RefreshRate" drop down on the Status Page.

The AI error explanation;

The core of the error message is:

Code

Uncaught Error: Syntax error, unrecognized expression: #
Use code snippets with caution

This means that jQuery's selector engine (the part of jQuery that figures out which elements you're trying to select with things like $("#myId"), $(".myClass"), etc.) is being given a selector string that it doesn't understand. In this specific case, the problematic string is just a single #.

Where the Error Happens

The stack trace shows us the path the code took to get to this error:

I.error @ jquery-3.7.1.min.js...: This is where the error is thrown. I.error is a function within jQuery specifically designed to throw errors related to invalid selector syntax.
Y @ jquery-3.7.1.min.js...: and re @ jquery-3.7.1.min.js...: Functions involved in parsing and evaluating the selector.
I @ jquery-3.7.1.min.js This is the jQuery find function.
ce.find @ jquery-3.7.1.min.js...: jQuery's internal mechanism for finding elements.
(anonymous) @ jquery-3.7.1.min.js...: Some anonymous function is ultimately calling into jQuery.
ce @ jquery-3.7.1.min.js...: It seems a jQuery method is used in anonymous function
i @ bootstrap.min.js...: The problem likely originates within Bootstrap's JavaScript code.
toggle @ bootstrap.min.js...: The specific Bootstrap function in use is toggle, very probably related to toggle navbar.
dispatch @ jquery-3.7.1.min.js...: jQuery's event handling system.
(anonymous) @ jquery-3.7.1.min.js...: The Event Handler
The Culprit: An Empty href or data-bs-target Attribute

Based on the error message and the stack trace, the problem almost certainly stems from a link (<a> tag) or other element (like a button) in your HTML that's being used to trigger a Bootstrap component (like a collapse, modal, or dropdown). This link or button has one of the following problems:

Empty href: The href attribute is present but empty (<a href="#"></a> or <a href=""></a>).
Empty data-bs-target or data-target (for older Bootstrap versions): The element intended to open a modal, collapse a div, etc., has an empty or invalid data-bs-target or data-target attribute (<button data-bs-target="#"></button>). The data-bs-toggle or data-toggle attribute might also be the problem.
Why "#" is a Problem When It's Alone

Intended Meaning: When # is followed by an ID (e.g., #myDiv), it's a valid CSS selector that tells jQuery to find an element with that ID.
Problem with Just "#": When # stands alone, it's considered an invalid CSS selector. jQuery doesn't know what to look for.
Code Analysis:

The provided code snippet looks like it is from the internal jQuery, it is not yours and it is ok. It show you the internal way jQuery parse the code. The line of code I.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)} is just the error generator.

How to Fix It

Inspect Your HTML:
Open your web app in your browser.
Right-click and choose "Inspect" or "Inspect Element."
Carefully examine any <a> (links) or other buttons, div elements (for collapses), etc., that are part of Bootstrap components (e.g., modals, accordions, navbars).
Look for href, data-bs-target, data-toggle, data-bs-toggle attributes.
Check if any of them are empty or contain only #.
Correct the Attributes:
Empty href:
If the link is not meant to navigate anywhere, use href="javascript:void(0)" or remove the href attribute completely. It is better to remove it and add type="button" if it is not a link.
If the link is supposed to navigate, make sure it points to a valid URL or a valid element ID (e.g., #someSection).
Empty data-bs-target (or data-target):
This attribute must contain the ID of the element you want to target (e.g., data-bs-target="#myModal", data-target="#myCollapse"). Make sure you have an element with that exact ID in your HTML.
data-bs-toggle or data-toggle
Check that they have a value.

 

[BCEly]

I have resolved this issue by replacing the href="#" to href="/" in the file '_Layout.cshtml' in the folder 'Shared'

It now reads;

<ul class="nav pull-right">
    <li class="dropdown @if (Request.RawUrl.Contains("/Settings")) { <text>active</text> }" >
        <a href="/" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user icon-white"></i> @Html.Raw(Context.User.Identity.Name) <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href='@Url.Action("Index", "Settings")'><i class="icon-wrench"></i> @UIStrings.Settings</a></li>
            <li><a href='@Url.Action("LogOff", "Account")'><i class="icon-off"></i> @UIStrings.LogOff</a></li>
        </ul>
    </li>
</ul>

Resolving this has caused the other dropdown menus to work.

I'll report back if I find any other issues.

Next job is to tackle the 'Duration' of a recording which is incorrect - This Recording for example is 1hour 15mins but shows in the Skin as 15 mins

 

[ajs]

skin

https://github.com//MPExtended/releases/tag/v0.7.7.x64

 

[ajs]

I have resolved this issue by replacing the href="#" to href="/" in the file '_Layout.cshtml' in the folder 'Shared'

I can make a separate repository for the skin and you can make a PR for other people.