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

Stack Overflow用户

提问于 2012-11-11 16:02:22

回答 1查看 470关注 0票数 0

在我的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 %}

javascript

jquery

django

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-11-11 16:22:11

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

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

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

Flag可以是这样的

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

然后在setInterval中

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