pjax가 고장났어요?

11287 단어 jquery-pjax

묘사

그래서 처음에 나는 워드프레스로 이 일을 해 보았는데 주사위가 없었다.응답으로 나는 기본적인 HTML과 JS로 이 일을 해 보았다.
주사위가 없어요?
색인은 홈 페이지이고 세 번째 닻으로 연결됩니다.html(일반 텍스트).
아래에서 보듯이, pjaxy가 유효한지 확인하기 위해 h1에 시간 스탬프를 추가했습니다.
하지만, 나는 그것을 일하게 할 수 없다.
나는 또 다른 파일을 시도했다. second.html, 그것은 완전한 html/head 표시와 단락 표시 중의 텍스트가 있다(나는 단편적인 방법을 사용했지만 운도 없다).
Safari/Chrome/Firefox에는 사용할 수 없습니다.
만약 어떤 도움을 제공할 수 있다면, 나는 감격을 금할 수 없을 것이다.
감사합니다!
색인html::

<!doctype html>
<html>
<head>
  <title>Testing PJAX</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript" src="pjax.js"></script>

    <script>
        var time = new Date().getTime();

        $(document).ready(function(){

            $('.time').html(time);

            $("a.pjax").pjax("#main" });

        });
    </script>
</head>
<body>

    <h1>TIME: <span class='time'></span></h1>

    <a class="pjax" href="third.html">PJAX</a>

    <div id="main">
        <h1>This is me testing PJAX!!!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</body>
</html>

셋째html

Bacon ipsum dolor sit amet strip steak short ribs jowl pork loin tri-tip, meatball bacon andouille. Biltong swine spare ribs, pork chop turducken pancetta ball tip brisket turkey tenderloin. Chicken corned beef bresaola drumstick boudin pancetta. Pastrami short loin ball tip venison turducken. Flank shankle ham hock ribeye bacon sausage jowl meatloaf turkey tail fatback. Jerky meatloaf venison cow tri-tip, shoulder bacon hamburger ham pork chop.

토론 #1

교체를 시도합니다(타자 오류 발생):

$("a.pjax").pjax("#main" });

및:
미르자데릭의 답장에 감사합니다!
불행히도 그것은 여전히 작용하지 않는다.
콘솔에서 $에 대한 "true"를 기록하고 있습니다.지지하다.pjax

$("a.pjax").pjax({ container: "#main" });

토론 #2

는 이 문장을 두 번째 줄에서 시작한다.div에 html을 입력하고 다시 시도하세요.토론 #셋다음:

<!doctype html>
<html>
<head>
  <title>Testing PJAX</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript" src="pjax.js"></script>

    <script>

        var time = new Date().getTime();
        console.log(time);

        $(document).ready(function(){

            $('.time').html(time);

            $("a.pjax").pjax({ container: "#main" });

            console.log($.support.pjax);

        });

    </script>
</head>
<body>

    <h1>TIME: <span class='time'></span></h1>

    <a class="pjax" href="second.html">PJAX</a>

    <div id="main">
        <h1>This is me testing PJAX!!!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</body>
</html>

<div id="main">Bacon ipsum dolor sit amet strip steak short ribs jowl pork loin tri-tip, meatball bacon andouille. Biltong swine spare ribs, pork chop turducken pancetta ball tip brisket turkey tenderloin. Chicken corned beef bresaola drumstick boudin pancetta. Pastrami short loin ball tip venison turducken. Flank shankle ham hock ribeye bacon sausage jowl meatloaf turkey tail fatback. Jerky meatloaf venison cow tri-tip, shoulder bacon hamburger ham pork chop.</div>

아무것도 없음:/
시간 내주셔서 감사합니다!
색인html

$("a.pjax").pjax({ container: "#main" , fragment: "#main" });

그 다음.html

토론 #4

<div id="main">Bacon ipsum dolor sit amet strip steak short ribs jowl pork loin tri-tip, meatball bacon andouille. Biltong swine spare ribs, pork chop turducken pancetta ball tip brisket turkey tenderloin. Chicken corned beef bresaola drumstick boudin pancetta. Pastrami short loin ball tip venison turducken. Flank shankle ham hock ribeye bacon sausage jowl meatloaf turkey tail fatback. Jerky meatloaf venison cow tri-tip, shoulder bacon hamburger ham pork chop.
</div>

