0

ok, ive searched on here for days and none of the answers I have found have worked for me :/ I am using Twitter bootstrap modal to pop up a form, this form uses ajax and submits to Thank you.

The problem is, I have several links that link to the same modal, and when it submits the first time, the same thank you page keeps coming up when i click on other links.

I want it to refresh and show the form again everytime the close button is clicked or a new link is clicked.

Heres an example of my links

<a data-toggle="modal" class="workspace" title="workspace-brochure" href="#myModal">Download Brochure</a>

<a data-toggle="modal" class="byodbtn" title="byod-whitepaper" href="#myModal">BYOD</a>

and here is my modal

 <div class="modal hide fade workspace-brochure" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">

{sn-english-form-workspace}

  </div>
</div>

I have tried tons of replies I see on here to other people and nothing works for me :(

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Shonna Edwards Martell
  • 39
  • 1
  • 11

1 Answers1

0

Both Bootstrap 2.3.2 and 3 trigger events upon a modal's being hidden.

$('#myModal').on('hidden', function () {
  // do something…
})

I recommend using these events to check if your "Thank You" is displayed, and, if so, hide it upon your modal's closure. This will allow your modal to appear new upon being opened once more.

2.3.2 Documentation

3.0.0 Documentation

Ryan Miller
  • 1,053
  • 9
  • 22
  • maybe when the close button is clicked, the page reloads? I am not sure if that would be annoying to a user though :/ – Shonna Edwards Martell Oct 11 '13 at 17:14
  • You shouldn't need to reload your window. I assume that the "Thank You" message is a hidden
    that you show upon a successful AJAX call?
     – Ryan Miller Oct 11 '13 at 17:15
  • Perfect - that's where this event comes in handy. Essentially, it will trigger when your user closes the modal, and at that point, you can write a short jQuery function to .hide(), or add display:none to, the
    that contains the thank you message. Next time your user opens the modal, the thank you message will be gone.
     – Ryan Miller Oct 11 '13 at 17:20
  • ok close. I tried that, when i close the modal, it hides the result div, and shows the form div, but the form is still filled out :/ – Shonna Edwards Martell Oct 11 '13 at 17:36
  • That's a simple fix - use the Form.reset() method. [Documentation](http://www.w3schools.com/jsref/met_form_reset.asp). – Ryan Miller Oct 11 '13 at 17:41
  • Tried it, it resets the form fields (Great!), but when i try to submit again, it takes me to the Thank you div and sends message successfully, but then redirect me to the form after 2 seconds instead of staying on the thank you message :/ You are the closest Ive gotten to this working! lol.. but i'm still having issues – Shonna Edwards Martell Oct 11 '13 at 18:01
  • Forms automatically refresh the page upon submission. You can prevent this from happening by adding onsubmit="return false" to your form tag, such as is mentioned [by this question](http://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted). You can bind an event listener to your submit button that then triggers the AJAX submission manually. You are using $.ajax, correct? Not simply FORM post? – Ryan Miller Oct 11 '13 at 18:05
  • Then onsubmit="return false" should solve the refresh issue. Taken together, the process goes as such: – Ryan Miller Oct 11 '13 at 20:15
  • 1) User completes form. 2) User submits form. 3) Form is prevented from refreshing via onsubmit="return false". 4) Data is sent to server via AJAX. 5) On success, "Thank You" screen is shown. 6) On modal close, the "Thank You" screen is set to hidden and the form values are reset. And so on, repeating. – Ryan Miller Oct 11 '13 at 20:16
  • still doing it for some reason, this form is going to be the death of me :/ lol ill still mark your answer as accepted because you have helped a great deal. If you come up anything else let me know, i may just have to go to reloading the page – Shonna Edwards Martell Oct 11 '13 at 20:27
  • its like its resetting the form itself just fine, but the action that i pressed the submit button already still exist – Shonna Edwards Martell Oct 11 '13 at 20:35
  • You can add the onsubmit="return false" attribute to the submit button as well - perhaps that will help! – Ryan Miller Oct 11 '13 at 20:36
  • Well dang it! If possible, put your code into a JSFiddle - that would make it much easier to visualize your problem. – Ryan Miller Oct 11 '13 at 20:58