1

I have a drop down menu using Twitter Bootstrap and I would like to change my query string that I send to my PHP script according to what I have selected on the drop down menu. I have everything in place I believe I just think its an error with the scope as the category will not change when a new drop down menu item is selected and remains constantly fixed at genres.

$('#categoryInputValue').val(""); //Sets the category box to empty
var catedgory = "Genres"; 
var queryString = 'autocomplete.php?cat=' +catedgory;
console.log("Page Load : " + catedgory);


$('.dropdown-menu a').click( function () 
{
    console.log(catedgory = $(this).text()); //Gets the category name from the list item
    queryString = 'autocomplete.php?cat=' +catedgory;
    $('#dropDownMenu').html(catedgory+' <span class="caret"></span>'); //Changes the drop down menu categories to the selected one and adds the downwards arrow
    $('#categoryInputValue').attr("placeholder", catedgory); //Sets the placeholder to equal the category
    console.log("Click : " + catedgory);


});

$("#categoryInputValue").autocomplete({
            source: queryString,
            minLength: 4,
            messages: {
                noResults: '',
                results: function() {}
            }

        });
Improve this question
4
  • 1
    what does console.log("Click : " + category); say? (after removing var) Commented Aug 29, 2013 at 0:06
  • It displays Click : Actors, Click : Genres, Click : Directors depending on what drop down menu item is selected. Commented Aug 29, 2013 at 0:10
  • Try press F5 a few times :) (cached javascript) - when category actually is set in the click-handler, and var category is removed, then category really should be set also 5 lines below, unless there is some code we cannot see. Commented Aug 29, 2013 at 0:15
  • PS: catedgory may be misspelled (see category) Commented Aug 29, 2013 at 1:01

3 Answers 3

Reset to default
1

Just remove the var in your click handler:

$('.dropdown-menu a').click( function () 
{
    category = $(this).text(); 
    …

Update

I totally missed this part:

You are initializing a string inline:

var queryString = 'autocomplete.php?cat=' +category;

But never changing the value of that string when your dropdown is clicked.

Change your code to something like this:

$('#categoryInputValue').val(""); //Sets the category box to empty
var category = "Genres"; //Category drop down chosen at default
var queryString = 'autocomplete.php?cat=' +category;  // <=== Declare your var here

console.log("Page Load : " + category);


$('.dropdown-menu a').click( function () 
{
    // Remove var - not needed here.  Update your query string with the new selection here
    category = $(this).text(); //Gets the category name from the list item
    queryString = 'autocomplete.php?cat=' +category;  

    $('#dropDownMenu').html(category+' <span class="caret"></span>'); //Changes the drop down menu categories to the selected one and adds the downwards arrow
    $('#categoryInputValue').attr("placeholder", category); //Sets the placeholder to equal the category
    console.log("Click : " + category);

    $("#categoryInputValue").autocomplete({
        source: queryString,
        minLength: 4,
        messages: {
            noResults: '',
            results: function() {}
        }

    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Then some other interaction is happening - are you sure $(this).text() is returning what you think it is? Log or alert that value when you retrieve it.
Yes it works, 'console.log("Click : " + category);' logs the category and so does having console.log(category = $(this).text());
Just tested that as well, reset cache on both chrome and FF
@GregValantine - Is it the query string that is the problem? (see updated answer)
So I should move the queryString line into the .click function?
|
0

It's a scope issue - var category have a different scope from .click. You can solve by this aproach

$('#categoryInputValue').val(""); //Sets the category box to empty
var category = "Genres"; //Category drop down chosen at default
console.log("Page Load : " + category);
loadCategory(category);


$('.dropdown-menu a').click( function () 
{
    var category = $(this).text(); //Gets the category name from the list item
    $('#dropDownMenu').html(category+' <span class="caret"></span>'); //Changes the drop down menu categories to the selected one and adds the downwards arrow
    $('#categoryInputValue').attr("placeholder", category); //Sets the placeholder to equal the category
    console.log("Click : " + category);

    loadCategory(category);


});

function loadCategory(category) {
    var queryString = 'autocomplete.php?cat=' +category;
    $("#categoryInputValue").autocomplete({
            source: queryString,
            minLength: 1,
            messages: {
                noResults: '',
                results: function() {}
            }

        });    
}
Improve this answer

Comments

0

JavaScript is a function-scoped language as opposed to a block-scoped language. In other words variables are scoped to the functions they're created inside of. You are setting var category inside the closure of your click handler. Thus the value set by the click handler is scoped to that closure. You are attempting to access that value outside of the closure. Outside of the closure the value of category is "Genres."

Try this:

var myModule = (function() {

    var My = {},
        category = 'Genre';

    My.setAutocomplete = function(event) {
        var target = event.currentTarget;
        category = target.text();
        $('#dropDownMenu').html(category+' <span class="caret"></span>');
        $('#categoryInputValue').attr("placeholder", category);
        console.log("Click : " + category);
    };


    // DOM ready
    $(function() {

        $('#categoryInputValue').val("");

        $("#categoryInputValue").autocomplete({
            source: 'autocomplete.php?cat=' + category,
            minLength: 1,
            messages: {
                noResults: '',
                results: function() {}
            }
        });


        $('.dropdown-menu a').click( function (event) {
            event.preventDefault();
            My.setAutocomplete(event);
        });



    });

    return My;


})();

This is a module pattern. The variable category is scoped to the module. It's basically a private global within the module. This is a better solution because it gives you encapsulation, state, and some structure.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.