通过jquery get函数获取一个html文件。 Django的 [英] Getting an html file through a jquery get function. Django

问题描述

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

这里是我有朋友列表的get_fb_friends.html文件：（这是我创建的视图的html文件，这是我在我显示的页面上显示的列表对于用户）：

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

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

  JS：
 setInterval（function ）{
 $ .get（'/ mysite / get_fb_friends /'，function（data）{
 $（'。get_fb_friends'）。html（data）; 
}）; 
}，600000）; 
 
返回jQuery（a）.text（）。toUpperCase（）。indexOf（m [3] .toUpperCase（））> = 0; 
}; 
 
 $（function（）{
 $（'＃searchbox'）。on（'keyup'，function（）{
 var w = $（this） ）; 
 if（w）{
 $（'＃friendlist li'）。hide（）; 
 $（'＃friendlist li：Contains（'+ w +'）'） （）; 
} else {
 $（'＃friendlist li'）。show（）; 
} 
}）; 
}）; 
 
 
 
 HTML：
 
< div class ='get_fb_friends'> < / DIV> 
  

然后，我不会在此列表的顶部添加一个搜索栏，以便用户能够搜索他想要的朋友。所以在我的get_fb_friends.html中，我补充说：

  HTML：
< input id =searchboxtype = text占位符=搜索/> 
< ul id =friendlist> 
 {％for group in group％} 
< li> {{friend.name}}< / li> 
 {％endfor％} 
  

如果我在页面上使用这个搜索栏www.mysite / get_fb_friends，但是一旦得到jquery获取请求（即在我不会为用户显示的页面上），它们已经不再存在了;我键入一个字母，所有的名称都会消失。

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

任何想法发生什么？

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

编辑：

我的主页：

  HTML：
< div class =friendlistid =friendlist> 
 
 
 JS：
 
 $ .get（'/ mysite / get_fb_friends /'，function（data）{
 $（'。friendlist'） .html（$（data）.find（$（'＃friendlist'）。html（）））; 
}）; 
 
返回jQuery（a）.text（）。toUpperCase（）。indexOf（m [3] .toUpperCase（））> = 0; 
}; 
 
 $（function（）{
 $（'＃searchbox'）。on（'keyup'，function（）{
 var w = $（this） ）; 
 if（w）{
 $（'＃friendlist li'）。hide（）; 
 $（'＃friendlist li：Contains（'+ w +'）'） （）; 
} else {
 $（'＃friendlist li'）。show（）; 
} 
}）; 
}）; 
  

我的远程页面：

  HTML：
< input id =searchboxtype =textplaceholder =Search/> 
< ul id =friendlistclass =friendlist> 
 
 {％for group in group％} 
< li> {{friend.name}}< / li> 
 {％endfor％} 
  

解决方案

我相信你真的只想更新列表内容，而不是每次刷新时更换输入和完整列表。

在这种情况下，您需要主页中的所有JS，将远程文件的输出更改为简单地发回 LI 标签并将其插入新目标好友列表。此插入可能是完全替换，或只添加新的找到的名称。不确定您的应用程序是否打算在这方面工作

您还可以添加一个标志，不要使ajax调用是用户正在使用输入进行任何过滤。 / p>

标记可能是像

  $（'＃searchbox'） .on（'focus blur'，function（）{
 $（this）.toggleClass（'active'）
}）
  

然后在 setInterval

  setInterval（function（）{
 if（！$（'＃searchbox'）。hasClass（'filter'））{
 $（'＃friendlist'）load（'/ mysite / get_fb_friends /'）
} 
}，600000）; 
  

In my django app I display the user facebook friends list. In order to refresh it every 10 minutes, I put this list in an other view and html, and I used a get request to get it and display it on the page I wan't.

Here is the get_fb_friends.html file where I have the friends list: (this the html file I associated to a view I created. This is where I get the list I wan't to display on the page I show to the user):

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

And how I import it in my template: (this is the page where I wan't to display the list for the user).

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>

Then, I wan't to include a search bar on top of this list, in order the user to be able to search the friends he wants. So in my get_fb_friends.html, I added:

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

This search bar works perfectly if I use it on the page www.mysite/get_fb_friends, but not anymore once it's get by the jquery get request (i.e on the page where I wan't to display it for the user); I type one letter and all the names disappear.

It looks like when I get the html file through the jquery get function, it does not keep the 'li' I need in my jquery function.

Any idea on what is happening?

I hope my question is clear, thank you for your help.

EDIT:

My main page:

 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();                  
     }
     });
     });

My remote page:

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

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

解决方案

I believe you really only want to update the list content, and not replace the input and full list itself with every refresh.

In that case you would want all the JS in main page , change your output of remote file to simply sending back LI tags and inserting them into new target friendlist. This insert could be a full replacement, or only appending new found names. Not sure how your app is intended to work with this regard

You could also add a flag not to make the ajax call is user is doing any filtering with the input.

Flag could be something like

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

Then in the setInterval

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

这篇关于通过jquery get函数获取一个html文件。 Django的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！