JqueryUI Autocomplete callback function using val( ) not working

Question

I am using jqueryui autocomplete and have set up a search of an image gallery using ContentFlow that when the image is found, a small icon is shown and the user can open the image with a lightbox (prettyphoto )

Here is the code:

$(function() {
    var projects = [
        {
            value: "Alcatraz",
            label: "Alcatraz",          
            icon: "Alcatraz.jpg",
            url: "slides/Alcatraz.jpg",
            desc: "",
            imgN: "1"
        },
        {
            value: "Amber Light",
            label: "Amber Light",           
            icon: "Amber Light.jpg",
            url: "slides/Amber%20Light.jpg",
            desc: "",
            imgN: "2"
        },
        {
            value: "Blue Boat",
            label: "Blue Boat",         
            icon: "Blue Boat.jpg",
            url: "slides/Blue%20Boat.jpg",
            desc: "",
            imgN: "3"
        }
    ];

    $( "#project" ).autocomplete({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            $( "#project-id" ).val( ui.item.value );                
            $( "#project-icon" ).attr( "src", "thumbs/" + ui.item.icon );
            $( "#project-description" ).html( ui.item.desc );
            $( "#project-label" ).html( ui.item.label );
            $( "#project-link" ).attr("href", ui.item.url );
            $( "#project-link" ).attr("title", ui.item.label );
            return false;
        },

        close: function() {
            var value = $( "#project" ).val( ui.item.imgN );
            cf.moveTo(value);
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + " - " + item.desc + "</a>" )

            .appendTo( ul );
    };

});

The HTML:

<div id="project-label">Search</div>
<a href="#" rel="prettyPhoto" class="" id="project-link"><img id="project-icon" src="res/transparent_1x1.png"/></a>
<input id="project"/>
<input type="hidden" id="project-id"/>
<p id="project-label"></p>
<p id="project-description"></p>

The problem I am having is with the following function:

close: function() {
            var value = $( "#project" ).val( ui.item.imgN );
            cf.moveTo(value);
        }

I need the image gallery to scroll to the specific image in the contentflow using

 cf.moveTo();

I am not getting my code to return this value. Any help would be appreciated.

$( "#project" ).val( ui.item.imgN );: you are assigning the value instead of getting it. — Didier Ghys
– Didier Ghys, Commented Dec 19, 2011 at 15:26

Derk Arts · Accepted Answer · 2011-12-18 21:00:53Z

1

When you use val() you should not enter an argument, thats used to set the value, you just need to call val() on the element you want the value of.

Try:

  var value = $( "#project "+ui+"."+item+"."+imgN).val();

Or something like that.

edited Dec 18, 2011 at 21:00

answered Dec 18, 2011 at 20:54

Derk Arts

3,4702 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Macsupport Over a year ago

Thanks for the info. I get the following firebug error: ui is not defined [Break On This Error] var value = $( "#project "+ui+"."+item+"."+imgN).val();

Derk Arts Over a year ago

Sorry I didnt test this, I just wanted to point you in the right direction. If you want to get the value of an element you should use the $("you selector here").val(); syntax. No you should just figure out how to identify your element. Ui is undefined because its not being passed as an argument for the close function. So if you need it, just make it global.

Macsupport · Accepted Answer · 2011-12-19 21:12:57Z

1

After trials and tribulations, I found a way to get this to work with this additional modified code:

        select: function( event, ui ) {

            $( "#project-imgN" ).val( ui.item.imgN );


            return false;
        },

        close: function(event, ui ) {
        function runEffect() {
        // get effect type from 
        var move = $( "#project-imgN" ).val();

        // run the effect
        cf.moveTo(move);
    };

     runEffect(); 
        }
    })

edited Dec 19, 2011 at 21:12

answered Dec 19, 2011 at 15:17

Macsupport

5,4645 gold badges33 silver badges47 bronze badges

1 Comment

Didier Ghys Over a year ago

Would be better to post only the modified code with a bit of explanation so it can help others more easily.

Collectives™ on Stack Overflow

JqueryUI Autocomplete callback function using val( ) not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related