JQuery Mobile list component doesn't refresh

JQuery Mobile list component doesn't refresh

I have a problem with updating a list with JQM. I have 2 pages, index.html
and a detail page. On the first page I get results from a remote .php file
with Ajax. Everything works smoothly here. On this page I also have:
<a href="plumberdetails.html" data-transition="pop" > . . . </a>
When redirecting to the 2nd page the list is not properly updated. I also
have to say that the info on the 2nd page is filled from a remote .php
file. But if I refresh the 2nd page, info fills perfectly. And I noticed
that entering data-rel = external in the first page makes everything ok. I
don't want to use this, because I will no longer have a transition effect
between the 2 pages. I have also tried $('#ul_ID').listview('refresh'); or
$('#ul_ID').trigger('create'); in Ajax request, but still can't make it
work.
I would be grateful if you can help me. Thank you,
External .js for the 1st page:
$.ajax({
url: URL + 'getplumbers.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
$('#output').append('<li><a href="plumberdetails.html">' +
'<h4 style="color:#DC143C">' + item.name + '</h4>' +
'<p style="color:#6B8E23">' + item.address + '</p>' +
'<span class="ui-li-count">' + item.city +
'</span></a></li>');
$('#output').listview('refresh');
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
While the .js for the 2nd page looks like this:
$.ajax({
url: 'http://plumberin.cu.cc/services/getplumber.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$('#output2').append('<li><h4 style="color:#DC143C">' +
data.name + '</h4>' +
'<p style="color:#6B8E23">' + data.address + '</p>' +
'<span class="ui-li-count">' + data.city +
'</span></a></li>')
$('#output2').listview('refresh');
},
error: function(){
output.text('There was an error loading the data.');
}
});