I am currently developing a smartphone application for iOS using jQuery. There are 2 divs in the app, one that displays a list of events and another that displays an individual event. Here is how they are structured:
<div id="output">
</div>
<div id="single" style="background-color: red;">
</div>
The first single div is hidden when the document loads.
As users scroll down the page and click on an event, the #single div is displayed while the #output div is hidden. However, there is an issue where instead of moving to the top like a new page would, the current x + y values are retained, making it appear as if the page is blank with content out of view and unable to be scrolled. I tried to bring the document to the top with this code snippet:
function showSingle(itemId){
$('#output').hide();
$('#single').show();
$("#single").scrollTop(0);
/* ajax */
}
Unfortunately, this method did not bring the document to the top. Can you help me identify and correct the error? Thank you.
EDIT:
This is the state before clicking: imgur.com/Mitlp and after clicking: imgur.com/873pO
It should resemble this example: https://i.sstatic.net/g5uPX.jpg
Second Edit: Incorporating AJAX within the function
$.ajax({
url: 'http://dev.24323423.co.uk/getSingle.php',
dataType: 'jsonp',
data: { dbId: itemId },
jsonp: 'jsoncallbackSingle',
timeout: 8000,
success: function(data, status){
$.each(data, function(i,item){
var linkedPageSingle = '<p><a href="#" onClick="homePage(1)">Back</a></p><h2>'+item.eventName+'</h2>'
+ '<p>Description: '+item.description+'</p><p>Type: '
+ item.type+'</p><p id="pageid">'+item.id+'</p>';
$('#single').append(linkedPageSingle);
});
},
error: function(){
$('#single').text('There was an error loading the data.');
}
});