Jump to content


Jquery conflict

jquery bootstrap menu hover dropdown

  • Please log in to reply
1 reply to this topic

#1 argjuan85

argjuan85

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 28 October 2015 - 05:23 PM

Hi guys, I've been usin GC for a couple of weeks and I find it really cool, yesterday I run into this problem when trying to add a bootstrap hover dropdown menu. Please excuse my english since it's not my primary language

 

I got the following gc:

  function listar(){
$this->load->view('templates/menu', false);
$this->grocery_crud->set_table('sedes');
$this->grocery_crud->set_language('spanish');

$this->grocery_crud->display_as('mail','Mail administrador');
$this->grocery_crud->add_fields('nombre_sede','mail', 'habilitada');
$this->grocery_crud->edit_fields('nombre_sede','mail', 'habilitada');
$this->grocery_crud->unset_read_fields('habilitada'); 
if ($this->grocery_crud->getState() == 'add') 
{
     $this->grocery_crud->change_field_type('habilitada','invisible');
}
$this->grocery_crud->callback_before_insert(array($this,'before_insert1'));
$this->grocery_crud->unset_jquery();
$output = $this->grocery_crud->render();

$this->_example_output($output);

}

function _example_output($output = null){

$this->load->view('example',$output);
} 

 
And the menu.php
 
 <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="description" content="A demo for my simple plugin that enables Bootstrap dropdowns to activate on hover and provide a nice user experience.">
  <meta name="author" content="Cameron Spear">

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

  <style type="text/css">
    body { padding-top: 70px; min-height: 410px }
    .tab-content p { padding: 10px 0; }
  </style>

  <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <header class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/">Plugin Demo</a>
      <div class="navbar-collapse nav-collapse collapse navbar-header">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle js-activated">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Dropdown header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle js-activated" data-toggle="dropdown">I Have a Submenu <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Menu Item</a></li>
              <li><a tabindex="-1" href="#">Bootstrap 3 Does Not Support Submenus</a></li>

            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle js-activated" data-toggle="dropdown">Account <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">My Account</a></li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Change Email</a></li>
              <li><a tabindex="-1" href="#">Change Password</a></li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Logout</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle js-activated" data-toggle="dropdown">Contact <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Contact</a></li>
              <li><a tabindex="-1" href="#">Contact My Mom</a></li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Contact Your Mom</a></li>
              <li><a tabindex="-1" href="#">Contact the President</a></li>
            </ul>
          </li>

        </ul>
      </div> <!-- .nav-collapse -->
    </div> <!-- .container -->
  </header> <!-- .navbar -->


      <div class="alert alert-danger">
        <strong>Please note</strong> that Bootstrap 3 <em>does not</em> support submenus. See <a href="https://github.com/twbs/bootstrap/pull/6342#issuecomment-11594010">this comment</a> from one of the original authors.
      </div>

 

    

  <!-- latest jQuery, Boostrap JS and hover dropdown plugin -->

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="<?php echo base_url();?>assets/js/bootstrap-hover-dropdown.js"></script> 

  <script>
    // very simple to use!
    $(document).ready(function() {
      $('.js-activated').dropdownHover().dropdown();
    });
  </script>
The menu works fine without gc,  but when I add it to them, The hover feature doesn't work ( you have to click the menu in order to display it) .  If I just  $this->grocery_crud->unset_jquery(); the menu works fine, but I'm not able to use correctly the edit function in the crud.  The problem is between this two files:
 

bootstrap-hover-dropdown.js

 

and

 
jquery-1.11.1.min.js
 
but if I skip one of those, logically some functions get affected. But if I keep both of them the menu doesn't work.

 

I hope you can help me since i'm new at CI and GC but I find both really powerfull, thanks

 
 

 



#2 argjuan85

argjuan85

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 04 November 2015 - 08:09 PM

Managed to solve it.  I loaded all the files in the header of my template, the latest jquery library should be loaded first.







Also tagged with one or more of these keywords: jquery, bootstrap menu, hover, dropdown

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users