jQuery mobile - data loaded form json file to listview breaks after refresh

I'm trying to improve my JQueryMobile \ JavaScript skills by building a simple web app that gets a json file and loads the data from it into a clickable listview.

The goal is to select one of the li elements by clicking it using data-role="button", and a new page should be open in a form of a dialog page, by using the data-rel="dialog" attribute + attaching the id of the new page that should be opened by using <a href="#newPage" data-rel="dialog"></a>. I'm facing two problems:

1. For some odd reason, only the first li cell is clickable, while it remains un-populated, as the other li cells are populated but not clickable.

2. After I refresh the page, the ul breaks and shows all names from the json in one li element.

update - thanks to Jithin Lukose i was able to deal with this issue using the following function:

complete: function() {
        $('#namesListView').listview('refresh');
    }

jQuery mobile code:

<div data-role="page" id="scientists">
    <div data-role="header"><h3>great scientists</h3></div>

    <div data-role="content">
            <div>
                <ul data-role="listview" data-inset="true" data-filter="true" id="namesListView">
                    <li data-role="button"><a href="#newPage" data-rel="dialog"></a></li>
                 </ul>
             </div>
     </div>
 </div>

javascript code:

$.ajax({
    url:"scientists.json",
    dataType:"json",
    type:"get",
    cache:"false",
    success:function(data){
        console.log(data);
        $(data.abc).each(function(index,value){
            console.log(value.name);
            $("#namesListView").append("<li>"+value.name+"</li>");
        });
    }
});