Getting an html file through a jquery get function. Django

Question

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 %}

it is confusing as to what html/js is in what file and in what order. Can simplify $.get even more to $('.get_fb_friends').load('/mysite/get_fb_friends/'); but that won't resolve any other issues — charlietfl
– charlietfl, Commented Nov 11, 2012 at 16:08
Ok, thank you for the tip. I edited my question in order to make it clearer, I hope it helps. — Juliette Dupuis
– Juliette Dupuis, Commented Nov 11, 2012 at 16:18

charlietfl · Accepted Answer · 2012-11-11 16:29:17Z

1

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

edited Nov 11, 2012 at 16:29

answered Nov 11, 2012 at 16:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Juliette Dupuis Over a year ago

Thank you for your answer. I need a full replacement, because I sort the friends depending on their activity (active, idle or offline). So if I get what you said, I have to put the search bar (html and JS) in the main page. then I need to change my jquery get request in order to get only the LI tags. But I have to admit I don't know how to ask the get request to get only that. Could you give me a hint, or a good tuto about jquery get function? Thanks!

charlietfl Over a year ago

can you change the output of the remote page to only send the LI tags? If not the remote page can be parsed in the ajax success in main page

charlietfl Over a year ago

also just noticed $('#friendlist').hide(); should likely be $('#friendlist li').hide(); and could be root cause of not seeing anything at all. You are hiding the parent and you can't display children of a hidden parent any time

Juliette Dupuis Over a year ago

I really don't know how i could only send the LI tags. Could you help me on that?

charlietfl Over a year ago

OK can do this

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

This will parse the returned page and only pull out the LI tags and replace them in main page

|

Collectives™ on Stack Overflow

Getting an html file through a jquery get function. Django

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related