flask admin template not displaying javascript

Looking for guidance on implementing this template found at https://github.com/secondtruth/startmin. You can view a live demo here:

The HTML file functions correctly when opened locally in a web browser, but there seems to be an issue with loading the JavaScript for drop-down menus when running it with Flask. All CSS and JS files from the static folder load with a 200 OK status.

Upon accessing through Flask, Firefox console prints out the following error:

Error: Graph container element not found - morris.min.js:6:1340

These are the contents of my files: home.html

 <title>Startmin - Bootstrap Admin Theme</title>

 <!-- Bootstrap Core CSS -->
 ...
 ...
</body> </html>
jqueryhtmlcssflaskbootstrap-4

Answer №1

Whenever I initiate flask, the JavaScript for drop down menus fails to load.

This issue arises because you have not loaded popper.js, which is necessary for all pop-up or drop-down functionalities in Bootstrap 4.

Additionally, it seems that the template you are referencing (the live demo) is utilizing a outdated version of Bootstrap - specifically, Bootstrap v3.3.2, whereas the current version of Bootstrap 3 is actually Bootstrap v3.3.7. It's important to note that Bootstrap 3 and Bootstrap 4 are quite distinct from each other, like comparing a truck to a sports car.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discard the response body while redirecting in Flask

Here is what I have: @app.route('/hello') def hello(): return redirect('/world', code=307) The issue I'm facing is that the response body includes unnecessary HTML. Since I am redirecting to an image, this extra content is no ...

pythonflaskhttp-redirect

Discover a specific sub-string and then swap it out with a different HTML or Angular

Hello, I have an object that looks like this: { "Properties": [ "Name: Steven", "Country: Australia" ] } I am receiving this object as a string from our backend. My task now is to display it in a popup using HTML. Here is how I attemp ...

htmlangularjsjsonreplacefind

Incorporate a YouTube video into your content without including a direct

When you embed a YouTube video on your website, it works well. However, clicking on any part of the screen will open the YouTube website in a new window. Is there a method to embed a YouTube video on our site and prevent the YouTube website from opening w ...

jqueryajaxvideomootoolsyoutube

Using ASP.NET MVC to encode and transmit strings via jQuery AJAX communication

I'm currently working on my website and incorporating jquery ajax to send data to a controller. I am looking for a way to encode data using jquery/javascript in order to send strings such as javascript code. How can I go about doing this efficiently? ...

jqueryasp.netasp.net-mvc-3

Creating an overflow effect for sliders using only CSS

Is it feasible to develop a slider that extends beyond its parent elements and the body? The concept involves having content within a section housed in a container. The slider would be part of this section, with slides overflowing past the parent element ...

csssliderpositionoverflow

Effortless Form Filling using PHP Ajax

There are two text fields on my form: no_id and customer_name. As the user types in no_id, customer_name is automatically populated. Form <form> <input type="text" name="no_id" onkeyup="autofill()" id="no_id"> <input type="text" name=" ...

phpjqueryajax

Error in AngularJs addition calculation

Within a table, I have three columns titled deduction, advance, and total. The values for the first two columns are retrieved from the database, while the third column should display the sum of the first two columns but instead shows a concatenated resul ...

htmlangularjstwitter-bootstrap

Show the time with AM/PM without displaying the year, month, or day

Currently, I am struggling to show the time as AM when my website loads using the format mm-dd-yyyy --:-- AM in a datetime-local input. The value attribute of datetime-local is causing some confusion for me. ...

javascripthtmlcss

The validation of forms using ajax and jsp is not functioning

I've been working on developing a username validation system using JSP and AJAX, but I keep encountering an error that looks like this: POST ://localhost:8080/web_application/deneme.jsp Error Message: 405 (Method Not Allowed) This is my JSP page, c ...

javajavascriptjqueryajaxjsp

Utilizing Jquery Tooltipster to Interact with DOM Elements Post-AJAX

I've been encountering some issues with the Tooltipster jQuery plugin and AJAX: Clicking on a link to launch Tooltipster works fine Receiving a form through AJAX is also successful However, I am unable to interact with the input fields in my form Be ...

jqueryajaxtooltipster

Creating a loading bar through the animation of a linear-gradient

Creating a loading bar with a single colored element moving along a grey bar is my current project. Unfortunately, I struggle with animating gradients in CSS. I found a solution that seems promising based on this answer: Make some gradient move endlessly ...

css

What is the best way to assign specific variables in a PHP loop using form input?

Let's say I have a basic HTML form displayed below: <div class="form-group"> <label class="control-label" for="checkboxes" name="industry">How would you classify your business?</label> ...

phphtmlarraysforms

Discover the best way to integrate your checkbox with your Jquery capabilities!

I am having trouble getting my 3 checkboxes to interact with the JQuery button I created. The goal is for the user to be able to select an option, and when the button is clicked, the selected options should download as a CSV file from my feeds. Below is th ...

javascriptjqueryajax

What is the best way to perfectly align an SVG inside its container?

Is there a way to horizontally center this SVG within .svg_wrapper? .svg_wrapper { border: 1px solid grey; width: 200px; } <div class="svg_wrapper"> <svg viewBox="0 0 600 425"> <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 ...

csssvg

Jumpstarting jQuery's constructor

Is there a way to modify jQuery's constructor in order to add additional functionality before its default behavior kicks in? For example, let's say we want to enable automatic caching... Pseudo-code ahead! var _init = $.fn.init; var cache = [] ...

jquery

Background Image Troubling CSS Issue

I am having an issue with adding a background image to my site header. The main content should cover part of the image, but even after setting the z-index, it's not working as expected. You can view the website here Any ideas why this might be happe ...

cssbackground-imagez-index

Is there a way to connect horizontal Divs so that when one increases in height, a linked Div also increases in height?

Looking to design a form with three interconnected horizontal divs, creating a structure similar to HTML table rows or spreadsheet cells. Let's imagine a series of horizontal divs: Column1 Column2 Column3 ...as Column2 increases in height ( ...

jqueryhtmlcsstwitter-bootstrap

What sets apart the process of Installing Bootstrap with incorporating its suggested files into an HTML document?

As a novice in the world of web development, I find myself grappling with confusion. My current learning endeavor involves delving into Bootsrap through a project centered around developing a portfolio using both Bootstrap and Sass. However, an issue has a ...

htmlcssbootstrap-5bootstrap-sass

Creating custom designs for a HTML button using CSS

Within an HTML form, there are two buttons set up as follows: <button kmdPrimaryButton size="mini" (click)="clickSection('table')">Table View</button> <button kmdPrimaryButton size="mini" (click)=&quo ...

htmlcsstypescript

Implement CSS styling on a single page by utilizing SCSS in conjunction with ReactJS and Redux

I'm currently working with ReactJS and Redux, utilizing SCSS for styling. Currently, my path is located at http://localhost:3000/login. I need to include the following on this page: html:{ overflow:hidden} However, on other pages, I want to remove th ...

csshtmlreactjssassredux