Skip to content

Send submitting elements value along with post #390

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

kim3er
Copy link
Contributor

@kim3er kim3er commented May 11, 2014

New PR in favour of #295

Creates hidden element in form to ensure inclusion of value associated to submitting element.

@kim3er kim3er mentioned this pull request May 11, 2014
function handleSubmitClick(event) {
var $submit = $(this),
$form = $submit.closest('form'),
hiddenClass = 'pjax-submit-button-value'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing comma

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll get it added.

@@ -135,6 +136,44 @@ function handleSubmit(event, container, options) {
event.preventDefault()
}

var submitClickSelectors = 'form[data-pjax] input[type=submit],\
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure this selector works.. Do all pjax forms necessarily have a data-pjax attribute?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Readme infers as much (https://github.com/defunkt/jquery-pjax#pjaxsubmit), but there is nothing cas iron. I think it is should be 'opt-in' functionality though. Do you agree?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need to capture the current submit element globally, no matter if a pjax-form is handled atm or not. I see no other way.

Any other ideas @mislav @josh ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm happy to do this. I just think that the form functionality as a whole should be opt-in.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or possibly opt-out? form:not(:pjax-ignore)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there are no perf implications I would enable it by default, because then pjax-forms would behave like usual forms, which is what devs would expect in the first place IMO

@mislav
Copy link
Collaborator

mislav commented May 11, 2014

First of all, I'd like to avoid adding hidden elements to the DOM because then we have to worry about cleaning them up after pjax, and probably other edge-cases as well.

How about we add the submit button name+value pair to serializeArray() result?

@kim3er
Copy link
Contributor Author

kim3er commented May 11, 2014

Rather than add a hidden element, we could add the name+value to a data attribute on the form, during the click event. Then apply attribute to the post in the submit event.

@josh
Copy link
Contributor

josh commented May 11, 2014

@github uses https://github.com/josh/rails-behaviors/blob/master/remote_submit.coffee to generically resolve the submit button tracking.

I'm a little wary of the complexity of supporting this here.

@kim3er
Copy link
Contributor Author

kim3er commented May 11, 2014

@josh My PR is based on that code.

@kim3er
Copy link
Contributor Author

kim3er commented May 11, 2014

In the latest changes I've:

  • Switched from a hidden input to a data attribute.
  • Added a unit test

@mislav
Copy link
Collaborator

mislav commented May 12, 2014

Yeah I'm also wary of the complexity to do this, but I think if you install pjax on the page, we should make sure that forms are submitted with the same parameters as they would be natively. Transparency is one of the promises of pjax.

This is starting to look usable. I would like if there were more unit tests, though, such as if the form has multiple submit buttons, or the submit buttons don't have a name attribute, etc.

I'd also like to avoid this conflicting with rails-behaviors button tracking. If it conflicts, we cannot have it in pjax.

@kim3er
Copy link
Contributor Author

kim3er commented May 12, 2014

I've added more unit tests to deal with:

  • Single form, single submit
  • Multiple forms
  • Multiple submits
  • Multiple submit types

There should be no conflict with rails-behaviors because we're using data attributes instead of hidden fields.

@staabm raised a point re naming conventions. This PR currently assumes the submitting form will be decorated with data-pjax, when in fact there is no restriction on the implementing code:

    $("#main")
        .pjax("a")
            .on('submit', '.anything-goes', function(evt) {
              $.pjax
                .submit(evt, $("#main"));
            })

I think this could be resolved in a few different ways:

Bind All
Bind the click event to all submitting elements, by removing the data-pjax assumption. This would mean potentially binding inputs that are not part of a PJAX controlled form.

Documentation
Update the documentation to make implementors aware that this functionality depends on the data-pjax decoration.

New Initialiser
Rather than bind handle submit manually, make it part of the PJAX constructor. We would then have the implementors intended selector.

This:

    $("#main")
        .pjax("a", '.container')
            .on('submit', '.anything-goes', function(evt) {
              $.pjax
                .submit(evt, $("#main"));
            })

Becomes:

    $("#main")
        .pjax("a", '.container', { form: '.anything-goes' })

My preference is for the Documentation option.

@mislav
Copy link
Collaborator

mislav commented May 12, 2014

Thanks. I'm traveling right now so it can be a while until I review all of
this.

@gsiegman
Copy link

gsiegman commented Aug 7, 2014

Any idea when this might be merged in?

@sj26
Copy link
Contributor

sj26 commented Feb 18, 2015

Also hit this problem recently. The other option is stashing the clicked submit button for all forms using something like the jquery-ujs solution:

https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L453

Which means on $.pjax.enable there would need to be something like:

$(document).on("click.pjax","form :submit", function(event) {
  var button = $(this),
    name = button.attr("name"),
    value = button.val() || "Submit",
    data = name ? {name: name, value: value} : null;

  button.closest("form").data("pjax:submit-button", data);
});

Then fetching and respecting it inside handleSubmit, and removing it inside disable.

@staabm
Copy link
Contributor

staabm commented Jan 18, 2016

also stumbled over this problem today..

@Shade-
Copy link

Shade- commented Oct 26, 2016

The recent v54 update to Chrome adds this issue also in it.

@kim3er
Copy link
Contributor Author

kim3er commented Oct 26, 2016

I'm still up for doing any leg work on this, if there is any interest from the team.

@edslocomb
Copy link

This tripped us up today. We've implemented a Yes/No/Maybe widget as a form with three button elements, submitting different values depending on which button is clicked. This widget works nicely in a no-js environment, but breaks when we try to attach pjax to it.

The only other option which works in a degraded no-js environment is three forms, each with a hidden field and a submit button, a la button_to() in Rails. But those extra form tags wreck our css, bleh.

It looks like this issue has been outstanding for something like two years now; is there anything we can do to move it forward?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants