Help with closing message box and submiting – JavaScript – SitePoint Forums

Thanks for all of the earlier assist.

I’m attempting so as to add one thing to this JS, for a efficiently working submit Kind:

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

to get a message to show earlier than the Kind submits, I added:

$(".loading_msg").present();

into the beforeSend: perform, like so:

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

and it efficiently shows the message. However can’t shut the message field after which proceed to submit. I’ve this (with out success):

<div class="loading_msg" model="show:none"> MESSAGE!! <span class="closebtn" onclick="this.parentElement.model.show='none';">&instances;</span> </div>

and this:

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

I stay up for any steering to have the shape submit upon closing the message field.

Hello @ChrisjChrisj, so the loading_msg would truly be a affirm message earlier than beginning the add? You may’t use the beforeSend() hook then, which (AFAICT) can solely be used for synchronously pre-processing the info and doesn’t anticipate occasions. In any case, returning true from the loading message click on listener will do nothing (you would possibly solely return false to forestall the default of that click on occasion, which might be of no use right here I suppose). So as an alternative, you’d must

• Add a click on listener to the loading message that may submit() the shape
• Add a click on listener to the shape’s submit button (or a submit listener to the shape itself) that may
  – Forestall the default occasion and
  – Present the message that, when clicked, would in flip truly submit the shape

HTH

Many thanks to your reply.
Concerning ” so the loading_msg would truly be a affirm message earlier than beginning the add?”, no it will merely be an informational message.

Concerning your sort strategies, one thing like this?

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

I stay up for your feedback

Ah, then simply don’t return false from the beforeSend() hook and the AJAX submit ought to begin proper after displaying the message, irrespective of if the person would click on that message or not.

Thanks once more. Sure, I’ve examined with simply the:

$(".loading_msg").present();

and it’s true that ” AJAX submit ought to begin proper after displaying the message”, nevertheless it reveals too shortly after which submits, no time to learn the message.
So, that’s why I added:

return false;

to cease the submit, to permit the message to be learn. I’m positive there’s a greater resolution.
Any extra help is welcomed.

Why would the shape submitting, which is an AJAX motion, shut a type on the web page? Nothing needs to be closing the loading message apart from a button push, proper?

Okay so the person first has to click on the message earlier than the shape is getting submitted? I’d have understood this as a affirm message… ^^ anyway, this could do the trick then:

const $uploadForm = $('#upload-form type')
const $loadingMsg = $('.loading_msg')
const $submitBtn = $('#submit-btn')

// AJAX type initialization
$uploadForm.ajaxForm(
  url: '?hash=one thing'
)

// Set off the shape submission
// when clicking the message
$loadingMsg.click on(() => 
  $uploadForm.submit()
)

// When clicking the submit button, present the
// message somewhat than submitting the shape
$submitBtn.click on(occasion => 
  occasion.preventDefault()
  $loadingMsg.present()
)

“the person first has to click on the message earlier than the shape is getting submitted?”
No
“this as a affirm message”
No
it’s an informational message

I attempted integrating your code into my current code, with out success.
Any additionla steering is welcomed

I’m nonetheless attempting to determine the place the entire concept of the message closing comes from.

You say it closes “too fast”, nevertheless it shouldnt be closing in any respect until you clicked on one thing, until you’ve wired one thing else to refresh/reload the web page or its contents.

EDIT: Wow, I can learn. The success portion of the ajax request modifications the web page’s href. Nicely, yeah, that’s going to do it.

Be it the way it could, let’s deal with the logic then. So the person ought to click on the message earlier than the AJAX type submit takes place? Right here’s a fiddle with the above code; it’s only for the final method, however you may fork and replace it together with your code that isn’t working:

Fully missed that! ^^ Then why ship the shape with AJAX within the first place?

Thanks once more for all of the replies. Tried integrating the JSfiddle code into mine with out success.
Another strategies are appreciated.
My code within the authentic posting stops the submission, so the message may be learn. How can the submission then be un-stopped upon the reader closing the message?

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

Tried these with out success:

$(".loading_msg").present();
return false;
$(".loading_msg").click on(perform () 
return true;
);

