javascript - $.ui is undefined inside autocomplete and ui plugins - Stack Overflow

admin管理员组

文章数量:1289845

I'm trying to use jquery autoplete on a text field to allow users to select multiple tags as in this example, but I'm getting the error Uncaught TypeError: Cannot read property 'autoplete' of undefined. Here's the code causing the problem, mosly copied from the link.

<script type="text/javascript" src=".7.2/jquery.min.js"></script>
<script type="text/javascript" src=".8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
var tags = [<?php
foreach($this->tags as $tag){
    echo "\"{$tag['name']}\",";
}
?>""];

$( "textarea:[name='tags']" ).autoplete({
    minLength: 0,
    source: function( request, response ) {
        // delegate back to autoplete, but extract the last term
        alert($.ui);
        $.noConflict();
        alert($.ui);
        response( $.ui.autoplete.filter(
            tags, extractLast( request.term ) ) );
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function( event, ui ) {
        var terms = split( this.value );
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the ma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }
});

The error is ing from the line response( $.ui.autoplete.filter( inside the source. For some reason $( "textarea:[name='tags']" ).autoplete is perfectly fine and defined, but $.ui.autoplete isn't.

I have both jQuery and jQuery UI included above this script. What could be causing this?

EDIT:

I've noticed that if I put in alert($.ui); outside of the autoplete function it displays [Object object], but if I put the same alert inside the source attribute of the autoplete, it is undefined. Doing the same thing with $ shows that $ is defined inside, but $.ui is not. I also have a datepicker on the page, and it's showing the same thing, $.ui isn't defined inside the plugin. Why would jQuery UI be undefined inside these plugins?

EDIT 2:

Putting $.noConflict() in the source attribute right above the response function gets it working just long enough for me to type in one tag, then it crashes the autoplete, though the datepicker still works. I tried putting it in the create function so it would only execute once, but that just disables all other jQuery on the page.

I'm not very experienced with jQuery or Javascript but it almost seems like the jQuery UI plugins are deleting the alias.

I'm trying to use jquery autoplete on a text field to allow users to select multiple tags as in this example, but I'm getting the error Uncaught TypeError: Cannot read property 'autoplete' of undefined. Here's the code causing the problem, mosly copied from the link.

<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
var tags = [<?php
foreach($this->tags as $tag){
    echo "\"{$tag['name']}\",";
}
?>""];

$( "textarea:[name='tags']" ).autoplete({
    minLength: 0,
    source: function( request, response ) {
        // delegate back to autoplete, but extract the last term
        alert($.ui);
        $.noConflict();
        alert($.ui);
        response( $.ui.autoplete.filter(
            tags, extractLast( request.term ) ) );
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function( event, ui ) {
        var terms = split( this.value );
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the ma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }
});

The error is ing from the line response( $.ui.autoplete.filter( inside the source. For some reason $( "textarea:[name='tags']" ).autoplete is perfectly fine and defined, but $.ui.autoplete isn't.

I have both jQuery and jQuery UI included above this script. What could be causing this?

EDIT:

I've noticed that if I put in alert($.ui); outside of the autoplete function it displays [Object object], but if I put the same alert inside the source attribute of the autoplete, it is undefined. Doing the same thing with $ shows that $ is defined inside, but $.ui is not. I also have a datepicker on the page, and it's showing the same thing, $.ui isn't defined inside the plugin. Why would jQuery UI be undefined inside these plugins?

EDIT 2:

Putting $.noConflict() in the source attribute right above the response function gets it working just long enough for me to type in one tag, then it crashes the autoplete, though the datepicker still works. I tried putting it in the create function so it would only execute once, but that just disables all other jQuery on the page.

I'm not very experienced with jQuery or Javascript but it almost seems like the jQuery UI plugins are deleting the alias.

• javascript
• jquery
• jquery-ui
• autoplete
• jquery-autoplete

Share Improve this question Follow edited Aug 8, 2012 at 19:44 jaimerump asked Aug 7, 2012 at 17:55 jaimerumpjaimerump 88244 gold badges1717 silver badges3535 bronze badges 5

• 1 Are you sure you have jQuery included? Have you confirmed the script loads correctly? Does adding alert( $ ) give undefined as well? – JJJ Commented Aug 7, 2012 at 17:58
• 1 what returns $( "textarea:[name='tags']" ) mand in console? – Dmitry Belaventsev Commented Aug 7, 2012 at 17:59
• textarea:[name='tags'] exists ? – Ricardo Lohmann Commented Aug 7, 2012 at 18:11
• All of my other jquery runs perfectly fine, and alert($) returns function (a, b) { return new e.fn.init(a, b, h); } – jaimerump Commented Aug 7, 2012 at 18:13
• @dizpers I'm not entirely sure what you're asking, but I put in console.log($("textarea:[name='tags']")); and it displayed [ <textarea name=​"tags" rows=​"3" class=​"ui-autoplete-input" autoplete=​"off" role=​"textbox" aria-autoplete=​"list" aria-haspopup=​"true">​Separate tags by ma.​</textarea>​ ] – jaimerump Commented Aug 7, 2012 at 20:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Wrap your code in

$(document).ready(function() {
    // code here
});

You should probably also include jQuery it self if you are not already.

I still have no idea what was causing it, but setting up a counter and an if statement so the $.noConflict only executes once solved the problem.

本文标签： javascriptui is undefined inside autocomplete and ui pluginsStack Overflow