Added support do do a push-state ajax request with forms
This commit is contained in:
93
lib/proto/attach-form.js
Normal file
93
lib/proto/attach-form.js
Normal file
@@ -0,0 +1,93 @@
|
||||
require("../polyfills/Function.prototype.bind")
|
||||
|
||||
var on = require("../events/on")
|
||||
var clone = require("../clone")
|
||||
|
||||
var attrClick = "data-pjax-click-state"
|
||||
|
||||
var formAction = function(el, event){
|
||||
|
||||
this.options.requestOptions = {
|
||||
requestUrl : el.getAttribute('action') || window.location.href,
|
||||
requestMethod : el.getAttribute('method') || 'GET',
|
||||
}
|
||||
|
||||
//create a testable virtual link of the form action
|
||||
var virtLinkElement = document.createElement('a');
|
||||
virtLinkElement.setAttribute('href', this.options.requestOptions.requestUrl);
|
||||
|
||||
// Ignore external links.
|
||||
if (virtLinkElement.protocol !== window.location.protocol || virtLinkElement.host !== window.location.host) {
|
||||
el.setAttribute(attrClick, "external");
|
||||
return
|
||||
}
|
||||
|
||||
// Ignore click if we are on an anchor on the same page
|
||||
if (virtLinkElement.pathname === window.location.pathname && virtLinkElement.hash.length > 0) {
|
||||
el.setAttribute(attrClick, "anchor-present");
|
||||
return
|
||||
}
|
||||
|
||||
// Ignore empty anchor "foo.html#"
|
||||
if (virtLinkElement.href === window.location.href.split("#")[0] + "#") {
|
||||
el.setAttribute(attrClick, "anchor-empty")
|
||||
return
|
||||
}
|
||||
|
||||
// if declared as a full reload, just normally submit the form
|
||||
if ( this.options.currentUrlFullReload) {
|
||||
el.setAttribute(attrClick, "reload");
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
var paramObject = [];
|
||||
for(var elementKey in el.elements) {
|
||||
var element = el.elements[elementKey];
|
||||
if (!!element.name && element.attributes !== undefined && element.tagName.toLowerCase() !== 'button'){
|
||||
if ((element.attributes.type !== 'checkbox' && element.attributes.type !== 'radio') || element.checked) {
|
||||
paramObject.push({ name: encodeURIComponent(element.name), value: encodeURIComponent(element.value)});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Creating a getString
|
||||
var paramsString = (paramObject.map(function(value){return value.name+"="+value.value;})).join('&');
|
||||
|
||||
this.options.requestOptions.requestPayload = paramObject;
|
||||
this.options.requestOptions.requestPayloadString = paramsString;
|
||||
|
||||
el.setAttribute(attrClick, "submit");
|
||||
|
||||
this.loadUrl(virtLinkElement.href, clone(this.options))
|
||||
|
||||
};
|
||||
|
||||
var isDefaultPrevented = function(event) {
|
||||
return event.defaultPrevented || event.returnValue === false;
|
||||
};
|
||||
|
||||
|
||||
module.exports = function(el) {
|
||||
var that = this
|
||||
|
||||
on(el, "submit", function(event) {
|
||||
if (isDefaultPrevented(event)) {
|
||||
return
|
||||
}
|
||||
|
||||
formAction.call(that, el, event)
|
||||
})
|
||||
|
||||
on(el, "keyup", function(event) {
|
||||
if (isDefaultPrevented(event)) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
if (event.keyCode == 13) {
|
||||
formAction.call(that, el, event)
|
||||
}
|
||||
}.bind(this))
|
||||
}
|
||||
Reference in New Issue
Block a user