title: Why is my AJAX request sending 30 GET requests in Django Console?
body: <p>I'm trying to build an online store and I'm trying to give the end user the ability to filter between new, used, or all items.  I believe the way I have it set up now is that when clicking on a filter, it sends an AJAX GET  request which then loads in a different query.  The issue I'm having is that when I click on any of these filter, the page flickers and I can see in the console, 20-30 GET requests. Once in a while it will do only 1 GET request though, so I'm not sure what's happening.  I would like to figure out what's causing this issue and if it is in my jQuery or in my Django view.</p>
  
  <p>TEMPLATE</p>
  
  <pre><code>//DISPLAYING EACH ITEM FOR SALE
  
  {% for i in latest_entries %}
  &lt;li&gt;
      &lt;div class="grid_4"&gt;
          &lt;div class="item_for_sale"&gt;
              &lt;img src="{{ i.item_picture.url }}" alt="" /&gt;
              &lt;div class="overlayname"&gt;{{ i.headline }}&lt;/div&gt;
              &lt;div class="overlayprice"&gt;{{ i.price1 }}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="posted"&gt;Posted {{ i.pub_date|timesince|',' }} ago&lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  {% endfor %}
  
  
  //DROP DOWN MENU TO CHOOSE FILTER
  
  &lt;ul class="filterlist"&gt;
      &lt;li&gt;
      Type
      &lt;ul class="filterlist"&gt;
        &lt;li&gt;&lt;a href="" id='used'&gt;Used&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="" id='new'&gt;New&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="" id='strains1'&gt;All&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  
  //SCRIPT TO REPOPULATE GRID WHEN FILTER IS SELECTED
  
  &lt;script&gt;
  function filter(type) {
    $.get("/storefront/?filter="+type, function(data) {
       $('.grid').children().remove();
       $(data).appendTo('.grid');
    });
  }
  
  $("#used").click(function () { 
    filter("used");
  });
  
  $("#new").click(function () { 
    filter("new");
    return false;
  });
  
  $("#all").click(function () { 
    filter("all");
    return false;
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>VIEWS</p>
  
  <pre><code>def storefront(request):
      latest_entries = Entry.objects.order_by('-pub_date')[:16]
      context = {'latest_entries': latest_entries}
  
      if request.is_ajax():
          if request.GET.get('filter') == 'used':
              latest_entries = Entry.objects.filter(entrytype=1)
              context = {'latest_entries': latest_entries}
              return render(request, 'storefrontload.html', context)
          if request.GET.get('filter') == 'new':
              latest_entries = Entry.objects.filter(entrytype=2)
              context = {'latest_entries': latest_entries}
              return render(request, 'storefrontload.html', context)
          if request.GET.get('filter') == 'all':
              latest_entries = Entry.objects.filter(entrytype=3)
              context = {'latest_entries': latest_entries}
              return render(request, 'storefrontload.html', context)
      return render(request, 'storefront.html', context)
  </code></pre>
  
  <p>I am having another issue (which may be related) where as soon as I click a filter, the items load onto the page but the grid appears to be 200px higher than it should be.  In other words, if I load the page, the grid of items for sale is positioned perfectly, but when I click a filter, the grid seems to move up about 200px and looks really ugly.  I can't figure out why.</p>