引导下拉最初的Ajax表单提交后不能正常工作 [英] Bootstrap dropdown not working after initial ajax form submission

问题描述

我有一个下拉我的网页上， manager.php ，在这里。很抱歉的格式 - 引导：

I have a dropdown on my page, manager.php, here. Sorry for the 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-primary" data-toggle="dropdown" aria-expanded="false">Search By <span class="caret"></span></button>
        <ul id="searchBy" class="dropdown-menu" role="menu">
          <li class="disabled"><a href="#">Search By...</a></li>
          <li><a href="#">cost</a></li>
          <li><a href="#">name</a></li>              
        </ul>
      </div>               
    </div>
  </div>
</div>

<div id="everything">
</div>

这code正常工作时，我打开 manager.php 直接并在下拉初始化，但是这不是我所需要的code工作。

This code works fine when I load manager.php directly and the dropdown initializes, but this is not how I need the code to work.

用户开始对 return.php ;这个页面收集来自用户的一组数据和返回的到 manager.php 。

The user begins on return.php; this page collects a bunch of data from the user and returns it to manager.php.

一旦用户选择这样做的 return.php ，这code运行时：

Once the user selects to do so on return.php, this code is run:

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

在Ajax调用工作正常，并加载从 manager.php 返回到家居 DIV的数据。它通过沿着数据符合市场预期。这并不在加载 manager.php 进入DIV工作的唯一的事情就是下拉。我需要了解我在做什么错误导致此功能，这样我就可以prevent做它的未来。

The ajax call works correctly, and it loads the data returned from manager.php into the everything div. It passes along the data as expected. The only thing that DOESN'T work upon loading manager.php into the DIV is the drop-down. I need to understand what I'm doing wrong to cause this functionality so I can prevent doing it in the future.

推荐答案

您需要手动重新设置下拉列表加载了数据到所有分区后。我已经修改了AJAX调用，以显示你在哪里，将通话。

You need to manually reset the dropdown after you've loaded the data into the everything div. I've modified your AJAX call to show you where to put the call.

$.ajax({
      type: 'POST',
      url: 'manager.php',      
      data: {number:number, location:location, project:project, comments:comments},        
        success:function(data){
          $('#everything').html(data);
          $('#searchBy').dropdown();
        }
  });

的动态加载你正在做不会引起DOM来重新加载迫使下拉重新初始化。你以后AJAX调用已完成，你可以再往下手动调用重新引导降 .dropdown（）;

修改

通常在引导的功能，功能设置使用 $（文件）。就绪（）通话。这个函数执行一次，以后的DOM已经加载，只有在DOM已经完全加载之后。因为你的操纵DOM，你不会导致再次触发功能，你需要手动触发你所需要的功能。

Generally functions in bootstrap for features are setup using a $( document ).ready() call. This function executes once, after the DOM has been loaded and only after the DOM has has been fully loaded. Since your manipulating the DOM, you are not causing the function to be triggered again, and you need to manually trigger the feature you need.

您还需要加载只包括一次在每一页上。他们需要在manager.php为使功能可用，当你进入你的成功方法。我建议使用的模板为您的项目让你管理你在一个地方所有包含。另外，如果要包含在另一页的使用manager.php作为一个页面，这没关系，如果你不具备参考JavaScript的作品将无法工作，因为你不希望用户访问它自己的那部分。

You also want to load your includes only once on each page. They need to on manager.php in order for the function be available when you go into your success method. I'd suggest using a template for your project so you manage all your includes in one place. Also, if your using manager.php as a page to be included in another page, it's okay if you don't have the reference to the JavaScript pieces won't work since you don't want users accessing that component on it's own.

你正在做的重载似乎迫使内容重新添加到页面中，从而迫使 $（文件）。就绪（）呼叫被重新执行包含的文件。你可以做到这一点，但它的效率非常低。

The reload you are doing appears to be forcing the content to be re-added to the page, thus forcing the $( document ).ready() call in the included file to be re-executed. You can do this, but it's very inefficient.

这篇关于引导下拉最初的Ajax表单提交后不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！