jQuery Mobile не може правильно розкривати дані

Я намагаюся створити додаток iOS за допомогою PhoneGap і jQuery mobile. Метою є отримання даних новин (json) з веб-сервісу та відображення їх. Все працює, крім функції autodivider jQuery mobile.

JS:

<script>
$(document).on("pageinit", "#news", function(){
    $("#newsContainer ul").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr("category");
            return out;
        }
    }).listview("refresh");

    getNews(15);

    function getNews(count){
        $.ajax({
            url: '*someURL*/file.php?count='+count,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function(data, status){

                    $.each(data, function(i,item){ 
                        $('#newsContainer ul').append('
  • '+item.image+'<div style="float:left;white-space:normal;">'+item.headline+'</div><div style="float:left">'+item.content+'</div></div>
  • ').listview('refresh');
                        });
    
                    $('#newsContainer ul').listview('refresh');
    
                },
                error: function(){
                    console.log('Fehler bei JSON Verarbeitung');
                    $('#newsContainer ul').append('
  • Es ist ein Fehler beim Laden der News aufgetreten
  • ').listview('refresh');
                }
            });
    
        }
    
    });
    </script>
    

    HTML:

    <div data-role="page" id="news">
        <div data-role="header">
            

    News

     
        </div>
    
        <div data-role="content" id="newsContainer">
            
          </div>
      
          <div data-role="footer" class="ui-bar ui-block-a" data-position="fixed" data-id="myFooter">
              <div data-role="navbar">
                  
              </div>
          </div>
      </div>
      

      Unfortunately, it doesn't merge all the equal values together. I attached an image to better demonstrate the issue.

      jquery Mobile autodivider Issue

      1
      насамперед, чому використовують pageinit і ready ? ready не слід використовувати з jQuery Mobile. Видаліть ready та використовуйте належні події jQuery Mobile . І оновити список після того, як ви завершите додавання елементів (після закінчення циклу). $ ('# newsContainer'). listview ('refresh');
      додано Автор Omar, джерело
      додано Автор Omar, джерело
      замінити pageinit за допомогою pagebeforeshow , спробуйте його. і тут $ ("# newsContainer ul") listview ({ remove ul
      додано Автор Omar, джерело
      замінити pageinit за допомогою pagebeforeshow , спробуйте його. і тут $ ("# newsContainer ul") listview ({ remove ul
      додано Автор Omar, джерело
      вибач, мій поганий, я просто зрозумів це.
      додано Автор Omar, джерело
      вибач, мій поганий, я просто зрозумів це.
      додано Автор Omar, джерело
      вибач, мій поганий, я просто зрозумів це.
      додано Автор Omar, джерело
      Третя рядок у вашому коді $ ("# newsContainer ul"). listview ({ remove ul .
      додано Автор Omar, джерело
      Третя рядок у вашому коді $ ("# newsContainer ul"). listview ({ remove ul .
      додано Автор Omar, джерело
      Я не знав про спеціальні події для мобільних пристроїв jQuery. Я вставив все всередині pageinit зараз і додав оновлення прямо після циклу, але нічого не змінював ...
      додано Автор enyce12, джерело
      коли я видаляю ul , воно взагалі не працює.
      додано Автор enyce12, джерело
      коли я видаляю ul , воно взагалі не працює.
      додано Автор enyce12, джерело
      коли я видаляю ul , воно взагалі не працює.
      додано Автор enyce12, джерело
      що не працює, ні.
      додано Автор enyce12, джерело
      що не працює, ні.
      додано Автор enyce12, джерело
      що не працює, ні.
      додано Автор enyce12, джерело
      Я не знав про спеціальні події для мобільних пристроїв jQuery. Я вставив все всередині pageinit зараз і додав оновлення прямо після циклу, але нічого не змінював ...
      додано Автор enyce12, джерело

      8 Відповіді

      Я придумав це посилання:

      http://forum.jquery.com/topic/autodivider-features-group-count

      Заміна коду працювало для мене.

      Схоже, jQuery mobile не підтримує елементи групування з тим самим значенням.

      1
      додано

      Я придумав це посилання:

      http://forum.jquery.com/topic/autodivider-features-group-count

      Заміна коду працювало для мене.

      Схоже, jQuery mobile не підтримує елементи групування з тим самим значенням.

      1
      додано

      Я придумав це посилання:

      http://forum.jquery.com/topic/autodivider-features-group-count

      Заміна коду працювало для мене.

      Схоже, jQuery mobile не підтримує елементи групування з тим самим значенням.

      1
      додано

      Я придумав це посилання:

      http://forum.jquery.com/topic/autodivider-features-group-count

      Заміна коду працювало для мене.

      Схоже, jQuery mobile не підтримує елементи групування з тим самим значенням.

      1
      додано

      Я знаю, що це питання старі, але оскільки ніхто не надав достатнього рішення - ось моя спроба.

      Віджет списку не сортує елементи li для вас, це потрібно зробити самостійно.

      You can easily do this by using the tsort-plugin: http://tinysort.sjeiti.com/

      var thisView = $('.listview');
      $('li',thisView).tsort();
      thisView.listview().listview('refresh');
      
      1
      додано
      працював для мене! Дякую
      додано Автор fnkbz, джерело

      Я знаю, що це питання старі, але оскільки ніхто не надав достатнього рішення - ось моя спроба.

      Віджет списку не сортує елементи li для вас, це потрібно зробити самостійно.

      You can easily do this by using the tsort-plugin: http://tinysort.sjeiti.com/

      var thisView = $('.listview');
      $('li',thisView).tsort();
      thisView.listview().listview('refresh');
      
      1
      додано
      працював для мене! Дякую
      додано Автор fnkbz, джерело

      Я знаю, що це питання старі, але оскільки ніхто не надав достатнього рішення - ось моя спроба.

      Віджет списку не сортує елементи li для вас, це потрібно зробити самостійно.

      You can easily do this by using the tsort-plugin: http://tinysort.sjeiti.com/

      var thisView = $('.listview');
      $('li',thisView).tsort();
      thisView.listview().listview('refresh');
      
      1
      додано
      працював для мене! Дякую
      додано Автор fnkbz, джерело

      Я знаю, що це питання старі, але оскільки ніхто не надав достатнього рішення - ось моя спроба.

      Віджет списку не сортує елементи li для вас, це потрібно зробити самостійно.

      You can easily do this by using the tsort-plugin: http://tinysort.sjeiti.com/

      var thisView = $('.listview');
      $('li',thisView).tsort();
      thisView.listview().listview('refresh');
      
      1
      додано
      працював для мене! Дякую
      додано Автор fnkbz, джерело