Running Ajax within bootstrap - php

Question

I'm working on a CMS and the main core of the theming is with bootstrap. My issue arises with Ajax. I have my login module and it works fine to login and run the ajax, but the issue that is my dropdown menu does not work when I include the ajax libraries.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
Those are the libraries I'm including to run ajax, and my ajax code
plus the form that I'm using
<form name="panel_login" id="panel_login" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="process" id="process" value="panel_login">
<p><label for "username">Username</label>
<input type="text" id="username" name="username" class="text"></p>
<p><label for "password">Password</label>
<input type="password" id="password" name="password" class="text"></p>
<p>
<p id="error"></p>
<input type="submit" id="submit_login" class="button" value="Login"></p>
</form>
<script>
$(function() {
$('#submit_login').click(function(event) {
$.ajax({
type: $("#panel_login").attr("method"),
url: $("#panel_login").attr('action'),
data: $("#panel_login").serialize(),
success: function(data){
if(data == "0" ) {
$("#error").html("Incorrect Username or Password");
}
else {
location.reload();
}
}
});
event.preventDefault();
});
});
</script>
The process is thrown within a case switch which works fine, the only issue at this point is the broken dropdown menu.
The Dropdown Menu Code: (nav.dropdown.php)
<li class="dropdown">
<?php echo $this->dtitle; ?> <b class="caret"></b>
<ul class="dropdown-menu">
<?php $perms = $this->perms; ?>
<?php self::GetChildren($perms); ?>
</ul>
Which is included through a PHP function file
class DViews {
protected $db;
public $tprefix;
public $theme;
public function __construct() {
$this->db = new DDB();
$this->tprefix = TPREFIX;
$this->theme = theme_p;
}
public function LoadNavigation($perm, $menu) {
switch($perm) {
case "all";
self::AllNavigation($perm, $menu);
break;
case "user";
self::AllNavigation($perm, $menu);
break;
case "guest";
self::AllNavigation($perm, $menu);
break;
}
}
public function AllNavigation($perm, $menu) {
$query = <<<SQL
SELECT id,title,content,menuid,identifier
FROM {$this->tprefix}pages
WHERE active = :true
AND visibility = :all
AND menuid = :menu
SQL;
$resource = $this->db->db->prepare( $query );
$resource->execute( array (
':true' => 1,
':all' => $perm,
':menu' => $menu,
));
foreach($resource as $row)
{
$this->perms = $perm;
$this->id = $row['id'];
$this->title = $row['title'];
$this->identifier = $row['identifier'];
self::CheckParent($perm);
}
}
public function CheckParent($perm) {
$query = <<<SQL
SELECT parent
FROM {$this->tprefix}pages
WHERE parent = :id
AND active = :1
AND visibility = :perms
SQL;
$resource = $this->db->db->prepare( $query );
$resource->execute( array (
':id' => $this->id,
':1' => 1,
':perms' => $perm,
));
if(PRETTYURLS == true) {
$this->dlink = $this->identifier;
}
else {
$this->dlink = "?id=".$this->identifier."";
}
$this->dtitle = $this->title;
if($resource->rowCount() > 0 ) {
include($this->theme.'/'.ACTIVETHEME.'/nav.dropdown.php');
}
else {
include($this->theme.'/'.ACTIVETHEME.'/nav.single.php');
}
}
public function GetChildren($perm) {
$query = <<<SQL
SELECT id,title,content,menuid,identifier
FROM {$this->tprefix}pages
WHERE active = :true
AND visibility = :all
AND parent = :parent
SQL;
$resource = $this->db->db->prepare( $query );
$resource->execute( array (
':true' => 1,
':all' => $perm,
':parent' => $this->id,
));
foreach($resource as $row)
{
$this->title = $row['title'];
$this->dtitle = $this->title;
$this->identifier = $row['identifier'];
if(PRETTYURLS == true) {
$this->dlink = $this->identifier;
}
else {
$this->dlink = "?id=".$this->identifier."";
}
include($this->theme.'/'.ACTIVETHEME.'/nav.single.php');
}
}
Tried Adding
var $j = jQuery.noConflict();
$j(function() {
$j('#submit_logout').click(function(event) {
$j.ajax({
type: $("#panel_logout").attr("method"),
url: $("#panel_logout").attr('action'),
data: $("#panel_logout").serialize(),
success: function(data){
location.reload();
}
});
event.preventDefault(); // Prevent the form from submitting via the browser.
});
});
to no avail.

Answer 1

Not sure why it worked, but I stumbled into a resolution on the millions of bootstrap forums that it seems are out there.
Linking to the external
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Instead of local seems to have resolved the issue between Jquery and Bootstrap conflicts