$(".loading_msg").present();
e.preventDefault();
$(".loading_msg").click on(perform () 
$(this).set off('submit-btn');
);

It might’t, you would possibly nonetheless submit the shape programmatically later (see my code).

Once more, this gained’t do something. You’re returning true from the .loading_msg click on handler, which does nothing and particularly has no impact to the beforeSend() handler.

The set off() methodology takes the occasion title as an argument, not the selector. Did you imply this?

$('#submit-btn').set off('click on')

Additionally don’t bind the .loading_msg click on handler contained in the beforeSend() handler, as this may add one other occasion listener every time there’s an try and submit the shape; put that on the identical stage the place you’re initializing the ajaxForm() as an alternative.

Many thanks for the reply.
Nevertheless, I don’t get what you’re saying ” put that on the identical stage the place you’re initializing the ajaxForm() as an alternative”
are you able to present me in code?

Truly, simply take a look at reply #7 or the fiddle… what I imply particularly is that this although:

$('#upload-form type').ajaxForm(
  url: '...',
  beforeSend: perform () 
    $('.loading_msg').present()
    // You are including a brand new occasion listener right here
    // every time beforeSend() is getting known as
    $('.loading_msg').click on(perform () 
      return true
    )
  
)

It is best to nonetheless simply add a listener as soon as initially, by pulling it out of the beforeSend() callback and placing it subsequent to the ajaxForm() initialization:

$('#upload-form type').ajaxForm(
  url: '...',
  beforeSend: perform () 
    $('.loading_msg').present()
  
)

$('.loading_msg').click on(perform () 
  return true
)

This fashion it additionally turns into clearer that returning true from the clicking handler stands in no relation to the return worth of the beforeSend() callback… you would possibly nonetheless submit the shape at this level like so:

$('.loading_msg').click on(perform () 
  $('#upload-form type').submit()
)

However this may once more trigger the message to be proven, add a click on listener to the submit button as an alternative of utilizing the beforeSend() hook:

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

$('#submit-btn').click on(perform (occasion) 
  occasion.preventDefault()
  $('.loading_msg').present()
)

$('.loading_msg').click on(perform () 
  $('#upload-form type').submit()
)

A lot thanks once more.

If I’m studying you proper you’re saying both this:

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

or this:

   $('#upload-form type').ajaxForm({
      url: '........,
      beforeSend: perform() {
         $('#submit-btn').attr('disabled', true);
         $('#submit-btn').val("LANG please_wait");
$('#submit-btn').click on(perform (occasion) 
  occasion.preventDefault()
  $('.loading_msg').present()
)

$('.loading_msg').click on(perform () 
  $('#upload-form type').submit()
)

The primary one proceeds with submitting, however solely reveals the message for about 1 second.
The second proceeds with submitting, however doesn’t present the message in any respect.

Any extra feedback are welcomed.

No neither. You’re nonetheless binding occasion listeners contained in the beforeSend() callback (which you in all probability don’t want in any respect); and the primary snippet is lacking the clicking occasion listener for the submit button altogether.

Strive simply the final snippet from my earlier reply, does that be just right for you concerning the message logic?

Thanks to your reply.

In the event you imply this:

         $('#submit-btn').click on(perform (occasion) 
   	    occasion.preventDefault()
   	    $('.loading_msg').present()
   	  );

   	  $('.loading_msg').click on(perform () 
   	    $('#upload-form type').submit()
);

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

      beforeSend: perform() {
and many others...

that didn’t work.

Another assistance is appreciated.

No, there is no such thing as a beforeSend() in that final snippet I used to be referring to. Right here it’s once more, when you use solely that very code, is the message half working? And if it’s not, the place does does it not behave as anticipated?

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

$('#submit-btn').click on(perform (occasion) 
  occasion.preventDefault()
  $('.loading_msg').present()
)

$('.loading_msg').click on(perform () 
  $('#upload-form type').submit()
)

Thanks once more.

This code:

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

$('#submit-btn').click on(perform (occasion) 
  occasion.preventDefault()
  $('.loading_msg').present()
)

$('.loading_msg').click on(perform () 
  $('#upload-form type').submit()
)

doesn’t enable for the Kind web page to be accessed