You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: readme.md
+14-10Lines changed: 14 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -81,7 +81,7 @@ Example
81
81
The first thing we want to do is make a connection with Pjax. In your JavaScript bundle, we need to initialize. Our example web application has 3 pages, the home page, about page and contact page. We are going to instruct pjax to replace the `<nav>` and `<main>` fragments on every visit and then we are going to leverage `data-pjax` attributes to replace an additional fragment when we navigate to the contact page.
82
82
83
83
<br>
84
-
**JavaScript Bundle**
84
+
<strong>JavaScript Bundle</strong>
85
85
<br>
86
86
87
87
<!-- prettier-ignore -->
@@ -102,6 +102,7 @@ export default () => {
102
102
```
103
103
104
104
**Home Page**
105
+
105
106
<br>
106
107
Below we have a very basic Home Page with pjax wired up and all `<a>` elements will be intercepted and cached. SSR web application (in most cases) will only ever have a couple of fragments that change between navigation, so keeping to that logic lets begin..
107
108
@@ -470,15 +471,15 @@ Example
470
471
471
472
<a
472
473
href="*"
473
-
data-pjax-replace="(['target1', 'target2'])">
474
+
data-pjax-replace="(['#target1', '#target2'])">
474
475
Link
475
476
</a>
476
477
477
-
<div data-pjax-target="target1">
478
+
<div id="target1">
478
479
I will be replaced on next navigation
479
480
</div>
480
481
481
-
<div data-pjax-target="target2">
482
+
<div id="target2">
482
483
I will be replaced on next navigation
483
484
</div>
484
485
@@ -505,15 +506,15 @@ Example
505
506
506
507
<a
507
508
href="*"
508
-
data-pjax-prepend="(['target-1', 'target-2'])">
509
+
data-pjax-prepend="(['#target-1', '#target-2'])">
509
510
Page 2
510
511
</a>
511
512
512
-
<div data-pjax-target="target-1">
513
+
<div id="target-1">
513
514
I will prepend to target-2 on next navigation
514
515
</div>
515
516
516
-
<div data-pjax-target="target-2">
517
+
<div id="target-2">
517
518
<p>target-1 will prepended to me on next navigation</p>
518
519
</div>
519
520
@@ -526,11 +527,11 @@ Example
526
527
527
528
<a
528
529
href="*"
529
-
data-pjax-prepend="(['target-1', 'target-2'])">
530
+
data-pjax-prepend="(['#target-1', '#target-2'])">
530
531
Page 2
531
532
</a>
532
533
533
-
<div data-pjax-target="target-2">
534
+
<div id="target-2">
534
535
535
536
<!-- An action reference record is applied -->
536
537
<div data-pjax-action="xxxxxxx">
@@ -581,7 +582,10 @@ Example
581
582
<a data-pjax-prefetch="hover" href="*"></a>
582
583
583
584
<!-- prefetch will begin 500ms after hover but will cancel if mouse existed before threshold -->
0 commit comments