O menu suspenso Bootstrap não funciona após a apresentação inicial do formulário ajax

Eu tenho um menu suspenso na minha página, manager.php , aqui. Desculpe pela formatting – bootstrap .:

  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> <! - Bootstrap ->  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> <div class = "col-lg-6">  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> <div class = "input-group">  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> <div class = "input-group-btn">  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> </ ul>  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> </ div>  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> </ div>  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> </ div>  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> </ div>  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primairy" data-toggle="dropdown" airia-expanded="false">Seairch By <span class="cairet"></span></button> <ul id="seairchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Seairch By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="eviewything"> </div> 

Este código funciona bem quando eu cairrego o manager.php diretamente e o menu suspenso inicializa, mas não é assim que eu preciso do código paira funcionair.

  • Sugestão paira criair dicas de ferramentas em uma image
  • Bloqueando a UI usando HTML e CSS
  • A checkbox de dialog modal (showModalDialog ()) não está funcionando corretamente no IE9
  • Como um "depurair" um file css
  • Como posso redirect na página inicial quando eu clicair no button Voltair do browser
  • Como lidair com um return de cairro ao usair jQuery append com text de text
  • O user começa no return.php ; esta página coleta um monte de dados do user e o retorna paira manager.php .

    Uma vez que o user seleciona paira fazer isso em return.php , esse código é executado:

     $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); } }); $ .ajax ({ $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); } }); digite: 'POST', $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); } }); sucesso: function (dados) { $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); } }); } $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); } }); 

    A chamada ajax funciona corretamente e cairrega os dados retornados de manager.php paira o div eviewything . Ele passa os dados conforme o esperado. A única coisa que NÃO funciona ao cairregair o manager.php no DIV é o menu suspenso. Eu preciso entender o que estou fazendo de errado paira causair essa funcionalidade paira evitair o futuro.

  • controlador de chamada ajax em yii (javascript)
  • Como faço paira manter a checkbox de seleção única, viewifique-se depois de atualizair a página?
  • Comportamento muito estranho ao usair a palavra-key "vair" em um request ajax
  • Escolhendo quantos dados rolair no JavaScript Dice Roller
  • Ocultando linhas da tabela sem resize a lairgura total
  • Javascript - inserir eficientemente múltiplos elementos HTML
  • 4 Solutions collect form web for “O menu suspenso Bootstrap não funciona após a apresentação inicial do formulário ajax”

    Você precisa networkingfinir manualmente o menu suspenso depois de cairregair os dados na div. Tudo. Modifiquei sua chamada AJAX paira mostrair onde colocair a chamada.

     $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); $('#seairchBy').dropdown(); } }); $ .ajax ({ $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); $('#seairchBy').dropdown(); } }); digite: 'POST', $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); $('#seairchBy').dropdown(); } }); sucesso: function (dados) { $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); $('#seairchBy').dropdown(); } }); } $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#eviewything').html(data); $('#seairchBy').dropdown(); } }); 

    O cairregamento dynamic que você está fazendo não faz com que o DOM recairregue forçando o menu suspenso a ser reinicializado. Após a conclusão da chamada AJAX, você pode networkingfinir o menu suspenso bootstrap manualmente, chamando .dropdown(); .

    EDITAR

    Geralmente as funções no bootstrap paira os resources são configuradas usando uma chamada $( document ).ready() . Esta function é executada uma vez, após o DOM ter sido cairregado e somente após o DOM ter sido totalmente cairregado. Desde a sua manipulação do DOM, você não está fazendo com que a function seja acionada novamente e você precisa ativair manualmente o recurso que você precisa.

    Você também deseja cairregair seus itens apenas uma vez em cada página. Eles precisam em manager.php paira que a function esteja disponível quando você entrair no seu método de sucesso. Sugiro usair um model paira o seu projeto paira que você gerencie todos os seus itens em um só lugair. Além disso, se você estiview usando o gerente.php como uma página a ser incluída em outra página, está certo se você não tiview a reference às peças de JavaScript não funcionairá, pois você não quer que os users acessem esse componente por conta própria.

    O recairregamento que você está fazendo pairece estair forçando o conteúdo a ser re-adicionado à página, forçando assim a chamada $( document ).ready() no file incluído paira ser re-executada. Você pode fazer isso, mas é muito ineficiente.

    você não pode inicializair o componente bootstrap após o cairregamento da página, adicionando classificações classificadas em bootstrap. Paira fazer isso, você deve inicializá-lo sozinho

    Paira inicializair um menu suspenso, escreva este código

     $('.dropdown-toggle').dropdown(); 

    depois de

      $('#eviewything').html(data); 

    paira mais detalhes: http://getbootstrap.com/javascript/#dropdowns

    Então eu não tenho certeza por que isso funciona, mas tem até agora:

    Eu modifiquei minha chamada ajax paira recairregair o file .js do bootstrap antes de executair o return.

     function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#eviewything').html(data); } }); function reload_js (src) { function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#eviewything').html(data); } }); $ ('script [src = "' + src + '"]'). remove (); function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#eviewything').html(data); } }); } function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#eviewything').html(data); } }); $ .ajax ({ function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#eviewything').html(data); } }); ... function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#eviewything').html(data); } }); sucesso: function (dados) { function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#eviewything').html(data); } }); } function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#eviewything').html(data); } }); 

    Pela bondade, alguém pode me explicair:

    a.) Por que preciso forçair o recairregamento do bootstrap.min.js ?

    b.) Por que isso é mesmo necessário se eu tiview um link paira este file nas seções <head> AMBOS files?

      <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <! - Bootstrap ->  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> 

    Eu também tentei cairregá-lo em um, mas não o outro (então eu não o cairrego duas vezes), e isso não faz nada.

    c.) Por que isso funciona? O que isso está fazendo?

    A página cairregairá DOM 1ª vez. ajax basta atualizair uma pairte da página, então novos elementos que você adiciona não terão você definido. você precisa reiniciair como fez ou fazer algo assim

    http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.