Trying to implement AJAX-based endless-page pagination

This commit is contained in:
Christoph Haas 2013-08-10 14:46:09 +02:00
parent 31f11c2d24
commit 732af154ad
3 changed files with 21 additions and 8 deletions

View file

@ -0,0 +1,16 @@
// Load forms using AJAX
//$('#form-search').submit(load_screenshots);
alert("loaded");
$('#more-screenshots').click(load_more_screenshots)
function load_more_screenshots()
{
$('#more-screenshots').html('Loading…');
$('ul.thumbnails').append('foo');
}
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});

View file

@ -1,7 +1,7 @@
<% # Show search results %>
<% if @packages.length>0 %>
<ul class="thumbnails">
<ul id="thumbnail-grid" class="thumbnails">
<% @packages.each do |package| %>
<li class="span3">
<div class="thumbnail">
@ -14,8 +14,7 @@
<p><%= package.description %></p>
<% else %>
<div style="text-align: center; height: 120px">
<%= link_to (image_tag "/thumbnail-404.png"),
"/path/to/upload/package" %>
<%= link_to (image_tag "/thumbnail-404.png"), "/path/to/upload/package" %>
</div>
<h3><%= package.name %></h3>
<p><%= package.description %></p>
@ -26,4 +25,4 @@
</ul>
<% end %>
<button class="btn btn-large btn-block" type="button">More screenshots…</button>
<button id="more-screenshots" class="btn btn-large btn-block" type="button">More screenshots…</button>

View file

@ -1,6 +1,6 @@
<h1>Search for a package/description:</h1>
<%= form_tag(url_for, method: "get", class: "form-search") do %>
<%= form_tag(url_for, method: "get", :remote => true, id: "form-search", class: "form-search") do %>
<div class="input-append">
<%= text_field_tag :search, params[:search], autofocus: true, placeholder: 'What are you looking for...', class: "search-query" %>
<button class="btn" type="submit">Search!</button>
@ -18,7 +18,5 @@
<h1>Search results</h1>
<!--<div class="row-fluid">-->
<%= render "packages_search_results", object: @packages %>
<!--</div>-->
<%= render "packages_search_results", object: @packages %>
</div>