Question

I’m calling up with a $.getJSON in my custom function getSearch(). I’d like to return data straight into the container from where I’m calling. (Much easier than to .html() from the custom function. It’s on a cloned object.) I’m trying two ways: 1. To return the data directly into the callling function, since I already “know where I am.” 2. To pass a var for the correct container to the function, so it can be put into the right place from there. I guess I prefer the first alternative, but right now I can’t get either to work.

These are my functions – one fires on pressing enter in a search box, the other is the custom function that calls up twitter with $.getJSON(). Relevant lines marked with ##.

    // RUN SEARCH: when pressing enter key in search box
    $('.search_box_in_menu').keypress(function(e) {
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if(keycode == '13') {                   // remember to add all the enter/return buttons
                console.log(".search_box_in_menu - enter-key pressed.");
                console.log($(this).val());
            var where = $(this).parent().parent().parent();
            var there = $(this).next('.results').attr('class');
            console.log("where:");
            console.log($(this));
            console.log($(this).parent().parent().parent());
            console.log($(this).next('.results').attr('class'));
            console.log(where);
            console.log("there:");
            console.log(there);
    ##      $(this).closest('.results').getSearch($(this).val(), where);    //calling twitter
                console.log("$(this).val() at enter-press: " + $(this).val());

            $(this).closest('.dropdown').trigger('click'); //close dropdown box
            $('.search_box_in_menu').tooltip('hide'); //hiding tooltip on searchbox when pressing enter
        }
    });



}); //$(document).ready 



// function for getting tweets from Twitter
$.fn.getSearch = function(searchword, where) { 
    var qterm = searchword;
    var preUrl = "http://search.twitter.com/search.json?q=";
    var postUrl = "&rpp=50&include_entities=true&show_user=true&callback=?";
    var twUrl =  preUrl + qterm + postUrl; 
    console.log(preUrl + ", " + qterm + ", " + postUrl);

    if (qterm !== '') {
        $.getJSON(twUrl, 
            function(data) { 
                console.log('sending to search_back.php.');
                console.log("data before send: " + data);
                $.post("search_back.php", {json_data: data}, function(data) { 
                        console.log("returned at: ");
                        console.log($(this));
                        console.log(where);
            ##      $(".results").html(data); // # this is the current way, but will apply to all cloned objects.
            ##      //return data; // # this is the preferred way
                });

            });
    };
};

Anybody know how to solve this in a handsome way? I don’t really want to assign an ID to the .results either, as it seems there must be a much more elegant way to solve this!

This is the FireBug console log: the .results I’m after is the next after [div id=”menu200″].

document.ready -
[div#menu200.dropdown]
.dropdown - click.
.search_box_in_menu - click.
.search_box_in_menu - value removed.
.search_box_in_menu - enter-key pressed.
twitter
where:
[input.search_box_in_menu Search...]
[div#menu200.dropdown]
undefined
[div#menu200.dropdown]
there:
undefined
http://search.twitter.com/search.json?q=, twitter, &rpp=50&include_entities=true&show_user=true&callback=?
$(this).val() at enter-press: twitter
[div#menu200.dropdown]
.search_box_in_menu - dirty searchbox.
.dropdown - click.
sending to search_back.php.
data before send: [object Object]
POST http://wikindoit.org/twitterstars/search_back.php
200 OK
927ms   
returned at:
[Object { url="search_back.php", isLocal=false, global=true, more...}]
[div#menu200.dropdown]

Answer 1

add a 3rd parameter to getSearch:

$.fn.getSearch = function(searchword, where, callback) {

and at the end of the success callback of getScript you would call callback and pass to it whatever you want.

//$(".results").html(data);
callback(data);