From 135eda3b542d1851fdf6867e6dd33b967460c0b0 Mon Sep 17 00:00:00 2001 From: Richard Kimber Date: Fri, 21 Jun 2013 09:31:50 +0100 Subject: [PATCH 1/2] Added submitClick function to record value of the submitting element --- README.md | 13 +++++++++ jquery.pjax.js | 78 +++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 84 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index fc909470..5ffcf1ff 100644 --- a/README.md +++ b/README.md @@ -174,6 +174,19 @@ $(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. Remember to prevent the default action of the target form. + +``` javascript +$(document) + .on('submit', 'form', function(event) { event.preventDefault(); }) + .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 8b0d31ad..d4523752 100644 --- a/jquery.pjax.js +++ b/jquery.pjax.js @@ -103,7 +103,7 @@ function handleClick(event, container, options) { // // Exported as $.pjax.submit // -// event - "click" jQuery.Event +// event - "submit" jQuery.Event // options - pjax options // // Examples @@ -115,25 +115,87 @@ 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('submit', 'form', function(event) { event.preventDefault(); }) +// .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, fragment: null } pjax($.extend({}, defaults, options)) - - event.preventDefault() } // Loads a URL with ajax, puts the response body inside a container, @@ -768,6 +830,7 @@ function enable() { $.pjax.disable = disable $.pjax.click = handleClick $.pjax.submit = handleSubmit + $.pjax.submitClick = handleSubmitClick $.pjax.reload = pjaxReload $.pjax.defaults = { timeout: 650, @@ -800,6 +863,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) @@ -819,4 +883,4 @@ $.support.pjax = $.support.pjax ? enable() : disable() -})(jQuery); +})(jQuery); \ No newline at end of file From a9359bee49ff47280c3efeca621b38a79f3eb14d Mon Sep 17 00:00:00 2001 From: Richard Kimber Date: Fri, 21 Jun 2013 09:47:43 +0100 Subject: [PATCH 2/2] No need to prevent the default action of the form, both functions can sit side by side --- README.md | 3 +-- jquery.pjax.js | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 5ffcf1ff..4eecc922 100644 --- a/README.md +++ b/README.md @@ -176,11 +176,10 @@ $(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. Remember to prevent the default action of the target form. +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('submit', 'form', function(event) { event.preventDefault(); }) .on('click', 'form :submit', function(event) { var container = $(this).closest('[data-pjax-container]') $.pjax.submitClick(event, container) diff --git a/jquery.pjax.js b/jquery.pjax.js index d4523752..1cfc829d 100644 --- a/jquery.pjax.js +++ b/jquery.pjax.js @@ -131,7 +131,6 @@ function handleSubmit(event, container, options) { // Examples // // $(document) -// .on('submit', 'form', function(event) { event.preventDefault(); }) // .on('click', 'form :submit', function(event) { // var container = $(this).closest('[data-pjax-container]') // $.pjax.submitClick(event, container)