In my Flask Bootstrap website, the navigation bar remains unchanged by the presence of Javascript

I am currently in the process of creating a navigation bar for my Flask website using Bootstrap. However, when I implemented it into my HTML code, it is not displaying correctly which leads me to believe that the JavaScript may not be functioning properly. Below is my HTML code:

<!doctype html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
         <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="navbar-nav">
             <li class="nav-item active">
                     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
        </ul>
        </div>
    </nav>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

Here is my Python code using Flask:

from flask import Flask, redirect, url_for, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("base.html")


if __name__ == "__main__":
    app.run(debug=True)

This code was adapted from a tutorial by Tech With Tim and the Bootstrap official website.

javascripthtmlcsstwitter-bootstrapflask

Answer №1

It seems that the version of bootstrap you are using may be outdated. Consider updating to the latest version.

Additionally, you have:

<!doctype html>

Instead of:

<!DOCTYPE html>

While this usually does not cause issues, it might be problematic for some browsers.

Replace your code with the updated version that includes the latest Bootstrap:

<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

Consider Flask configurations to avoid caching responses:

Flask may be caching responses, so add these configurations at the top of your Flask app:


# Ensure templates are auto-reloaded
app.config["TEMPLATES_AUTO_RELOAD"] = True

# Ensure responses aren't cached
@app.after_request
def after_request(response):
    response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
    response.headers["Expires"] = 0
    response.headers["Pragma"] = "no-cache"
    return response

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

Ensuring Data Integrity with JavaScript Form Validation

Ensure that if text box A is filled in, text box B must also be filled in before submitting. Vice versa, if text box B is filled in, make sure text box A has data as well. Is it possible to loop this check for multiple text boxes? For example, if row A o ...

javascriptsubmitvalidation

Oops! An error occurred in AngularJs: "TypeError: $scope.todos.push is not a

I am currently facing an issue while using the $http.get method to add a todo from my controller to my database. The error message "TypeError: $scope.todos.push is not a function" keeps appearing, despite trying various solutions suggested by similar quest ...

javascriptangularjshttptypeerror

In JavaScript, when a condition is met, two strings are produced but only the last string is printed

My for loop with nested arrays is working fine, but it should display two strings and only shows the last one. for (i = 0; i < $scope.taskGroups.length; i++) { for (j = 0; j < $scope.taskGroups[i].tasks.length; j++) { ...

javascriptangularjs

Troubleshooting Appium error management is ineffective

As a newcomer to appium, I might have made some mistakes. I'm encountering a problem with appium while using wdio and jasmine. it('wtf', (done) => { client.init().element('someName').getText() // ^ here ...

javascripttypescriptjasmineappiumwebdriver-io

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

cssreactjsanimationmaterial-uicss-transitions

jQuery Animated List - Nested items are unresponsive to clicks

Looking to create a dynamic nested list using jQuery for animations, but unsure of the best approach. Currently, I'm adjusting the length of the parent list item and revealing the nested items. The issue is that the parent item's length covers ...

javascriptjqueryhtmlcss

Is it possible to dynamically create input fields in AngularJS by clicking a button?

I'm currently working on a project that involves adding an input field and a button each time a user clicks on the button. Is there a way to retrieve the text from the input field when the new button, which is displayed alongside the input field, is ...

javascriptangularjsangularjs-directiveangularjs-scope

Discovering the most recent messages with AJAX

I'm feeling a bit lost on this topic. I'm looking to display the most recent messages stored in the database. (If the messages are not yet visible to the user) Is there a way to achieve this without constantly sending requests to the server? (I ...

javascriptphpjqueryajaxchat

What is the best way to handle HTML files that have the same name as folders?

I am looking to incorporate a News section on my website with the unique URL: mysite.com/news Each news article should be stored in a specific folder named "News" like this: mysite.com/news/2021 However, when I attempt to access the news.html file (witho ...

htmlcss

Using Vue.js to make asynchronous API requests using Axios

I am facing an issue with two versions of code, where the second version is not functioning as expected. I suspect it may be due to a contextual problem that I am unable to pinpoint. The first version of the code works fine: // Fist version (it works) met ...

javascriptapivue.jsaxios

CSS Background Color Not Displaying Correctly

My HTML5 page has an issue where the image is taking over the background color of the entire page. I want to adjust it so that the image appears in the background, while the background color shows up behind the content on top. Check out my code below and l ...

csshtml

Symfony using Vite with Vue 3 encounters an error: Uncaught ReferenceError - exports is undefined

Currently, I am in the process of developing a Symfony 3 Application with Vite and Vue3 integrated with TypeScript. To replace Symfony's Webpack Encore, I opted for the Vite Buildtool using this convenient plugin: https://github.com/lhapaipai/vite-bu ...

javascripttypescriptvue.jssymfonyvite

Ways to handle parsing of curly brackets JSON in Google Apps Script?

How can I use Google Apps Script to parse through the output of an API and convert it into a table in Google Sheets? I attempted the following code, but it only returns Null values. var response = UrlFetchApp.fetch(url, options); var text = response.getCo ...

javascriptarraysjsongoogle-apps-scriptgoogle-sheets

The dataLayer in Google Tag Manager is failing to trigger the necessary event

Product Purchase Button: <button id="btnBuy" onclick="SendData();" JavaScript function to track product details: <script> var dataLayer = []; dataLayer.push( { 'ecommerce': { 'detail': { 'actionField' ...

javascriptgoogle-analyticsgoogle-tag-managergoogle-datalayer

Ensure that jquery.load is executed before the HTML content is loaded

Recently, I encountered a situation where I had a bootstrap navbar stored in a separate file, specifically named navbar.html. I utilized Jquery.load() to load this navbar into my HTML page. At the bottom of my HTML page, I included the following code: &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

display and conceal a division by clicking a hyperlink

How can I make a hidden div become visible when clicking on a specific link without using jQuery? Javascript function show() { var a = document.getElementsByTagName("a"); if (a.id == "link1") { document.getElementByID("content1").style.v ...

javascripthtmlshow-hide

Trouble with translating code from JavaScript to Python due to hash algorithm discrepancy

In an attempt to achieve consistent hash function results between JavaScript and Python, I encountered a roadblock when trying to convert my JavaScript function to its Python equivalent, resulting in unexpected outcomes. Original JavaScript Function: func ...

javascriptpython

Add the bannercode snippet found on a webpage

I am currently facing an issue with appending a banner code to the end of a URL. The scenario is as follows: An individual receives an email with a link to a website (SITE1), where the URL includes a banner code, such as www.site1.com?banner=helloworld O ...

javascriptjqueryhtmlcss

Why does my JavaScript code fail to retrieve input values?

When the button labeled click here is clicked, it will trigger an alert with empty values. I am curious why the alert does not display the values 400 and 400. This code snippet is from test1.php: <script src="https://ajax.googleapis.com/ajax/libs/jqu ...

javascriptphp

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

After transitioning a react js project to react js with typescript, I made sure to move all the code to the typescript react app and added types for every necessary library. In this process, I encountered an issue with a file called HeatLayer.js, which is ...

javascriptreactjstypescript