iLoveElysia/pjax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

Fix form submission #129

Merged
robinnorth merged 4 commits from fix/forms into master 2018-03-02 15:25:09 -05:00
Conversation 13 Commits 4 Files Changed 8 +163 -19
5 changed files with 163 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ca479618fe - Show all commits

3
example/example.js
View File

@@ -20,7 +20,8 @@ document.addEventListener("pjax:success", function() {
document.addEventListener("DOMContentLoaded", function() {
var pjax = new Pjax({
elements: [".js-Pjax"],
selectors: [".body"]
selectors: [".body", "title"],
cacheBust: true,
// currentUrlFullReload: true,
})
console.log("Pjax initialized.", pjax)

138
example/forms.html Normal file
View File

@@ -0,0 +1,138 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Forms</title>
<script src="../pjax.js"></script>
<script src="example.js"></script>
</head>
<body>
<div class="body">
<h1>Forms</h1>
Hello. Try out the examples below and inspect the results in your browser's developer tools, or go to the <a href="index.html" class="js-Pjax">Index</a>.
<h3>GET form</h3>
<form action="" method="get" class="js-Pjax" id="get-form">
<label for="get-form-text">Text input:</label>
<input type="text" name="textInput" id="get-form-text" value="Foobar" />
<br />
<br />
<label for="get-form-number">Number input:</label>
<input type="number" name="numberInput" id="get-form-number" value="1" />
<br />
<br />
<label for="get-form-email">Email input:</label>
<input type="email" name="emailInput" id="get-form-email" value="example@example.com" />
<br />
<br />
<label for="get-form-textarea">Textarea:</label>
<textarea name="textarea" id="get-form-textarea">This is some text</textarea>
<br />
<br />
<fieldset>
<label for="get-form-radio-1">Radio input:</label>
<input type="radio" name="radioInput" value="radio-1" checked id="get-form-radio-1" />
<label for="get-form-radio-2">Radio input alt:</label>
<input type="radio" name="radioInput" value="radio-2" id="get-form-radio-2" />
</fieldset>
<br />
<br />
<label for="get-form-checkbox">Checkbox input:</label>
<input type="checkbox" name="checkboxInput" checked id="get-form-checkbox" />
<br />
<br />
<label for="get-form-select">Select list:</label>
<select name="select" id="get-form-select">
<option>
Option 1
</option>
<option>
Option 2
</option>
</select>
<br />
<br />
<input type="submit" value="Submit" />
</form>
<br />
<br />
<h3>POST form</h3>
<form action="" method="post" class="js-Pjax" id="post-form">
<label for="post-form-text">Text input:</label>
<input type="text" name="textInput" id="post-form-text" value="Foobar" />
<br />
<br />
<label for="post-form-number">Number input:</label>
<input type="number" name="numberInput" id="post-form-number" value="1" />
<br />
<br />
<label for="post-form-email">Email input:</label>
<input type="email" name="emailInput" id="post-form-email" value="example@example.com" />
<br />
<br />
<label for="post-form-textarea">Textarea:</label>
<textarea name="textarea" id="post-form-textarea">This is some text</textarea>
<br />
<br />
<fieldset>
<label for="post-form-radio-1">Radio input:</label>
<input type="radio" name="radioInput" value="radio-1" checked id="post-form-radio-1" />
<label for="post-form-radio-2">Radio input alt:</label>
<input type="radio" name="radioInput" value="radio-2" id="post-form-radio-2" />
</fieldset>
<br />
<br />
<label for="post-form-checkbox">Checkbox input:</label>
<input type="checkbox" name="checkboxInput" checked id="post-form-checkbox" />
<br />
<br />
<label for="post-form-select">Select list:</label>
<select name="select" id="post-form-select">
<option>
Option 1
</option>
<option>
Option 2
</option>
</select>
<br />
<br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>

17
example/index.html
View File

@@ -1,17 +1,22 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta charset="utf-8">
<title>Hello</title>
<script src='../pjax.js'></script>
<script src='example.js'></script>
<script src="../pjax.js"></script>
<script src="example.js"></script>
</head>
<body>
<div class='body'>
<div class="body">
<h1>Index</h1>
Hello.
Go to <a href='page2.html' class="js-Pjax">Page 2</a> or <a href='page3.html' class="js-Pjax">Page 3</a> and view your console to see Pjax events.
Clicking on <a href='index.html'>this page</a> will just reload the page entirely.
Go to <a href="page2.html" class="js-Pjax">Page 2</a> or <a href="page3.html" class="js-Pjax">Page 3</a> and view your console to see Pjax events.
Clicking on <a href="index.html">this page</a> will just reload the page entirely.
<h2>Forms</h2>
You can submit GET or POST forms with Pjax! Go to the <a href="forms.html">form examples</a> to try it out.
</div>
</body>
</html>

12
example/page2.html
View File

@@ -1,15 +1,15 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Hello</title>
<script src='../pjax.js'></script>
<script src='example.js'></script>
<meta charset="utf-8">
<title>Page 2</title>
<script src="../pjax.js"></script>
<script src="example.js"></script>
</head>
<body>
<div class='body'>
<div class="body">
<h1>Page 2</h1>
Hello. Go to <a href='index.html' class="js-Pjax">Index</a>.
Hello. Go to <a href="index.html" class="js-Pjax">Index</a>.
</div>
</body>
</html>

12
example/page3.html
View File

@@ -1,15 +1,15 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Hello</title>
<script src='../pjax.js'></script>
<script src='example.js'></script>
<meta charset="utf-8">
<title>Page 3</title>
<script src="../pjax.js"></script>
<script src="example.js"></script>
</head>
<body>
<div class='body'>
<div class="body">
<h1>Page 3</h1>
Hello. Go to <a href='index.html' class="js-Pjax">Index</a>.
Hello. Go to <a href="index.html" class="js-Pjax">Index</a>.
</div>
</body>
</html>