mirror of https://github.com/go-gitea/gitea
Change form actions to fetch for submit review box (#25219)
Co-author: @wxiaoguang Close #25096 The way to fix it in this PR is to change form submit to fetch using formData, and add flags to avoid post repeatedly. Should be able to apply to more forms that have the same issue after this PR. In the demo below, 'approve' is clicked several times, and then 'comment' is clicked several time after 'request changes' clicked. After: https://github.com/go-gitea/gitea/assets/17645053/beabeb1d-fe66-4b76-b048-4f022b4e83a0 Update: screenshots from /devtest >  > >  > >  --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>pull/25252/head^2
HesterG
1 year ago
committed by
GitHub
parent
6348823eab
commit
a43ea22479
@ -0,0 +1,42 @@ |
|||||||
|
{{template "base/head" .}} |
||||||
|
<div class="page-content devtest ui container"> |
||||||
|
{{template "base/alert" .}} |
||||||
|
<div> |
||||||
|
<h1>link-action</h1> |
||||||
|
<div> |
||||||
|
Use "window.fetch" to send a request to backend, the request is defined in an "A" or "BUTTON" element. |
||||||
|
It might be renamed to "link-fetch-action" to match the "form-fetch-action". |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<button class="link-action" data-url="fetch-action-test?k=1">test</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<h1>form-fetch-action</h1> |
||||||
|
<div>Use "window.fetch" to send a form request to backend</div> |
||||||
|
<div> |
||||||
|
<form method="get" action="fetch-action-test?k=1" class="form-fetch-action"> |
||||||
|
<button name="btn">submit get</button> |
||||||
|
</form> |
||||||
|
<form method="post" action="fetch-action-test?k=1" class="form-fetch-action"> |
||||||
|
<div><textarea name="text" rows="3" class="js-quick-submit"></textarea></div> |
||||||
|
<div><label><input name="check" type="checkbox"> check</label></div> |
||||||
|
<div><button name="btn">submit post</button></div> |
||||||
|
</form> |
||||||
|
<form method="post" action="/no-such-uri" class="form-fetch-action"> |
||||||
|
<div class="gt-py-5">bad action url</div> |
||||||
|
<div><button name="btn">submit test</button></div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<style> |
||||||
|
.ui.message.flash-message { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.form-fetch-action { |
||||||
|
margin-bottom: 1em; |
||||||
|
border: 1px red dashed; /* show the border for demo purpose */ |
||||||
|
} |
||||||
|
</style> |
||||||
|
{{template "base/footer" .}} |
||||||
@ -1,12 +1,15 @@ |
|||||||
<style> |
{{template "base/head" .}} |
||||||
@media (prefers-color-scheme: dark) { |
|
||||||
:root { |
|
||||||
color-scheme: dark; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
<ul> |
<ul> |
||||||
{{range .SubNames}} |
{{range .SubNames}} |
||||||
<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li> |
<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li> |
||||||
{{end}} |
{{end}} |
||||||
</ul> |
</ul> |
||||||
|
|
||||||
|
<style> |
||||||
|
ul { |
||||||
|
line-height: 2em; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
{{template "base/footer" .}} |
||||||
|
|||||||
@ -1,17 +1,24 @@ |
|||||||
import $ from 'jquery'; |
import $ from 'jquery'; |
||||||
|
|
||||||
export function handleGlobalEnterQuickSubmit(target) { |
export function handleGlobalEnterQuickSubmit(target) { |
||||||
const $target = $(target); |
const form = target.closest('form'); |
||||||
const $form = $(target).closest('form'); |
if (form) { |
||||||
if ($form.length) { |
if (!form.checkValidity()) { |
||||||
|
form.reportValidity(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (form.classList.contains('form-fetch-action')) { |
||||||
|
form.dispatchEvent(new SubmitEvent('submit', {bubbles: true, cancelable: true})); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
// here use the event to trigger the submit event (instead of calling `submit()` method directly)
|
// here use the event to trigger the submit event (instead of calling `submit()` method directly)
|
||||||
// otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
|
// otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
|
||||||
if ($form[0].checkValidity()) { |
$(form).trigger('submit'); |
||||||
$form.trigger('submit'); |
|
||||||
} |
|
||||||
} else { |
} else { |
||||||
// if no form, then the editor is for an AJAX request, dispatch an event to the target, let the target's event handler to do the AJAX request.
|
// if no form, then the editor is for an AJAX request, dispatch an event to the target, let the target's event handler to do the AJAX request.
|
||||||
// the 'ce-' prefix means this is a CustomEvent
|
// the 'ce-' prefix means this is a CustomEvent
|
||||||
$target.trigger('ce-quick-submit'); |
target.dispatchEvent(new CustomEvent('ce-quick-submit', {bubbles: true})); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue