javascript - Cleaning up a form from a remote modal -
i triggering remote modal this:
<li><a data-toggle="modal" href="/login" data-target="#modal">sign in</a></li> i build 'route' variable on javascript, , load modal:
$('#modal').modal({ show: true, remote: route }); ... route variable depending on value, tells me fetch data from.
these pages loading part contain forms sign in, user registration, etc... load successfully.
the problem arises when try close window , open again. form not cleared. means, if tried login , login failed , error messages shown, appear when click on sign in button again.
for example, login html loaded contains following:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <%= csrf_meta_tags %> <title>sign in chocolatechix</title> </head> <body> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <%= form_for @user_session, url: user_session_path, method: :post, html: { class: 'form-horizontal', role: 'form' } |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 form $('form').submit(function(event) { // form data // there many ways data using jquery (you can use 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 form $.ajax({ type : 'post', // define type of http verb want use (post our form) url : '/user_session', // url want post data : formdata, // our data object datatype : 'json', // type of data expect 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 form submitting normal way , refreshing page event.preventdefault(); }); }); </script> </body> </html> so in case, error messages keep showing.
any ideas?
edit: i'm thinking trying invoke hide event , try clean there might work. (see bind function twitter bootstrap modal close)
i trying call event way:
$('#modal').modal({ show: true }); $('#modal').on('hidden.bs.modal', function () { alert('foo'); }); ... not triggered.
ideas?
edit 2: yet attempt:
$(document).on('hide.bs.modal','#modal', function () { alert('foo'); }).modal({ show: true, remote: route; }); the alert not fire.
you can this
<li><a data-toggle="modal" href="/login" onclick="test()">sign in</a></li> function test(){ $("#formid")[0].reset(); $('#modal').modal({ show: true }); }
Comments
Post a Comment