Cleaning up a form from a remote modal

Question

I am triggering a remote modal like this:

        <li><a data-toggle="modal" href="/login" data-target="#modal">Sign in</a></li>

I build the 'route' variable on Javascript, and then load the Modal:

$('#modal').modal({
  show: true,
  remote: route
});

... where route is a variable that depending on its value, tells me where to fetch the data from.

These pages I am loading for the most part contain forms for sign in, user registration, etc... They load successfully.

The problem arises when I try to close this window and open it up again. The form is not cleared. This means, if I tried to login and the login failed and error messages were shown, they will appear when I click on the sign in button again.

For this example, the login HTML that is loaded contains the following:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <%= csrf_meta_tags %>    
    <title>Sign in to Chocolatechix</title>  
  </head>

  <body>
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div> 

    <%= form_for @user_session, url: user_session_path, method: :post, html: { class: 'form-horizontal', role: 'form' } do |f| %>  

    <div class="modal-body">
        <div class="row lower-space">
          <div class="col-xs-10 col-xs-offset-1">
            <%= f.text_field :email, class: 'form-control email_field', placeholder: 'E-mail Address' %>
          </div>
        </div>

        <div class="row lower-space">
          <div class="col-xs-10 col-xs-offset-1">
            <%= f.password_field :password, class: 'form-control password_field', placeholder: 'Password' %>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-10 col-xs-offset-1">
            <%= f.submit 'Sign In', class: 'btn btn-primary full-width' %>
          </div>
        </div>

        <div class="row lowest-space">
          <div class="col-xs-10 col-xs-offset-1">
            <a href="#">Forgot password?</a>
          </div>
        </div>

        <div class='row'>
          <div class="col-xs-4 col-xs-offset-1 center new-text bold">
            New user? 
          </div>

          <div class="col-xs-4 col-xs-offset-1 center">
            <a class="btn btn-success" href="/become">Create account</a> 
          </div>          
        </div>    

        <div class="row">
          <div class="col-xs-12" id="error_messages">

          </div>
        </div>            
    </div>


    <div class="modal-footer">      
    </div>      <!-- /modal-footer -->
    <% end %>

    <script type="text/javascript">
    $( document ).ready(function(){
      // process the form
    $('form').submit(function(event) {

        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'user_session[email]'      : $('.email_field').val(),
            'user_session[password]'   : $('.password_field').val(), 
            'authenticity_token': $('input[name=authenticity_token]').val(), 
            'utf8': $('input[name=utf8]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : '/user_session', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
                        encode          : true
        }).done(function(data) {
                console.log(data);
                if(!data.logged_in){
                  $('#error_messages').html('<span class="label label-danger">' + data.error+ '</span>');
                }
                else {
                  window.location.replace("/");
                }
            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
      });    
    });
    </script>
  </body>
</html>

So in this case, the error messages keep showing.

Any ideas?

Edit: So I'm thinking that trying to invoke a hide event and try to clean it up from there might work. (See Bind a function to Twitter Bootstrap Modal Close)

I am trying to call this event this way:

  $('#modal').modal({
    show: true
  });
  $('#modal').on('hidden.bs.modal', function () {
      alert('Foo');
  });

... but this is not triggered.

Ideas?

Edit 2: Yet another attempt:

     $(document).on('hide.bs.modal','#modal', function () {          
    alert('Foo');
  }).modal({
    show: true, 
    remote: route;
  });

The alert does not fire.

please try and make a fiddle so that others can help you more! — Abhishek Ghosh, May 12 '15 at 05:26

score 0 · Accepted Answer · answered Jun 03 '15 at 06:27

0

you can do like this

<li><a data-toggle="modal" href="/login" onclick="test()">Sign in</a></li>

function test(){
$("#formid")[0].reset();
 $('#modal').modal({
    show: true
  });
}

answered Jun 03 '15 at 06:27

Karthick Kumar

2,349
1
17
30

Cleaning up a form from a remote modal

1 Answers1