Currently, I am studying HTML, CSS, Bootstrap 4, jQuery3, and JavaScript (ES6+), and to enhance my skills, I have devised an exercise for practice and consolidation.
I have created 4 HTML files, all featuring responsive design based on Bootstrap 4:
index.htmlcontains a Jumbotron, Grid System, Navbar, and Modal Login.main.htmlfeatures 3 cards with images, titles, text, and buttons.about.htmlsimply showcases the title "about".contact.htmldisplays the title "contact".
In index.html, the Navbar consists of a logo and 3 items: About, Contact, and a modal for login. Clicking on "About" loads about.html, clicking on "Contact" loads contact.html, and clicking on the logo loads main.html. The functionality for these interactions is already implemented.
Now, I want to add complexity by loading main.html automatically when the page initially loads using jQuery's $(document).ready(..).
When I uncomment a call to loadMainHtml() in script.js, main.html loads but flashes and the carousel malfunctions. However, clicking on the logo works fine.
What could be causing this issue? Any assistance would be highly appreciated.
Below are the respective HTML, CSS, and JS files:
index.html
... [HTML code] ... main.html
... [HTML code] ... about.html
... [HTML code] ... contact.html
... [HTML code] ... style.css
... [CSS code] ... script.js
... [JS code] ... Replacing the call to loadMainHtml() with $.get() also yields the same result. The following snippet demonstrates how I used $.get() as an alternative:
... [Additional JS code using $.get()] ...