jQuery, unable to store data returned by $.get function
<p>I am trying to turn <b>div#sidebar</b> into a sidebar in my app. My code looks like the one below.</p>

<pre><code>$('#sidebar').userProfile();

jQuery.fn.userProfile = function() {
  $.get('/users/profile', function(data){ $(this).html(data); });
};
</code></pre>

<p>It didnt work because, I found the <b><i>this</i> (inside the $.get function)</b> here contexts to the get request and not $('#sidebar'). Then I tried something like below.</p>

<pre><code>$('#sidebar').userProfile();

#This doesnot work
jQuery.fn.userProfile = function() {
  var side_bar = null;
  $.get('/users/profile', function(data){ side_bar = data; });
  $(this).html(side_bar);
  console.log(side_bar);
};
</code></pre>

<p>This doesnt work either. In firebug console I see Null which I am setting on top when I am declaring the variable.Atlast I made it work by changing my code to something like below by hardcoding the selector.</p>

<pre><code>#This works, but I cannot turn any element to a sidebar which is sick.
jQuery.fn.userProfile = function() {
  $.get('/users/profile', function(data){ $('#sidebar').html(data); });
}; 
</code></pre>

<p>But this is not I wanted because I wanted to turn any element to a sidebar. Where am I goin wrong or which is the correct way of doing it?</p>
