通过 jquery get 函数获取 html 文件。姜戈

Question

在我的 django 应用程序中，我显示用户 facebook 好友列表。为了每 10 分钟刷新一次，我把这个列表放在另一个视图和 html 中，并使用 get 请求来获取它并显示在我不想显示的页面上。

这是我的朋友列表的 get_fb_friends.html 文件：（这是我与我创建的视图相关联的 html 文件。这是我不想在我显示的页面上显示的列表的地方用户）：

   {% for friend in group %}
    <li>{{ friend.name }} </li>
   {% endfor %}

以及我如何在模板中导入它：（这是我不想为用户显示列表的页面）。

JS:
     setInterval(function(){
        $.get('/mysite/get_fb_friends/', function(data) {
        $('.get_fb_friends').html(data);
    });
    }, 600000);

    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

   $(function() {
   $('#searchbox').on('keyup', function() {
    var w = $(this).val();
   if (w) {
    $('#friendlist li').hide();
    $('#friendlist li:Contains('+w+')').show();
  } else {
    $('#friendlist li').show();                  
 }
 });
 });



 HTML:

     <div class='get_fb_friends'> </div>

然后，我不想在此列表顶部包含搜索栏，以便用户能够搜索他想要的朋友。所以在我的 get_fb_friends.html 中，我添加了：

  HTML:
    <input id="searchbox" type="text" placeholder="Search" />    
    <ul id="friendlist">
    {% for friend in group %}
    <li>{{ friend.name }} </li>
    {% endfor %}

如果我在页面 www.mysite/get_fb_friends 上使用此搜索栏，它会完美运行，但一旦通过 jquery get 请求（即在我不想为用户显示它的页面上）获得它就不再适用；我输入一个字母，所有的名字都消失了。

看起来当我通过 jquery get 函数获取 html 文件时，它没有在我的 jquery 函数中保留我需要的“li”。

知道发生了什么吗？

希望我的问题很清楚，谢谢你的帮助。

编辑：

我的主页：

 HTML:
 <div class="friendlist" id="friendlist"> 


 JS:

 $.get('/mysite/get_fb_friends/', function(data) {
    $('.friendlist').html($(data).find($('#friendlist').html()));
    });

 return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

   $(function() {
    $('#searchbox').on('keyup', function() {
      var w = $(this).val();
       if (w) {
        $('#friendlist li').hide();
        $('#friendlist li:Contains('+w+')').show();
      } else {
        $('#friendlist li').show();                  
     }
     });
     });

我的远程页面：

 HTML:
 <input id="searchbox" type="text" placeholder="Search" />    
 <ul id="friendlist" class="friendlist">

  {% for friend in group %}
    <li>{{ friend.name }}</li>
  {% endfor %}

Answer 1

我相信您真的只想更新列表内容，而不是每次刷新都替换 input 和完整列表本身。

在这种情况下，您希望所有 JS 在主页中，将远程文件的输出更改为简单地发送回 LI 标签并将它们插入新目标 friendlist。此插入可以是完全替换，或仅附加新找到的名称。不确定您的应用打算如何处理这方面的问题

如果用户正在对输入进行任何过滤，您还可以添加一个标志以不进行 ajax 调用。

标志可能类似于

$('#searchbox').on('focus blur', function(){
   $(this).toggleClass('active')
})

然后在setInterval

setInterval(function(){
        if( ! $('#searchbox').hasClass('filter') ){
            $('#friendlist').load('/mysite/get_fb_friends/')
       }
    }, 600000);