Question

Anyone know why this code works when I preview in Coda locally, but when I upload the same code to my server it stops functioning?

<h3>Tweet Query Beta</h3>
<input type="text" id="keyword" val=""/>&nbsp;
<button type="button" id="search">search</button><br />

<div id="feed">&nbsp;</div><!-- feed -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!-- jquery core -->

<script type="text/javascript">
    $(function(){

        $('input#keyword').focus(function(){

            $('#feed').html(''); //clears results when typing new keyword(s).

        });

        $('button#search').click(function(){

            var keyw = $('input#keyword').val(); //retrieves keyword(s) typed.

            $.getJSON('http://search.twitter.com/search.json?q='+keyw,function(data){ //display JSON feed using keyword(s) typed

                $.each(data.results, function(i,results){

                    content = '<p>&quot;'+results.text+'&quot; -'+results.from_user+'</p>';

                    $(content).appendTo("#feed"); //displays each result inside feed div above.

                });
             });   
        }); 

    });
</script>

Link to code on server: http://jonathangrover.com/tweetquery.html

Thanks in advance. I bet I left out something simple…

Answer 1

Okay so I got this working by changing:

$.getJSON('http://search.twitter.com/search.json?callback=?&q='
  + keyw,function(d‌​ata){ ... }

Notice the addition of the callback=?. According to this site by adding the callback=? we are telling the getJSON method to request padded JSON or JSONP which allows for JSON to be sent safely across domains which fixes the CORS issue.

So to be clear add

callback=?

somewhere into your url parameter for $.getJSON.