I've been using stack for a while now, and most of the time I find the solution I need or something that helps with my problem, but for this case I can't make it work.
I'm building a website for my final project as I'm studying "Web applications Development" a professional formation module in Spain. Having in mind responsive design I ended using Bootsrap and I just found that my own JS code disables Bootstrap dropdowns Nav.
To clarify: I'm using the full jquery as I needed the .load() couldn't make iframes show the full eight of the content, the solution was loading the other file in a div element that resizes properly on small screens.
Functions.php is kind of a helper where I'm dropping some functions, in this case reads a databes and generates the items for the dropdown menu
Yeah, I want to load other files in it, if you know how to make an iframe show all the content and resize properly in bootstrap tell me, my work around are jquery+divs and it kinda works...
The php code works perfectly as it generates the menu (I can see all the elements in code inspector of firefox)
HTML(it is a php file... index.php):
<?php
include 'functions.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Project B.W.A.S.T</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- TOP menu -->
<div class="top_navbar">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Web logo -->
<!-- Button for collapsing the navbar -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible_nav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar collapsable on small devices -->
<div class="collapse navbar-collapse" id="collapsible_nav">
<ul class="navbar nav">
<!-- MAIN INDEX/HOME -->
<li class="nav-item dropdown">
<a class="btn btn-secondary dropdown-toggle" type="button" id="navbardrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CHAMPIONS
</a>
<div class="dropdown-menu" aria-labelledby="navbardrop">
<?php
$champions= list_champions();
foreach ($champions as $row) {
?>
<a id="champion_menu_button" class="dropdown-item" href="#"> <?php echo $row['name']; ?> </a>
<?php } ?>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- MAIN CONTENT -->
<div id="main_space" class="pt-2 pb-2 m-0 ">
</div>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MyjS -->
<script src="mainWindowJS.js" defer async></script>
</body>
</html>
Javascrip "mainWindowJs.js"
$("document").ready(function(){
$("div#main_space").load("main_content.php");
});
Having the imports in order and my own JS loading at the end, the dropdown menu wont ever open, but deleting my JS code makes the dropdown work.
The question is simple: How do I fix it guys?!, serious I'm stuck.
