How to add a dynamic variable into a jQuery function

Question

I'm trying to modify a twitter widget where based on the dropdown, users can switch between the different search terms.

Instead of the present code where I have to define a keyword, I want to create a dropdown list of keywords so my users can select one and the relative tweets are shown. The Jquery I have in the head section is:

$(document).ready(function () {
    $('#tweets ul').twitterfeed('#keyword', {
        type: "query",
        count: 5
    })
});

And my select box code is:

<strong>Select your keyword</strong>:<select id="keyword">
<option value="ABC">ABC</option>
<option value="XYZ" selected="selected">XYZ</option>
</select>

Any help on how to fix this?

Thanks

No error at all. It doesn't display the feeds when I replace it with CarlosZ's code — Sledge81, Apr 10 '11 at 17:28

CarlosZ · Accepted Answer · 2011-04-10T17:42:23.057

2

$(document).ready(function () {
    $('#keyword').change(function() {
        // in the even handler this points to the element that triggered it
        $('#tweets ul').twitterfeed($(this).val(), {
            type: "query",
            count: 5
        })
    });
});

edited Apr 10 '11 at 17:42

answered Apr 10 '11 at 17:13

CarlosZ

8,281
1
21
16

Hi Carlos,Thanks for the quick response. I tried your code but nothing changed.. I can only see the drop down.. Is this got to do with the twitter.js script that is being called? – Sledge81 Apr 10 '11 at 17:20
I have never used that plugin, you should make sure it is triggering an api call to twitter (use firebug). – CarlosZ Apr 10 '11 at 17:22
Yep, the API call is being made from twitter.js. I think one possible reason could be because the script is being put in the header, while the select dropdown is on the body section? – Sledge81 Apr 10 '11 at 17:23
No that's not it, by having the script wrapped in `$(document).ready` it will be executed only after the DOM is fully loaded. – CarlosZ Apr 10 '11 at 17:25
Maybe I should include the – Sledge81 Apr 10 '11 at 17:37
1. I don't think you should post the feeds in a `ul` tag. 2. @CarlosZ has an extra `)` after `$(this).val()`. Removing it will fix the issue. – Khez Apr 10 '11 at 17:39
Brilliant.. this fixed the issue. Thanks a ton guys.. @Khez, what would be the alternative to the UL tag? – Sledge81 Apr 10 '11 at 17:45
@Sledge81 any block-level element would be good, `DIV` is a popular choice for most things. `UL` is meant for lists, and it should hold `LI` tags. The twitterfeed plugin inserts divs, not list items. – Khez Apr 10 '11 at 17:52

How to add a dynamic variable into a jQuery function

1 Answers1