data-toggle breaks after form submit

Question

У меня есть форма в моем веб-приложении, которое отображается через переключение данных. Я изменяю поведение события отправки, потому что хочу отправить данные без перезагрузки страницы. Я могу отправить форму успешно, и тумблеры сбрасываются, как ожидалось, но потом я больше не могу свернуть форму, чтобы использовать ее снова. Что я делаю не так?

Вот как я управляю Добавить событие

$('form').submit(function(event){ 
    //event.preventDefault(); 
    console.log('submit ' + $("input[name=personName]").val()); 
    //console.log('submit ' + $('#personName').val()); 
    //socket.emit('add', $('#personName').val()); 
    socket.emit('add', $("input[name=personName]").val()); 
    //$('#personName').val(''); 
    $("input[name=personName]").val(''); 
    //$("#add-person-panel").toggle(); 
    $("div[id=add-person-panel]").toggle(); 
    $("div[id=add-person-panel]").addBack('aria-expanded','false'); 
    //$("input[name=personName]").toggle(); 
    //$('#add-person-panel').attr('aria-expanded',''); 
    //socket.emit('add', $('input[name=personName]')); 

    //$('input[name=personName]').val(""); 

    return false; //do not let the page refresh on submit 

}); 

образуют

<div class="panel panel-default"> 
     <div class="panel-heading"> 
     <% 
     if (hasKioskPermissions === true || hasDigmaKioskPermissions === true){ %> 
      <a data-toggle="collapse" href="#add-person-panel" class="collapsed"> 
      "Add Person To Local Queue" 
      ::after 
      </a> 
     <% } else { %> 
      <a data-toggle="collapse disabled" href="#add-person-panel" class="collapsed"> 
      "Add Person To Local Queue" 
      ::after 
      </a> 
     <%}%> 
     </div> 
     <div id="add-person-panel" class="panel-body collapse"> 
     <form data-parsley-validate="" class="form-horizontal"> 
      <div class="form-group"> 
      <div class="col-sm-5 col-xs-8"> 
       <input name="personName" type="text" maxlength="40" placeholder="Enter name" required class="form-control" autocomplete="off"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <div class="col-sm-12"> 
       <button type="submit" data-loading-text="Adding..." class="btn btn-lg btn-block btn-primary">Add</button> 
      </div> 
      </div> 
     </form> 
     </div> 
    </div> 

Answer 1

1. Использование $('div#add-person-panel') вместо $("div[id=add-person-panel]").

2. Что такое тип шаблона? Это не простой html. В коде есть <% %>.

3. Вы пытаетесь использовать серверные сокеты в браузере (socket.emit(...))?

UPD

ли вы инициализировать сокет перед использованием?

Существует пример из docs:

<script src="/socket.io/socket.io.js"></script> 
<script> 
var socket = io('http://localhost'); 
socket.on('news', function (data) { 
    console.log(data); 
    socket.emit('my other event', { my: 'data' }); }); 
</script> 

Answer 2

Проблема заключалась в том, что я не использовал один и тот же плагин (от начальной загрузки), чтобы закрыть как я сделал с открытым. Это необходимо, так как плагин отслеживает его собственное состояние.

перед:

$ ('DIV # надстройки людей-панель') переключение();.

после:

$ ('# ДИВОЙ надстройки людей-панели') коллапса ('скрыть');.

минимальное решение ниже:

$('form').submit(function(event){ 
    event.preventDefault(); 
    console.log('submit ' + $("input[name=personName]").val()); 




    $("input[name=personName]").val(''); 

    $('div#add-person-panel').collapse('hide'); 
    $('div#add-person-panel').addBack('aria-expanded','false'); 

    return false; //do not let the page refresh on submit 

});