Help on closing message box and sending – JavaScript – SitePoint Forums

Thanks for all previous help.

I’m trying to add something to this JS to get the submission form working fine:

  $('#upload-form form').ajaxForm({
url: '{{LINK aj/ffmpeg-submit}}?hash=" + $(".main_session').val(),
beforeSend: function() {
$('#submit-btn').attr('disabled', true);
$('#submit-btn').val("{{LANG please_wait}}");
}, success: function(data) {
if (data.status == 200) {
window.location.href = data.link;
}

To get the message to display before the form is submitted, I added:

$(".loading_msg").show();

Put it in the beforeSend: function like this:

  beforeSend: function() {
 $('#submit-btn').attr('disabled', true);
 $('#submit-btn').val("{{LANG please_wait}}");
$(".loading_msg").show();
return false;

The message is displayed normally. But I can’t close the message box and proceed to send. I have this (without success):

<div class="loading_msg" style="display:none"> MESSAGE!! <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> </div>

this:

   $('#upload-form form').ajaxForm({
      url: '{{LINK aj/ffmpeg-submit}}?hash=" + $(".main_session').val(),
      beforeSend: function() {
         $('#submit-btn').attr('disabled', true);
         $('#submit-btn').val("{{LANG please_wait}}");
$(".loading_msg").show();
return false;
$('loading_msg').click(function () {
  return true;
});
 },
 },

We appreciate your guidance to submit the form when the message box is closed.

Hi @ChrisjChrisj, so loading_msg Can’t use Is it actually a confirmation message before starting the upload? beforeSend() Then hook. This can (AFAICT) only be used to preprocess data synchronously, it does not wait for events.In any case go back true From loading message, click listener does nothing (may just return) false I think it’s useless here to prevent that click event default). instead of,

• Add a click listener to the loading message. submit() form
• Add a click listener to the form’s submit button (or a submit listener to the form itself).
  – prevent default events,
  – display a message that clicking will actually submit the form

HTH

Thank you for your reply.
“about, loading_msg Is it really a confirmation message before starting the upload?”, but this is just an informational message.

As for your kind suggestion, something like this?

$(".loading_msg").show();
$(".loading_msg").addEventListener("click");
$('#submit-btn').addEventListener("click");

We are waiting for your comments

oh then don’t go back false from beforeSend() Hooks and AJAX submissions should start immediately after displaying a message, whether the user clicks on it or not.

thanks again. Yes, I tested only with:

$(".loading_msg").show();

It’s true that “the AJAX submission should start immediately after displaying the message”, but it is displayed too quickly to send and you don’t have time to read the message.
So that’s why I added:

return false;

Stop sending and allow messages to be read. I’m sure there are better solutions.
Any additional help is welcome.

Why are you submitting the form? AJAX Action, do you want to close the form on the page? You don’t need to close the loading message other than pressing a button, right?

So the user has to click the message before the form is submitted? I would have understood this as a confirmation message… ^^ Anyway, this should do the trick:

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()
})

“Should the user first click on the message before the form is submitted?”
No
“This is a confirmation message”
No
This is an informational message

I’ve tried to integrate your code into the existing code, but without success.
Any additional guidance welcome

I’m still trying to figure out where the whole idea of ​​closing messages came from.

You say it’s “too fast” to close, but it shouldn’t close at all unless you click something and you’ve wired something else to refresh/reload the page or its content.

EDIT: Wow, I can read. Success part of ajax request change the href of the pageYeah, it’s going to do it.

In any case, let’s focus on the logic now. So should the user click on the message before her AJAX form submission takes place?Here is the fiddle for the above code: This is for the general approach, but you can fork and update with the non-working code:

Completely missed it! ^^ So why use AJAX to submit a form in the first place?

Thanks for all the replies. I’ve tried to integrate the JSfiddle code into mine without success.
Any other suggestions would be appreciated.
My code in the original post stops sending so I can read the message. How can I stop sending when the reader closes the message?

 $('#submit-btn').attr('disabled', true);
 $('#submit-btn').val("{{LANG please_wait}}");
$(".loading_msg").show();
return false;

