清空 div 的先前内容，以便使用 ajax 替换为另一个内容

Question

在我看来，我必须根据用户的状态恢复用户。（这是一个树枝视图，我在一个 symfony 项目上工作，但这里的后端进程已经构建）

该视图包含 3 个按钮（正好是标签）和一个 table。事实上，这就像创建一个过滤器，以便在 table 中显示用户的状态。

可能有 3 种状态：

等待验证=> pending_validation
启用
已禁用

这是我在 html 视图中的代码：

{# the div containing the menu  #}
<div>
  <ul class="nav navbar-nav navbar-right nav nav-pills link-right">
    <li class="active getState" id="enabled">
      <a href="#enabled">
        <b>User enabled</b>
      </a>
    </li>
    <li class="getState" id="disabled">
      <a href="#disabled">
        <b>User disabled</b>
      </a>
    </li>
    <li class="getState" id="pending_validation">
      <a href="#pending_validation">
        <b>User attempting validation</b>
      </a>
    </li>
  </ul>
</div>

{# the div containing the table of user #}
<div id="userInfo">
  {% if (users|length == 0) %}
    <p> <i>No users are availabled for the choosen statement you click on !</i></p>
  {% else %}
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>
          USERS
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div>
            <table class="table table-striped">
              <tbody>
                {% for user in users %}
                <tr>
                  <td>
                    <b>{{ user.id }}</b>
                  </td>
                  <td>
                    <b>{{ user.username }}</b>
                  </td>
                  <td>
                    <b>{{ user.email }}</b>
                  </td>
                  <td>
                    {{ user.created_at|date}}
                  </td>
                  <td>
                  </td>
                  <td>
                    <a href="{{path('edit', { 'slug': user.slug })}}">
                      <button>
                        EDIT
                      </button>
                    </a>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

因此，正如您所理解的，当管理员单击按钮时，我必须使用 jQuery 在 Javascript 中以正确的状态显示正确的用户 table。

我在 javascript 中使用 jquery 编写了这段代码：

<script type="text/javascript" charset="utf-8" defer>
  $('.getState').bind('click', function(){
    var userInfoDiv = $('#userInfo');
    $('.active').removeClass("active");
    $(this).addClass("active");
    $.ajax({
        type: "GET",
        cache: false,
        url: "{{ path('index_user_admin') }}",
        data: {
          state: $(this).attr("id")
        },
        success: function(html){
          userInfoDiv.html('');
          var newuserInfoDiv = $(html).find('#userInfo');
          userInfoDiv.replaceWith(newuserInfoDiv);
          userInfoDiv = newuserInfoDiv;
        }
    });
  });
</script>

如您所知，我的 ajax 请求的 url 参数是 url: "{{ path('index_user_admin') }}" 并返回包含 div 菜单的整个 html 视图和table.

ajax请求正常，我恢复了我的用户信息。除了发生了一件事，我真的不知道如何解决这个问题。

一旦我点击一个按钮，它就会加载并显示我的用户数据，但它会添加它而不是删除我想要替换为我点击时调用的新数据的实际数据。

我想在这里做的是用我点击按钮时调用的新内容替换实际内容。现在，我必须删除我以前的数据才能被新用户信息替换，事实并非如此，实际上没有删除任何数据，只是在以前的数据上添加了新数据。

Answer 1

我找到了解决方案，看来我在 ajax 调用中犯了一个新手错误。

事实上，在我的 ajax 请求中，我用 userInfoDiv.append(newuserInfoDiv); 替换了这个 userInfoDiv.replaceWith(newuserInfoDiv);，一切正常。

清空 div 的先前内容，以便使用 ajax 替换为另一个内容

empty the previous content of a div in order to replace with another one using ajax

javascript

ajax

jquery

append

replacewith