Conflicts with jquery in the AdminLTE template

Navigation
1

Colleagues.

I'm using the AdminLTE template for a project, however 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 throw the API or its reference to Jquery, the menu goes back to work, however the API no longer works. I have already changed the positions and the conflict remains. Anyway, someone would know how to solve 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><!--ResolveconflictinjQueryUItooltipwithBootstraptooltip--><script>

AutoComplete

<scripttype="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>
    
asked by anonymous 21.01.2017 / 11:55

2 answers

1

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

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

My suggestion is to use the jQuery UI autocomplete tool itself, as you have probably added it because you use other jQuery UI features. In this case you could follow the example 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><scriptsrc="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>
    
21.01.2017 / 12:13
0

Taking advantage of Kenny Rafael's solution on the line: 

dataType: "jsonp",

I switched to: 

dataType: "json",

and search.php looks 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);
 ?>
    
21.01.2017 / 13:03
Relate MYSQL table How do Web Publish of nested applications for IIS?