Hi @ChrisjChrisj, so the loading_msg would actually be a confirm message before starting the upload? You can’t use the beforeSend() hook then, which (AFAICT) can only be used for synchronously pre-processing the data and doesn’t wait for events. In any case, returning true from the loading message click listener will do nothing (you might only return false to prevent the default of that click event, which would be of no use here I suppose). So instead, you’d need to
Add a click listener to the loading message that will submit() the form
Add a click listener to the form’s submit button (or a submit listener to the form itself) that will
– Prevent the default event and
– Show the message that, when clicked, would in turn actually submit the form
Many thanks for your reply.
Regarding " so the loading_msg would actually be a confirm message before starting the upload?", no it would simply be an informational message.
Regarding your kind suggestions, something like this?
Ah, then just don’t return false from the beforeSend() hook and the AJAX submit should start right after showing the message, no matter if the user would click that message or not.
and it is true that " AJAX submit should start right after showing the message", but it shows too quickly and then submits, no time to read the message.
So, that’s why I added:
return false;
to stop the submit, to allow the message to be read. I’m sure there’s a better solution.
Any additional assistance is welcomed.
Why would the form submitting, which is an AJAX action, close a form on the page? Nothing should be closing the loading message except for a button push, right?
Okay so the user first has to click the message before the form is getting submitted? I’d have understood this as a confirm message… ^^ anyway, this should do the trick then:
const $uploadForm = $('#upload-form form')
const $loadingMsg = $('.loading_msg')
const $submitBtn = $('#submit-btn')
// AJAX form initialization
$uploadForm.ajaxForm({
url: '?hash=something'
})
// Trigger the form submission
// when clicking the message
$loadingMsg.click(() => {
$uploadForm.submit()
})
// When clicking the submit button, show the
// message rather than submitting the form
$submitBtn.click(event => {
event.preventDefault()
$loadingMsg.show()
})
I’m still trying to figure out where the whole idea of the message closing comes from.
You say it closes “too quick”, but it shouldnt be closing at all unless you clicked on something, unless you’ve wired something else to refresh/reload the page or its contents.
EDIT: Wow, I can read. The success portion of the ajax request changes the page’s href. Well, yeah, that’s going to do it.
Be it how it may, let’s focus on the logic then. So the user should click the message before the AJAX form submit takes place? Here’s a fiddle with the above code; it’s just for the general approach, but you can fork and update it with your code that isn’t working:
Thanks again for all the replies. Tried integrating the JSfiddle code into mine without success.
Any other suggestions are appreciated.
My code in the original posting stops the submission, so the message can be read. How can the submission then be un-stopped upon the reader closing the message?
It can’t, you might however submit the form programmatically later (see my code).
Again, this won’t do anything. You’re returning true from the .loading_msg click handler, which does nothing and in particular has no effect to the beforeSend() handler.
The trigger() method takes the event name as an argument, not the selector. Did you mean this?
$('#submit-btn').trigger('click')
Also don’t bind the .loading_msg click handler inside the beforeSend() handler, as this would add another event listener each time there is an attempt to submit the form; put that on the same level where you’re initializing the ajaxForm() instead.
Many thanks for the reply.
However, I don’t get what you’re saying " put that on the same level where you’re initializing the ajaxForm() instead"
can you show me in code?
Actually, just have a look at reply #7 or the fiddle… what I mean specifically is this though:
$('#upload-form form').ajaxForm({
url: '...',
beforeSend: function () {
$('.loading_msg').show()
// You're adding a new event listener here
// each time beforeSend() is getting called
$('.loading_msg').click(function () {
return true
})
}
})
You should however just add a listener once initially, by pulling it out of the beforeSend() callback and putting it next to the ajaxForm() initialization:
This way it also becomes clearer that returning true from the click handler stands in no relation to the return value of the beforeSend() callback… you might however submit the form at this point like so:
The first one proceeds with submitting, but only shows the message for about 1 second.
The second one proceeds with submitting, but doesn’t show the message at all.
No neither. You’re still binding event listeners inside the beforeSend() callback (which you probably don’t need at all); and the first snippet is missing the click event listener for the submit button altogether.
Try just the last snippet from my previous reply, does that work for you regarding the message logic?
No, there is no beforeSend() in that last snippet I was referring to. Here it is again, if you use only that very code, is the message part working? And if it’s not, where does does it not behave as expected?