diff --git a/README.md b/README.md index 9bdad36d..c53882c3 100644 --- a/README.md +++ b/README.md @@ -174,6 +174,18 @@ $(document).on('submit', 'form[data-pjax]', function(event) { }) ``` +### `$.pjax.submitClick` + +Submits a form via pjax. Based on the same code as `$.pjax.submit`, but has the benefit of being able to record the value of the submitting element. Same warnings as `$.pjax.submit` apply. + +``` javascript +$(document) + .on('click', 'form :submit', function(event) { + var container = $(this).closest('[data-pjax-container]') + $.pjax.submitClick(event, container) + }) +``` + ### `$.pjax` Manual pjax invocation. Used mainly when you want to start a pjax request in a handler that didn't originate from a click. If you can get access to a click `event`, consider `$.pjax.click(event)` instead. diff --git a/jquery.pjax.js b/jquery.pjax.js index 9b11ce47..772a0134 100644 --- a/jquery.pjax.js +++ b/jquery.pjax.js @@ -102,7 +102,7 @@ function handleClick(event, container, options) { // // Exported as $.pjax.submit // -// event - "click" jQuery.Event +// event - "submit" jQuery.Event // options - pjax options // // Examples @@ -114,24 +114,85 @@ function handleClick(event, container, options) { // // Returns nothing. function handleSubmit(event, container, options) { - options = optionsFor(container, options) + formSubmissionHandler(event.currentTarget, null, container, options) + + event.preventDefault() +} + +// Public: pjax on submitting form element handler +// +// Exported as $.pjax.submitClick +// +// event - "click" jQuery.Event +// options - pjax options +// form - target form (optional) +// +// Examples +// +// $(document) +// .on('click', 'form :submit', function(event) { +// var container = $(this).closest('[data-pjax-container]') +// $.pjax.submitClick(event, container) +// }) +// +// Returns nothing. +function handleSubmitClick(event, container, options, form) { + if (!form) { + var $parents = $(event.currentTarget).parents('form') + + if (!$parents.length) + throw "If submitting element is not contained with target form, please specify form as forth parameter" + + form = $(event.currentTarget).parents('form').first()[0] + } - var form = event.currentTarget + formSubmissionHandler(form, event.currentTarget, container, options) + + event.preventDefault() +} + +// Public: Event handler for handleSubmit & handleSubmitClick +// +// form - target form +// submitter - submitting element (nullable) +// options - pjax options +// +// Returns nothing. +function formSubmissionHandler(form, submitter, container, options) { + options = optionsFor(container, options) if (form.tagName.toUpperCase() !== 'FORM') throw "$.pjax.submit requires a form element" + var data = $(form).serializeArray() + + // $().serializeArray() does not account for the button pressed + // beause it is not tied to the submit, so the value of a clicked + // submit button must be retrieved manually. + if (submitter) { + var $button = $(submitter) + + // Creating and object ot insert in the data array. + var buttonValue = { + name: $button.attr('name'), + value: $button.val() + } + + // Only insert if button has a name attribute and a value. + if (buttonValue.name && buttonValue.value) { + data.push(buttonValue) + } + } + var defaults = { type: form.method.toUpperCase(), url: form.action, - data: $(form).serializeArray(), + data: data, container: $(form).attr('data-pjax'), target: form } pjax($.extend({}, defaults, options)) - - event.preventDefault() } // Loads a URL with ajax, puts the response body inside a container, @@ -784,6 +845,7 @@ function enable() { $.pjax.disable = disable $.pjax.click = handleClick $.pjax.submit = handleSubmit + $.pjax.submitClick = handleSubmitClick $.pjax.reload = pjaxReload $.pjax.defaults = { timeout: 650, @@ -816,6 +878,7 @@ function disable() { $.pjax.disable = $.noop $.pjax.click = $.noop $.pjax.submit = $.noop + $.pjax.submitClick = $.noop $.pjax.reload = function() { window.location.reload() } $(window).off('popstate.pjax', onPjaxPopstate)