Conflicts with jquery in the Adminlte template

Asked

Viewed 732 times

1

Colleagues.

I’m using the Adminlte template for a project, but on one of the pages I want to put an autocomplete API for the searches. The problem is that when I put this API that has a jquery reference inside its folder, the menu stops working and when I take the API or its reference to Jquery, the menu works again, but the API no longer works. I have already changed positions and the conflict remains. Anyway, someone would know how to resolve this impasse between these codes. See below:

Adminlte

<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>

Autocomplete

  <script type="text/javascript" src="jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
 <script type="text/javascript" src="jquery-autocomplete/lib/jquery.ajaxQueue.js"></script>
 <script type="text/javascript" src="jquery-autocomplete/lib/thickbox-compressed.js"></script>
 <script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
 <script type="text/javascript">
   $(document).ready(function(){
   $("#txtNome").autocomplete("buscar-escola.php", {
     width:310,
     selectFirst: false
   });
 });
 </script>
jquery

2 answers

1


I believe this problem is actually being caused by a conflict related to the method autocomplete, see well:

  • Are you adding the jquery-autocomplete/jquery.autocomplete.js, that has the method autocomplete() that you intend to use.
  • Before, you add the https://code.jquery.com/ui/1.11.4/jquery-ui.min.js, guess what, it has the method autocomplete().

My suggestion is that you use the jQuery UI autocomplete tool itself, as you probably added it because you use other features of it. In this case you could follow the following example that the documentation offers:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: function( request, response ) {
        $.ajax( {
          url: "search.php",
          dataType: "jsonp",
          data: {
            term: request.term
          },
          success: function( data ) {
            response( data );
          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    } );
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>
  • 1

    Thanks Kenny Rafael.

0

Taking advantage of Kenny Rafael’s solution, on the line: 

dataType: "jsonp",

I switched to: 

dataType: "json",

and search.php can look like this:

<?php
include("sua-conexao.php"); // $con = conexao

$valor = $_GET["term"];
$trazer = array();

$sql = mysqli_query($con,"SELECT * FROM suatabela WHERE campotabela like '%" . $valor . "%'");

while($mostrar = mysqli_fetch_array($sql)){
        $trazer[] = $mostrar["campotabela"];    
}
echo json_encode($trazer);
 ?>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.