html disappears after sorting by list.js

Asked 3 months ago, Updated 3 months ago, 11 views

When you sort the tables using list.js, everything in the table disappears.I wonder why...

<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="utf-8">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxt2MZw1T"crossorigin="anonymous">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <scriptsrc="../scripts/script.js"></script>
<body>
   <divid='itemlist'>

      <button class='sort desc'data-sort='date'>Sort By Date</button>

      <table>
         <tbody class='list'>

         </tbody>
      </table>
   </div>

   <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
   <script type='text/javascript'>
      var options = {
      // Target data to search for
      valueNames: ['date', 'elem']
      };

   // Target ID
      variableList = new List ('itemlist', options);
   </script>
</body>
</html>
$(function(){

  var url = ["all-c_int.xml", "all-dom.xml" ];
  varfeed = new Object();

  $.each(url, function(index,value){

    $.ajax({
      url —value,
      type: "GET",
      dataType: "xml",
      timeout —1000,
      xhrFields: {
        withCredentials —true
      },
      cache: false,
        error: function() {
          alert("Failed to load XML";
        },
        success:function(xml){
          $(xml).find("item").each(function(){
            variable_link=$(this).find("link").text();
            variable_title=$(this).find("title").text();
            variable_desc=$(this).find("description").text();
            variable_date=dateParse($(this).find('pubDate').text());
            feed [item_date]="<tr><td class='date'>"+item_date+"</td>td class='elem'>>a href='+item_link+'>"+item_title+">>>>>>>>>>
            if(item_title!="")$(feed[item_date]).appendTo("tbody");

          });
        }
      });

  });

    function dateParse(str){
      vardateObject = new Date(str);
      year=dateObject.getFullYear();
      month=dateObject.getMonth();
      day=dateObject.getDate();
      hour = dateObject.getHours();
      minute=dateObject.getMinutes();
      second=dateObject.getSeconds();

      if(month<10) {month="0"+month;}
      if(day<10) {day="0"+day;}
      if(hour<10) {hout="0"+hour;}
      if(minute<10) {minute="0"+minute;}
      if(second<10) {second="0"+second;}

      return year+"/"+month+"/"+day+"+hour+":"+minute+":"+second+"";
    }

});

javascript html jquery ajax xml

2022-09-30 11:21

1 Answers

The problem is that itemList initializes earlier than the table initializes.

You should erase the code (<script type='text/javascript'>>~</script>) written in HTML and use script.js as follows:

$(function(){

  var url = ["all-c_int.xml", "all-dom.xml" ];
  varfeed = new Object();

  function dateParse(str){
    vardateObject = new Date(str);
    year=dateObject.getFullYear();
    month=dateObject.getMonth();
    day=dateObject.getDate();
    hour = dateObject.getHours();
    minute=dateObject.getMinutes();
    second=dateObject.getSeconds();

    if(month<10) {month="0"+month;}
    if(day<10) {day="0"+day;}
    if(hour<10) {hout="0"+hour;}
    if(minute<10) {minute="0"+minute;}
    if(second<10) {second="0"+second;}

    return year+"/"+month+"/"+day+"+hour+":"+minute+":"+second+"";
  }

  variableCount = 0;

  function loadEnded() {
    endCount++;
    if(endedCount>=url.length){
      window.options={
        // Target data to search for
        valueNames: ['date', 'elem']
      };

      // Target ID
      window.itemList=newList('itemlist', options);
    }
  }

  $.each(url, function(index,value){

    $.ajax({
      url —value,
      type: "GET",
      dataType: "xml",
      timeout —1000,
      xhrFields: {
        withCredentials —true
      },
      cache: false,
        error: function() {
          alert("Failed to load XML";
          loadEnded();
        },
        success:function(xml){
          $(xml).find("item").each(function(){
            variable_link=$(this).find("link").text();
            variable_title=$(this).find("title").text();
            variable_desc=$(this).find("description").text();
            variable_date=dateParse($(this).find('pubDate').text());
            feed [item_date]="<tr><td class='date'>"+item_date+"</td>td class='elem'>>a href='+item_link+'>"+item_title+">>>>>>>>>>
            if(item_title!="")$(feed[item_date]).appendTo("tbody");

          });

          loadEnded();
        }
      });

  });

});


2022-09-30 11:21

If you have any answers or tips


© 2023 OneMinuteCode. All rights reserved.