I have tried these without success:

$(".loading_msg").show();
return false;
$(".loading_msg").click(function () {
return true;
});

$(".loading_msg").show();
e.preventDefault();
$(".loading_msg").click(function () {
$(this).trigger('submit-btn');
});

However, you can programmatically submit the form later (see my code).

Again, this does nothing.you are coming back true from .loading_msg The click handler does nothing, especially beforeSend() handler.

of trigger() The method takes an event name as an argument, not a selector. Do you mean this?

$('#submit-btn').trigger('click')

Also, don’t bind .loading_msg click handler in beforeSend() This is because another event listener is added for each attempt to submit the form.put it at the same level where you initialize it ajaxForm() instead.

thank you for your reply.
However, I don’t understand what you’re saying” put it on the same level as you initialize ajaxForm() Instead of “
can you show it in code?

Actually, see Reply #7 or the fiddle… specifically I mean:

$('#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
    })
  }
})

However, by pulling the listener out of the beforeSend() callback, ajaxForm() Initialize:

$('#upload-form form').ajaxForm({
  url: '...',
  beforeSend: function () {
    $('.loading_msg').show()
  }
})

$('.loading_msg').click(function () {
  return true
})

This way it will also be clear to return true It has nothing to do with the return value from the click handler beforeSend() callback… but at this point you can submit the form like this:

$('.loading_msg').click(function () {
  $('#upload-form form').submit()
})

However, this causes the message to appear again. beforeSend() needle:

$('#upload-form form').ajaxForm({
  url: '...'
})

$('#submit-btn').click(function (event) {
  event.preventDefault()
  $('.loading_msg').show()
})

$('.loading_msg').click(function () {
  $('#upload-form form').submit()
})

Thank you very much.

If I’m reading you right, you’re either saying:

  $('#upload-form form').ajaxForm({
      url: '......,
      beforeSend: function() {
         $('#submit-btn').attr('disabled', true);
         $('#submit-btn').val("{{LANG please_wait}}");
    $('.loading_msg').show()
   $('.loading_msg').click(function () {
    return true
});

or this:

   $('#upload-form form').ajaxForm({
      url: '........,
      beforeSend: function() {
         $('#submit-btn').attr('disabled', true);
         $('#submit-btn').val("{{LANG please_wait}}");
$('#submit-btn').click(function (event) {
  event.preventDefault()
  $('.loading_msg').show()
})

$('.loading_msg').click(function () {
  $('#upload-form form').submit()
})

The first one continues to send, but the message is only displayed for about a second.
The second will continue to send, but no message will be displayed at all.

Any additional comments are welcome.

No, neither.you still have the event listener beforeSend() Callbacks (probably not needed at all); The first snippet doesn’t have any submit button click event listeners.

Try just the last snippet from my previous reply. As far as message logic is concerned, how is it going?

Thank you for your reply.

If you mean this:

         $('#submit-btn').click(function (event) {
   	    event.preventDefault()
   	    $('.loading_msg').show()
   	  });

   	  $('.loading_msg').click(function () {
   	    $('#upload-form form').submit()
});

   $('#upload-form form').ajaxForm({
      url: '{{LINK aj/ffmpeg-submit}}?hash=" + $(".main_session').val(),

      beforeSend: function() {
etc...

It didn’t work.

Any other help would be appreciated.

No, there is not beforeSend() In the last snippet I was referring to.If you use it, it’s here again that’s all Is that very code, the message part, working? If not, where is it not working as expected?

$('#upload-form form').ajaxForm({
  url: '...'
})

$('#submit-btn').click(function (event) {
  event.preventDefault()
  $('.loading_msg').show()
})

$('.loading_msg').click(function () {
  $('#upload-form form').submit()
})

thanks again.

This code:

   $('#upload-form form').ajaxForm({
      url: '{{LINK aj/ffmpeg-submit}}?hash=" + $(".main_session').val()
});

$('#submit-btn').click(function (event) {
  event.preventDefault()
  $('.loading_msg').show()
})

$('.loading_msg').click(function () {
  $('#upload-form form').submit()
})

Disallow access to form pages