Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Fix loading button with invalid form #20754

Merged
merged 2 commits into from
Aug 11, 2022
Merged

Fix loading button with invalid form #20754

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a63170
Fix loading button with invalid form
silverwind Aug 10, 2022
387e873
Merge branch 'main' into loading-btn
lunny Aug 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions web_src/js/features/common-global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,16 +142,12 @@ export function initGlobalCommon() {
}
});

// loading-button this logic used to prevent push one form more than one time
$(document).on('click', '.button.loading-button', function (e) {
Copy link
Member

Choose a reason for hiding this comment

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

Could this break <a>s with the button style class?
Links can't be submitted, right?
But is there even a link that satisfies alll these requirements?
I haven't found any with the loading-button class, but simple button links are common...
(Of course, that was only a small search I did...)

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, <a> can not submit a form in HTML, only through JS would that be possible. Searching for loading-button in templates yields exactly 3 buttons that use this class, so I think we should keep the selector simple and independent of the Fomantic-specific .button class.

const $btn = $(this);

if ($btn.hasClass('loading')) {
e.preventDefault();
return false;
}

$btn.addClass('loading disabled');
// prevent multiple form submissions on forms containing .loading-button
document.addEventListener('submit', (e) => {
const btn = e.target.querySelector('.loading-button');
Copy link
Member

Choose a reason for hiding this comment

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

I have the slight feeling that @wxiaoguang won't like this change as it mixes native DOM APIs with jQuery again.

Copy link
Member Author

@silverwind silverwind Aug 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Sorry, but I'm not going to write jQuery just because it "fits" better. jQuery can go to hell if you ask me 😉.

Copy link
Contributor

@wxiaoguang wxiaoguang Aug 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I am fine with it since it's a full function without other dependency.

I just have objection to something like el.setAttribute(...); $(el).attr(....) (mixed together in newly written code)

if (!btn) return;
if (btn.classList.contains('loading')) return e.preventDefault();
btn.classList.add('loading');
});
}

Expand Down