http://abrie.net/code.aspxThis is a feed for code articles on abrie.netabrie@abrie.netsandbox1002http://abrie.net/code.aspx#1002<p>In this article I wanted to be able to load a JSON object and then bind that to html like a repeater control would do in ASP. I decided that real time updating of twitter search results would be a nice way to demonstrate this. </p> 2011-11-02T08:01:51-05:00<p>I wanted to be able to load a JSON object and then bind that to html like a repeater control would do in ASP. I decided that real time updating of twitter search results would be a nice way to demonstrate this. There are a few javascript templating engines out there, but I decided to use the one that Microsoft contributed to jQuery as outlined <a href="http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx">here</a>.<br />In the head of the html load the templating library.</p> <pre class="brush: js">&lt;script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"&gt;&lt;/script&gt;</pre> <p>We have a text box for our search term and a button to call the javascript function and lastly a div with Id <i>results</i> where we will append and remove the tweets.</p> <pre class="brush: xml">&lt;div&gt; &lt;input type="text" id="search" placeholder="Search Term" /&gt; &lt;input type="button" id="load" value="load" onclick="refresh();" /&gt; &lt;/div&gt; &lt;br /&gt; &lt;div id="results"&gt; &lt;/div&gt;</pre> <p>Because we don't want to rebuild our html markup everytime we will bind the markup on page load. So once the page has been loaded we call our binding function</p> <pre class="brush: js"> $(document).ready(function () { loadMarkup(); }); </pre> <p>In <i>loadMarkup</i> we do a basic GET to the server to retrieve our html markup and bind it to a template, <i>tweetTemplate</i> in this case.</p> <pre class="brush: js">function loadMarkup() { $.get('/assets/views/tweet.html', function (markup) { $.template("tweetTemplate", markup); }); }</pre> <p>In the html markup we received from the server we need to bind to properties of the JSON object. For example when receiving results from the twitter API the JSON object has a <i>text</i> property which contains the text of the tweet. In the html markup we bind to these properties using a ${} selector, eg. ${text}. Here is the complete markup as used in the demo.</p> <pre class="brush: xml">&lt;div class="tweet"&gt; &lt;div class="table"&gt; &lt;div class="row"&gt; &lt;div class="cell"&gt; &lt;img alt="pic" src="${profile_image_url}" title=" ${from_user}" /&gt; &lt;/div&gt; &lt;div class="cell"&gt; ${text} &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;strong&gt;${from_user}&lt;/strong&gt; &lt;div style="text-align: right;" &gt;${created_at}&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p>Now we can have a look at the repeating search function. We start off by html encoding our search string and setting our url. Note that <i>last_id</i> is a variable that is intialized as 0.</p> <pre class="brush: js">var query = escape($('#search').val()); var url = 'http://search.twitter.com/search.json?q='; var options = '&result_type=recent&rpp=5&callback=?&since_id=' + last_id;</pre> <p>We do a GET to the twitter API to retrieve our JSON object. We store the last Id we searched as this allows us to only search from that point next time. Now we bind our data to our template <i>tweetTemplate</i> and add this to the <i>results</i> div with a fade in.</p> <pre class="brush: js"> $.getJSON(url + query + options, function (json) { last_id = json.max_id_str; $.tmpl("tweetTemplate", json.results).prependTo("#results").hide().fadeIn(2000); });</pre> <p>To make sure the div doesn't grow to an infinite size I remove all children from <i>results</i> until there is only 8 tweets left.</p> <pre class="brush: js">while ($('#results').children().size() > 8) { var last = $('#results').children().last().remove(); }</pre> <p>Finally we set the function to be called again in 2 seconds.</p> <pre class="brush: js">t = setTimeout("refresh()", 2000);</pre> <p>Here is the complete function.</p> <pre class="brush: js">function refresh() { var query = escape($('#search').val()); var url = 'http://search.twitter.com/search.json?q='; var options = '&result_type=recent&rpp=5&callback=?&since_id=' + last_id; $.getJSON(url + query + options, function (json) { last_id = json.max_id_str; $.tmpl("tweetTemplate", json.results).prependTo("#results").hide().fadeIn(2000); }); while ($('#results').children().size() > 8) { var last = $('#results').children().last().remove(); } t = setTimeout("refresh()", 2000); }</pre> <p>If you have any questions drop me a mail.</p>1001http://abrie.net/code.aspx#1001<p>Welcome to my first post on my site. <br />What I want to achieve today is to do an empty ajax post using jQuery to a test method I have running on my WCF service.</p>2011-11-02T08:01:22-05:00<p>Welcome to my first post on my site. <br />What I want to achieve today is to do an empty ajax post using jQuery to a test method I have running on my WCF service. What we want is a button that will do the ajax post in javascript as well as a div to write our result to. Here is the html:</p> <pre class="brush: xml">&lt;input type="button" value="Test" onclick="testClick();" /&gt; &lt;div id="result"&gt; &lt;/div&gt;</pre> <p>So now we have a button that calls <i>testClick</i> as well as our div to append the results to. Next we need to write the javascript function. Here is the full function:</p> <pre class="brush: js">function testClick() { $('#result').empty(); $.ajax({ type: "POST", url: '/WCF/Dataservice.svc/test', contentType: "application/json; charset=utf-8", success: function (data) { $('#result').append('service is up'); }, error: function (jqXHR, textStatus, errorThrown) { $('#result').append(textStatus + ' / ' + errorThrown); } }); }</pre> <p>The first thing we want do when entering the function is to clear the div of previous results. We use the jQuery selector to select the div with an id of <i>result</i> and then empty the div.</p> <pre class="brush: js">$('#result').empty();</pre> <p>Now we do the ajax post, by using the jQuery <i>$.ajax</i> function and setting the type to <i>POST</i>.</p> <pre class="brush: js">$.ajax({ type: "POST",</pre> <p>After this set the URL of the service and the content type. In this case I am setting it to JSON, but you can use any type as long as the service support it.</p> <pre class="brush: js">url: '/WCF/Dataservice.svc/test', contentType: "application/json; charset=utf-8",</pre> <p>Lastly we define what to do when the service call is finished. When the ajax call has completed successfully we select the <i>result</i> div again and append some text to indicate that the service call completed.</p> <pre class="brush: js">success: function (data) { $('#result').append('service is up'); },</pre> <p>In case of an error we select the <i>result</i> div as well and append the error message.</p> <pre class="brush: js"> error: function (jqXHR, textStatus, errorThrown) { $('#result').append(textStatus + ' / ' + errorThrown); } });</pre> <p>So now you should be able to do a basic ajax post. Drop me a mail if you have any questions.</p>