CODEWITHSUNDEEP
javascripthtmlcsslistviewjquery-mobile
Jenia Be Nice Please
Jenia Be Nice Please

Reputation: 2703

jquery mobile, ajax listview is not rendered quit normally

I have a listview inside a page. I'm adding an element asynchronously to that listview. and when i add it, the element is not rendered like the other element in the list:

That's the html:

<div data-role="page" id="p1"> 
    <div  data-role="header"><h1>Header Page 1</h1></div> 

    <div  data-role="content">
        <ul data-role="listview">
            <li><input type="time" /></li>
            <li><button id="add" >Add input field </button></li>
        </ul>
    </div> 

    <div  data-role="footer"><h4>Footer</h4></div> 
</div>

That's the way I add the new li to the listview

$("#add").click(function(){
    $("#p1 [data-role=listview]").append('<li><input type="time" /></li>');
    $("#p1 [data-role=listview]").listview("refresh");
});

Here's the js fiddle: http://jsfiddle.net/73pSv/21/

Also, I want to say that I need to add fields at runtime. I wont know all the input fields that go into that list before-hand. So basically, adding fields after the listview is created is what I need (as the program runs). Sorry for the confusion.

If anyone has some nice suggestions, please let me know.

Thanks in advance.

Upvotes: 0

Views: 69

Answers (2)

Jenia Be Nice Please
Jenia Be Nice Please

Reputation: 2703

this is how you do it: http://jsfiddle.net/73pSv/22/

You need to add $('#p1').trigger('create'); at the end

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/3K863/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="p1"> 
            <div  data-role="header"><h1>Header Page 1</h1></div> 

            <div data-role="content">
                <ul data-role="listview">
                    <li><input type="time" /></li>
                </ul>
            </div> 

            <div  data-role="footer"><h4>Footer</h4></div> 
        </div> 
    </body>
</html>

JavaScript:

$(document).on('pagebeforecreate', '#p1', function(){ 
    $("[data-role='listview']").append('<li><input type="time"/></li>');
});

Don't use document ready with jQuery Mobile. Use appropriate page events, like pagebeforecreate in my case. Your problem is non-standard usage of listview. While for some reason jQuery Mobile can enhance it during page initialization it can't do it programmatically using listview('refresh'), at lease not in version you are using.

It's working in my example because content is appended before initial page markup enhancement process has started.

Update:

Here's another example: http://jsfiddle.net/Gajotres/J7QrF/

This one will work because code is enhanced before appending process.

Upvotes: 2

Related Questions