복구!
실제 서버에서 실행해야 합니다...?
감사합니다 @mirzadelic!!

토론 #5

로컬 호스트에서 작동하지 않습니까?

토론 #6

나는 일반적인 html 파일을 통해 그것을 실행하는 것이지 나의 로컬 호스트를 사용하는 것이 아니다(이것이 문제이다).
하지만, 나는 세션 옵션을 이해했는지 모르겠다...
fragment는 페이지에 불러올 요소로 설명할 수 있습니까? 아니면 메인 용기 요소와 같아야 합니까?
전임:

<!doctype html>
<html>
<head>
  <title>Testing PJAX</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript" src="pjax.js"></script>

    <script>

        var time = new Date().getTime();
        console.log(time);

        $(document).ready(function(){

            $('.time').html(time);

            $("a.pjax").pjax({ container: "#main", fragment: "#main" });

            console.log($.support.pjax);

        });

    </script>
</head>
<body>

    <h1>TIME: <span class='time'></span></h1>

    <a class="pjax" href="second.html">PJAX</a>

    <div id="main">
        <h1>This is me testing PJAX!!!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</body>
</html>

이상은 나에게 적용되지 않는다.
그 역할을 발휘하기 위해서는 다음과 같은 것이 필요하다.

$('a.pjax').pjax('#main", { fragment: '#differentContainer' });

토론 #7

모든 요소를 #main에 로드할 수 있는 경우 같은 div가 필요하지 않습니다.

$('a.pjax').pjax('#main", { fragment: '#main' });

pjax에서 #Differenting container를 찾을 것입니다. 현재 #main div.

토론 #8

에 모든 내용을 저장합니다. 작업 상태로 설정했습니다. 다음 페이지에 '변경' 을 했지만 #main container에 불러올 내용이 없습니다.
나는 심지어 aax를 캐시하지 않고 빈 #main으로 설정하려고 시도했다.

토론 #9

다음 페이지에 #다른 용기가 있어야 하기 때문에 이div에서 내용을 가져와 #main에 넣습니다.
HTML 태그를 발표할 수 있습니까?

토론 #10

할 수 있어!
감사합니다!!
그 다음.html

$('a.pjax').pjax({ container: '#main', fragment: '#differentContainer' });

색인html

<!doctype html>
<html>
<head>
  <title>TITLE!</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
</head>
<body>
     <div id="shim">
        Bacon ipsum dolor sit amet strip steak short ribs jowl pork loin tri-tip, meatball bacon andouille. Biltong swine spare ribs, pork chop turducken pancetta ball tip brisket turkey tenderloin. Chicken corned beef bresaola drumstick boudin pancetta. Pastrami short loin ball tip venison turducken. Flank shankle ham hock ribeye bacon sausage jowl meatloaf turkey tail fatback. Jerky meatloaf venison cow tri-tip, shoulder bacon hamburger ham pork chop.
     </div>
</body>
</html>

토론 #11

#shim in div의 텍스트 줄을 바꿔야 합니다.

<!doctype html>
<html>
<head>
  <title>Testing PJAX</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript" src="/pjax.js"></script>

    <script>

        var time = new Date().getTime();
        console.log(time);

        $(document).ready(function(){

            $('.time').html(time);

            $("a.pjax").pjax("#container", { fragment: "#shim" });

            console.log("PJAX SUPPORT: " + $.support.pjax);

        });

    </script>
</head>
<body>

    <h1>TIME: <span class='time'></span></h1>

    <a class="pjax" href="/second.html">PJAX</a>

    <div id="container">
        <h1>This is me testing PJAX!!!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</body>
</html>

이것은 나에게 유용하다.

토론 #12

쿵!일!
응답을 되돌리기 위해서는 내용을fragment div의 요소로 포장해야 합니다.
그래서 베이컨 익프슨...베이컨 익프생도 그렇고...
감사합니다 @mirzadelic!!!

토론 #13

효과가 있어서 기쁩니다.

Reference

이 문제에 관하여(pjax가 고장났어요?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://github.com/defunkt/jquery-pjax/issues/182

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Phalcon 프로젝트 환경 대화 케이스

Chrome의 자동 재생성(EOTD No.8)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다