CODEWITHSUNDEEP
jquery
dallen
dallen

Reputation: 2651

Problem loading jQuery autocomplete. Getting TypeError. Also getting confused

I posted a question earlier about getting autocomplete to work, but it appears I'm having some other issue. Here is my header HTML:

<link rel="stylesheet" href="<?php echo base_url(); ?>extras/css/jquery/themes/base/jquery.ui.all.css">
<script src="<?php echo base_url(); ?>extras/js/jquery/jquery-1.5.min.js"></script>
<script src="<?php echo base_url(); ?>extras/js/jquery/ui/jquery.ui.core.js"></script>
<script src="<?php echo base_url(); ?>extras/js/jquery/ui/jquery.ui.widget.js"></script>
<script src="<?php echo base_url(); ?>extras/js/jquery/ui/jquery.ui.position.js"></script>
<script src="<?php echo base_url(); ?>extras/js/jquery/ui/jquery.ui.autocomplete.js"></script>

<script>

$(document).ready(function() {
    $.ajax({
      type: "POST",
      url: "http://localhost:8888/index.php/welcome/get_client/",
      dataType: "json",
      data: "{}",
      success: function(data) {                
          ("#search_client").autocomplete({
              source: data
          });
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
         alert(textStatus);
      }
  });
});

</script>

When the page is loaded in Safari (my only browser), the error console brings up this message:

TypeError: Result of expression '("#search_client").autocomplete' [undefined] is not a function.

Googling doesn't bring up much. Most results say that part isn't loading. But the Resources panel in Safari does say it is being loaded. What could be the problem? I'm pretty confused by this.

Upvotes: 1

Views: 4784

Answers (2)

mu is too short
mu is too short

Reputation: 434645

You're missing a dollar sign in your success handler, this:

  success: function(data) {                
      ("#search_client").autocomplete({
          source: data
      });
  },

should be this:

  success: function(data) {                
      $("#search_client").autocomplete({
          source: data
      });
  },

Note that addition of $ before ("#search_client").

When you say ("#search_client").autocomplete(..., you're trying to access the autocomplete property of the string literal "#search_client" and then you're trying to call that property as a function; the string literal has no autocomplete property so you're trying to execute an undefined value as a function and hence your error.

Upvotes: 3

bleepzter
bleepzter

Reputation: 9985

<script>

var autoCompleteData = new Array();

$(document).ready(function() {



    $.ajax({
      type: "POST",
      url: "http://localhost:8888/index.php/welcome/get_client/",
      dataType: "json",
      data: "{}",
      success: function(data) {                
          autoCompleteData = $.parseJSON(data);
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
         alert(textStatus);
      }
  });

  ("#search_client").autocomplete({
     source: autoCompleteData
  });
});

Did you try this?

Upvotes: 0

Related Questions