I think my problem lies more in my approach and applies more to jquery, but something weird is happening here.
I'm using jQuery & jqTouch. My html is:
<div id="home" class="current">
<div class="toolbar">
<h1>Header</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#currentloc">Current Location</a></li>
</ul>
</div>
<div id="currentloc">
<div class="toolbar">
<h1>Nearby</h1>
</div>
</div>
What I'm trying to do is when a user clicks the Current Location link, on pageAnimationEnd I'd like to load a page and append it to #currentloc. Here's my code:
$('#currentloc').bind('pageAnimationEnd', function(e, info){
$(this).load('results.php');
});
As you can see, this will entirely replace the contents of #currentloc. I'm not sure how I append the content of results.php without replacing what's already there. I've looked at putting the ajax load request inside of append:
$(this).append(load('results.php'));
but that totally wasn't working...
Any idea what to do?
UPDATE
One thing I've tried which works but feels a little clumsy is
$('#currentloc').bind('pageAnimationEnd', function(e, info){
$(this).append('<ul></ul>');
$(this).find('ul').load('results.php');
});
Feel like there's a better solution to this.