0

I'm developing a web app, using Jquery Mobile, I have to make an Ajax/Json to a PHP to retrieve MySQL data, when I get the JSON Callback, and create the "list" from the array, the path of the jquery mobile css file get lost, and my is not well formed. This is my code :

$.ajax({
    url: "busca_reservas.php",
    data: "fecha=" + fecha + "",
    dataType: 'json',   
    type: "POST",
    cache: false,
    success: function(data){
        var output = '<ul data-role="listview" data-inset="true" id="reservas" class="listareservas">';

        var logsData = data;
        for (var i in logsData.logs){
            regis  = logsData.logs[i].recid;
            nombre  = logsData.logs[i].nombre;
            ape     = logsData.logs[i].apellido;
            output+= '<li><a href="#">' + regis + "  " + nombre + " " + ape + '</a></li>';

        }
        output+='</ul>';

        $('.listareservas').listview('refresh');
        $("#result").append(output).fadeIn(500);

        console.log(output)
    }
});

The content in my looks like plain text, instead of Jquery Mobile "List View". Any help wil be welcome ?

Thanks in advanced

Barmar
  • 741,623
  • 53
  • 500
  • 612
CaribeSoft
  • 577
  • 1
  • 8
  • 25
  • I'm not very familiar with jquery-mobile, but I'll bet the problem is that you're doing `refresh` _before_ you append the output the DOM. So it's not matching the new element you're adding. Just swap those two lines. – Barmar Jul 31 '14 at 04:07
  • Hi Barmar, I tried that but I received the following error message "Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'" , thanks – CaribeSoft Jul 31 '14 at 04:11
  • Then you also need to initialize jquery mobile on the new elements after appending them. Now my inexperience with this library leaves me unable to give the details, but maybe Jacob's answer is the clue. – Barmar Jul 31 '14 at 04:12
  • possible duplicate of [jQuery Mobile: Markup Enhancement of dynamically added content](http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content) – Omar Jul 31 '14 at 13:29

2 Answers2

0

Try putting the refresh after the append:

    $("#result").append(output).fadeIn(500);
    $('.listareservas').listview('refresh');
Barmar
  • 741,623
  • 53
  • 500
  • 612
-1

I vaguely remember this issue when I was working on a jquery mobile project ahwile back. I basically came to this solution

function refreshLayout() {
    $("div[data-role=page]").page("destroy").page();
}

which I would call with every ajax success function. You may have to modify the data-role portion to fit what needs to be refreshed in your project. Hope that helps

Jacob
  • 920
  • 6
  • 19
  • Thank you guys, I found the answer to my problem in another post. I just add .trigger("create"); in my --> $("#result").html(output).fadeIn(500).trigger("create"); And its working fine .. – CaribeSoft Jul 31 '14 at 04:50