Постраничный набор результатов jQuery из проблемы с файлом XML - PullRequest
Новая
       3

Постраничный набор результатов jQuery из проблемы с файлом XML

0 голосов
/ 29 июня 2010

У меня возникло беспокойство по поводу кода, который я разрабатываю, чтобы показать 10 журналов за раз, который подается из XML-файла.У меня это работает до некоторой степени, FF и IE7 + 8 не нравятся, может быть, так как в строке 62 указана ошибка - функция ядра, вызывающая данные для подачи.

Вотмой код: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>Brave Creative - Online Archive</title>
<link rel="stylesheet" href="css/global.css" media="screen" />
<script type="text/javascript" charset="UTF-8" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 $.ajax({
    type: "GET",
    url: "issues.xml",
    dataType: "xml",
    success: function(xml) {

    var shelf = $('#shelf-items');
                var startIndex = 0; 
                var howMany = 10; 
                var $issues = $(xml).find('issue'); 
                var totalIssues = $issues.length;
    var numPages = Math.ceil(totalIssues / howMany)

    $('span.issuecount').html(+totalIssues+'&nbsp;Issues - '+numPages+'&nbsp;Pages');

                var displayIssues = function() {
                      var $issuesPaginated = $issues.slice( startIndex , (totalIssues - startIndex) + howMany );
                      $('#shelf-items li').fadeOut(500); 
                      $issuesPaginated.each(function(){
                          var id = $(this).attr('id');
                          var date = $(this).find('date').text();
                          var cover = $(this).find('cover').text();
                          var issue = $(this).find('issuenumber').text();
                          var url = $(this).find('url').text();
                          $('<li id="'+id+'"></li>').html('<a href="'+url+'"><img src="images/covers/'+cover+'" alt="" /></a><br />'+date+' - #'+issue+'').fadeIn(500).appendTo(shelf);
                      });
                }

                $('#prevIssueButton').click(function() {
                    if( startIndex < howMany) {
                        startIndex -= howMany;
                        displayIssues();
                    }else {
      startIndex = 0;
                        displayIssues();
      $('span.error').html('No Issues to Display - You are now on Page 1').fadeIn(300).fadeOut(3000);
                    }
                });
                $('#nextIssueButton').click(function() {
      if( startIndex + howMany <= totalIssues) {
                        startIndex += howMany;
                        displayIssues();
                    }else {
      $('span.error').html('No Issues to Display - You are now on Page 1').fadeIn(300).fadeOut(3000);
                        startIndex = 0;
                        displayIssues();

                    }
                });
                displayIssues().fadeIn(500); 
            }
   }); // end ajax call

}); // end document-ready

</script>
</head>
<body>

<div id="bc-publish"><span></span></div>

<br />

<div id="wrapper">

 <header>
  <h1>Online Archive: <span>FSM</span></h1>
 </header>

    <section id="buttons">

     <a href="#" id="prevIssueButton" title="Toggle Previous Entries">Previous</a>
        <a href="#" id="nextIssueButton" title="Toggle Next Entries">Next</a>

        <span class="error"><a></a></span>

        <div class="clear"></div>

    </section> <!-- /buttons -->

    <section id="shelf">

     <ul id="shelf-items"></ul>

        <div class="clear"></div>

    </section> <!-- /shelf -->
    <br />
    <span class="issuecount"></span>

    <br /><br />

    <span class="logo"><a href="http://www.bravecreative.co.uk" title="Brave Creative"><img src="images/brave-creative-logo.jpg" alt="Brave Creative" /></a></span>
    <span class="address">

     <span>t.</span> 01733 392978 <span>m.</span> 07719442825<br />
  <span>e.</span> tony@bravecreative.co.uk<br />
        4 Milnyard Square, Orton Southgate, Peterborough PE2 6CX

    </span>

    <div class="clear"></div>

</div> <!-- /wrapper -->

</body>
</html>

Предыдущая и следующая кнопки не работают должным образом, например, я нажимаю кнопку «Далее» и перехожу на страницу 2, нажимаю кнопку «Далее» - она ​​пуста и нажимаю один раз, когда мне сообщаютбольше нет результатов для просмотра.Но если я нажму предыдущий, чтобы начать с, и вернусь назад 3 раза (к началу снова), а затем нажмите «Далее», я могу вернуться к той же проблеме, это действительно озадачило меня, любая помощь будет высоко оценена!

1 Ответ

0 голосов
/ 31 января 2011

Просто прочитав ваш код, у меня есть несколько замечаний.

Это: 

$('span.issuecount').html(+totalIssues+'&nbsp;Issues - '+numPages+'&nbsp;Pages');

Должно быть без '+' перед 'totalIssues', или я что-то упустил? 

$('span.issuecount').html(totalIssues+'&nbsp;Issues - '+numPages+'&nbsp;Pages');

Конец 

$('<li id="'+id+'"></li>').html('<a href="'+url+'"><img src="images/covers/'+cover+'" alt="" /></a><br />'+date+' - #'+issue+'').fadeIn(500).appendTo(shelf);

, кажется, делает вещи в неправильном порядке, не так ли?Сначала исчезают, а затем добавляются?

Это 

$('#prevIssueButton').click(function() {
                if( startIndex < howMany) {
                    startIndex -= howMany;
                    displayIssues();

тоже выглядит странно, если startIndex действительно меньше, чем howMany, то startIndex будет отрицательным после этого вызова, это предназначено?

Тогда яЯ не уверен, что это хорошая идея, чтобы иметь весь код в обработчике события успеха для вызова Ajax.Я бы кое-что разделил, но, может быть, вы попробовали это и решили это.Это просто мысль.

...