1

I have a following problem.

I have a bootstrap modal with a form which I submit using jQuery. Upon sussesful Ajax I hide the form in the modal and append a message.

Now, when I close the modal and open it again I would like to have an empty form. Instead obviously I see the message. So I thought that I will use the bootstrap 'hidden.bs.modal' event to trigger the reoval of the message, showing the form and resetting it. The problem is that the event listener is never attached to the modal:

  Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
  //code starts
  $('#feedback-form').submit(function(e) {

    $('#feedback-form').hide().parent().append('<div id="loader" class="well well-lg" style="text-align:center"><h3 class="alert alert-info">Please wait ...</h3></div>');
    $.post("email_us.php",form.serialize(), function(data){
        $('#loader').replaceWith('<div id="loader1" class="well well-lg" style="text-align:center"><h3 class="alert alert-success">'+data+'</h3></div>');
        $('#feedbackModal').on('hidden.bs.modal', function (e) {
                        $('#loader1').remove();
                        $('#feedback-form').show().trigger('reset');
                    });
        });
    e.preventDefault();
    })
  }
}

I do not see any error in the console it simply seems that the 'hidden.bs.modal' event listener is not attached to the modal.

Interestingly. If I execute this part of th code in console:

$('#feedbackModal').on('hidden.bs.modal', function (e) {
                    $('#loader1').remove();
                    $('#feedback-form').show().trigger('reset');
});

and then

$('#feedbackModal').trigger('hidden.bs.modal')

the modal and form behave as intended.

Any has an idea how to solve this problem?

3

This isn't exactly a Drupal question :)

Why not simply clear the form data as soon as you get to the AJAX success point?

Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    //code starts
    $('#feedback-form').submit(function(e) {
      $('#feedback-form').hide().parent().append('<div id="loader" class="well well-lg" style="text-align:center"><h3 class="alert alert-info">Please wait ...</h3></div>');
      $.post("email_us.php",form.serialize(), function(data){
        $('#loader').replaceWith('<div id="loader1" class="well well-lg" style="text-align:center"><h3 class="alert alert-success">'+data+'</h3></div>');
        $('#feedback-form').trigger('reset');
      });
      e.preventDefault();
  })
}

As far as I can see, if you modify the code like this, it will:

  • hide the form in preparation to post (no change)
  • post, and wait for success (no change)
  • show the success message (no change)
  • clear the form immediately (modified)

Does this solve the problem, or have I misinterpreted what you need in a big way?


To answer the specific question, it's not clear to me what the problem might be, but I'm suspicious that it's caused by the on event handler being attached inside the $post function's success function. Maybe try moving it outside as shown below:

Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    //code starts
    $('#feedbackModal').on('hidden.bs.modal', function (e) {
      $('#loader1').remove();
      $('#feedback-form').show().trigger('reset');
    });
    $('#feedback-form').submit(function(e) {
      $('#feedback-form').hide().parent().append('<div id="loader" class="well well-lg" style="text-align:center"><h3 class="alert alert-info">Please wait ...</h3></div>');
      $.post("email_us.php",form.serialize(), function(data){
        $('#loader').replaceWith('<div id="loader1" class="well well-lg" style="text-align:center"><h3 class="alert alert-success">'+data+'</h3></div>');
      });
      e.preventDefault();
    })
  }
}
  • Of course you are right I could do that but it makes no sense from the user's point, I think. This is a feedback form and I am sure user would not like to submit another feedback immediately. I worked around it by reseting the modal before showing it. However, it is not the point. The point here is, that the event is not being attached or listened to in drupal site while exactly the same code does work without any problem on another page that is not powered by drupal. – kwicher Jun 28 '14 at 11:06
  • Back to the Drupal stuff in just a second: can you clarify what is is that would make no sense from the user's POV? In the code I suggested, the form is already hidden, and is simply reset in the $.post function's 'success' object. – bhotel Jun 28 '14 at 14:29
  • Modified answer above. – bhotel Jun 28 '14 at 14:50
  • I probably was not too clear. I have a modal DIV and in this DIV I have a form. The form is hidden and replaced by first message then it is submitted by AJAX. Upon the success the second massage replace the first one ==> during these operations the modal does not hide. Additionally upon AJAX successful form submition I wanted to bind the 'hidden.bs.modal' event to the modal, not the form, so that when it is triggered (user closes the modal) I could reset the content of this modal, namely remove the message and restore the form and reset it. I hope it clears things out. – kwicher Jun 28 '14 at 22:59
  • I don't have a specific answer for why the on event handler isn't firing. But I'd try it outside of the $.post function's success function. I've modified the code in the second part of my answer to show what I'd try. It's an event handler after all, so it can be added any time after the element exists in the DOM with no ill effects. – bhotel Jul 1 '14 at 9:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.