При нажатии кнопки «Назад» URL-адрес изменяется, но страница не загружается - PullRequest
Новая
       10

При нажатии кнопки «Назад» URL-адрес изменяется, но страница не загружается

0 голосов
/ 19 февраля 2019

На странице index.html у меня есть 2 тега привязки home и about по умолчанию, я установил about.html, поэтому при загрузке страницы about.html открывается.

Я сделал пагинацию на странице home.html.

при нажатии домашней страницы тега № 1 по умолчанию загружается, и все функции работают здесь назад, вперед и обновляются.Но проблема, в которой я получаю проблему, возникает, когда я нажимаю кнопку «Назад» при переходе от http://localhost:7000/about к http://localhost:7000/home?Page=1.

Uncaught TypeError: Невозможно установить свойство 'value' из null

HTML 

<!DOCTYPE html>
<html>
<head>
    <title>single page application</title>
    <link rel="stylesheet" type="text/html" href="css/style.css">
</head>
<body>
    <div>
        <div class="nav navbar  navmenuspace">
            <a href="/home" id="homeid">home</a>
            <a href="/about" id="abtid">about</a>
        </div>
    </div>
    <div class="viewer" id="viewer" style="margin-top: 100px;">

    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/app.js" type="text/javascript"></script>
</body>
</html>

ГЛАВНАЯ HTML 

<h1>HOME PAGE</h1>
<p>this is home page</p>

<div id="table1">
    <table class="table" style="width: 1000px;">
        <thead>
            <th>userID</th>
            <th>ID</th>
            <th>Title</th>
        </thead>
        <tbody id="user"></tbody>   
    </table>
</div>
<div id="newList"></div>

js 

var udata;
 let flag = false;
 var valhrefg;

 $(function(){
  $('.nav a').click(function(){
    var valhrefl = $(this).text();
    valhrefg = valhrefl; 
    console.log("valhrefg "+valhrefg);
  });
});

 document.getElementById("homeid").removeAttribute("href");
 document.getElementById("abtid").removeAttribute("href");

 $(document).ready( function() {

     console.log("load_route() called");        
     if(location.pathname == "/"){
        flag = false;
        console.log("inside about / block");
        $("#viewer").load("about.html"); 
     }

     else if(location.pathname == "/home"){

        flag = true;
        console.log("coming inside home");
        $("#viewer").load("home.html");
        valhrefg = "home";
        getArrayData();
     }

     else if(location.pathname == "/about"){
        valhrefg = "about";
        console.log("inside second about block");
        $("#viewer").load("about.html");
     }

     else
     {
        $("#viewer").load("about.html"); 
     }

    $("#abtid").on("click", function() {
        flag = false;
        console.log("inside abtid")
        $("#viewer").load("about.html");
        history.pushState("","",""+"/about"+""+""+""+""+"");
    });

    $("#homeid").on("click", function() { 
        console.log("inside homeid")
        flag = true;
        $("#viewer").load("home.html");
       getArrayData();
        console.log("ls "+window.location.pathname);
    });
});

function getArrayData()
{
    console.log("inside get array data :");
    console.log("ls "+window.location.search);
    console.log(window.location.href.split('#')[0]);
    let xhr1 = new XMLHttpRequest();
    xhr1.open('GET',"https://jsonplaceholder.typicode.com/albums",true);
    xhr1.send();
    xhr1.onreadystatechange = function()
    {
        console.log("inside xhr1");
        if(this.readyState == 4 && this.status == 200)
        {
            console.log("inside xhr 1 ready state");
            document.getElementById('user').innerHTML = this.responseText;
            var arrayData = JSON.parse(this.responseText);
            udata = arrayData;
            totalPages(udata);

            var vallast1 = window.location.href;
            var vallast2 = vallast1.split("=");
            console.log(vallast2[1]);
            if(typeof vallast2[1] === "undefined")
            {
            getPageValue(1);
            }
            else
            {
                getPageValue(vallast2[1]);
            }
        }
    }
}

function getUrl()
{
    var loc = window.location.href;
    console.log(loc);
    var pageval1 = loc.split("=");
    console.log(pageval1);
    var pageval2 = pageval1[1];
    return pageval2;
}

function totalPages(arrayData)
{
    console.log("inside total pages");
    console.log(udata);
    var arrLen = arrayData.length;
    var pagenos = Math.ceil(arrLen/10);
    console.log("pagenos "+ pagenos);
    generatePageNo(pagenos);

}

function generatePageNo(pagenos)
{
    console.log("11111111111111");
    console.log("ls "+window.location.search);
    $("#newList").append('<h1>'+'hello home'+'</h1>');
    for (var i = 1; i <= pagenos; i++)
    {
      $("#newList").append('<li onclick=getPageValue(this.value); id="pagenos_'+ i +'" value="' + i + '"> ' + i + '</li>');
    }
}

function getPageValue(val)
{ 
    console.log("2222222222222");
    var p="Page="+val;
    console.log("val "+val);
    console.log(window.location.href.split('#')[0]);
    var a = window.location.search;
        console.log("valhrefg "+valhrefg);
        if(valhrefg == "home")
        {
            history.pushState("","",""+"/home"+""+""+""+"?"+""+""+p);
        }
        generateTable();
}

function generateTable()
{  
    console.log("inside gen table first");
    var output = "";
    var pageno = getUrl();
    console.log("inside gen table : "+pageno);
    var lastIndex = pageno * 10;
    console.log("lastIndex "+ lastIndex);
    console.log("udata.length "+ udata.length);

    if(udata.length < lastIndex)
    {
    lastIndex = udata.length;
    }

    for(i=((pageno - 1)*10);i < lastIndex ;i++) 
    {
        output +=
                 '<tr class="parent">'+
                 '<td>'+ udata[i].userId + '</td>'+
                 '<td>'+ udata[i].id + '</td>'+
                 '</tr>'+
                 '<tr class="cchild">'+ 
                 '<td>'+  udata[i].title + '</td>'+
                 '</tr>';            
    }
    console.log("output "+output);
    document.getElementById('user').innerHTML = output;
}

window.onpopstate = function() {
    console.log("on pop state "+ location.pathname);
    if(location.pathname == "/about")
    {
        console.log("inside location pathname");
        $("#viewer").load("about.html");
    }
    else if(location.pathname == "/")
    {
        console.log("inside on log block");
        $("#viewer").load("about.html");
    }
    else if(location.pathname == "/home")
    {
    generateTable();
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...