在引导程序中运行Ajax

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">
                <a href="<?php echo $this->dlink; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $this->dtitle; ?> <b class="caret"></b></a>
                <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