Блог

Главная - Вопросы по программированию - jquery mobile, ajax listview не отображается нормально

jquery mobile, ajax listview не отображается нормально

#javascript #html #css #listview #jquery-mobile

#javascript #HTML #css #listview #jquery-mobile

Вопрос:

У меня есть listview внутри страницы. Я асинхронно добавляю элемент в этот listview. и когда я добавляю его, элемент отображается не так, как другой элемент в списке:

Это 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>

Именно так я добавляю новое li в listview

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

Вот скрипка js:
http://jsfiddle.net/73pSv/21 /

Кроме того, я хочу сказать, что мне нужно добавлять поля во время выполнения. Я не буду знать все поля ввода, которые входят в этот список заранее. Итак, в основном, добавление полей после создания listview — это то, что мне нужно (по мере запуска программы). Извините за путаницу.

Если у кого-нибудь есть хорошие предложения, пожалуйста, дайте мне знать.

Заранее спасибо.

Ответ №1:

Рабочий пример: 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>');
});

Не используйте document ready с jQuery Mobile. Используйте соответствующие события страницы, например, pagebeforecreate в моем случае. Ваша проблема заключается в нестандартном использовании listview. Хотя по какой-то причине jQuery Mobile может улучшить его во время инициализации страницы, он не может сделать это программно, используя listview («обновить»), по крайней мере, не в используемой вами версии.

В моем примере это работает, потому что содержимое добавляется до начала процесса улучшения начальной разметки страницы.

Обновить:

Вот еще один пример: http://jsfiddle.net/Gajotres/J7QrF /

Это будет работать, потому что код улучшается перед добавлением процесса.

Комментарии:

1. нет, это не совсем так. Конечно, спасибо, брат. но мне нужно добавлять и удалять поля во время выполнения, и когда я это делаю, они отображаются неправильно

2. ну, я имею в виду, beforepagecreate не поможет в этой конкретной ситуации. поскольку я буду знать поля ввода, которые попадают туда во время выполнения (после создания страницы)

3. извините, я не прочитал ваше сообщение о том, что «это программно с использованием listview («обновить»), по крайней мере, не в версии, которую вы используете». хорошо, спасибо Gajotres.

Ответ №2:

вот как вы это делаете: http://jsfiddle.net/73pSv/22 /

Вам нужно добавить $('#p1').trigger('create'); в конце