Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

ajax pagination with fall back?

Posted on 2011-10-06
9
Medium Priority
?
558 Views
Last Modified: 2012-05-12
Hi
there are a lot of ajax pagination around the web but none i see degrade well, especially none works when javascript is disabled.

anybody knows of an ajax pagination that degrade well?

best regards
0
Comment
Question by:derrida
9 Comments
 
LVL 22

Expert Comment

by:Ivo Stoykov
ID: 36929061
if "javascript is disabled" ajax won't work.
0
 
LVL 1

Author Comment

by:derrida
ID: 36929083
well obviously. but what i want is that when it cannot work since js is disabled i still have a regular php pagination. i am ajaxifying a crud and i take care that it wrks well even if js is disabled . the only issue i have left is the pagination.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36929892
It can be done this
-- you need to make the code work by php pagination by default.
-- then in case javascript will be enabled, you can convert the page to do ajax pagination at the body onload event
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 19

Expert Comment

by:Bardobrave
ID: 36930080
Easy enough.
Made your pagination buttons to be links to php pagination code.
Also, on your javascript code control the onClick event of those links.

When javascript is enabled the js listener you had will take control of the execution and made the ajax pagination (remember to stop the event bubbling to avoid links to continue).
When javascript is disabled the listender simply won't exist and the link will be followed normally.
0
 
LVL 1

Author Comment

by:derrida
ID: 36930653
hi gurvinder372 and Bardobrave

since i`m a php guy i already have php pagination, the thing is i have no idea how to implement both your ideas, which sound good.

can any one give an axample on how to do that?

best regards
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 36931294
Let's try a brief sketch, suposing you use jQuery (one of the most useful javascript frameworks to the date):

Include a .js file into your page with this code:

$(document).ready(function() {
    $(".yourPaginationLinksClass").click(function() {      //this will control the click event on each link
        yourAjaxPaginationCall($(this).html());                 /* you just call your pagination ajax function with
        return false;                                                           the clicked's page number */
    };                                                                                
});

I'm not very sure right now, but I think you need the "return false" to avoid the link to be followed once clicked.

I hope you can make some tests with this brief example. Comment here if you face any problem and we'll try to guide you.

If you need info into using jQuery you can check www.jquery.com, you can use raw javascript, of course, but it's more complex to develop this example.
0
 
LVL 1

Author Comment

by:derrida
ID: 36931922
hi
its not the first time i`m using jquery but i`m less comfortable with javascript .

the thing i need help with is exactly the yourAjaxPaginationCall($(this).html());

i realize i should disable the regular click of my pagination (since it takes to another page). so i have my regular php pagination and i disable its regular click, but how to make the ajax pagination is exacly what i have no idea what to do.

hope my english is clear enogh:)

best regards
0
 
LVL 19

Accepted Solution

by:
Bardobrave earned 2000 total points
ID: 36932230
Well... really an Ajax call the only thing that does is to call to a server script from your client code without reloading the whole page.

Let's supose you have a php page called pagination.php that returns the HTML code of a page given passed by parameter.

You can do something like this:

function AjaxPagination(page) {
    $.post("pathToYourFile/pagination.php", { page: "6" }, function(htmlResponse) {
        if (htmlResponse != "")
            $("#yourDataContainerName").html(htmlResponse);
    });
}

When you call AjaxPagination, the code on pagination.php will be called with param page=6, the response will be loaded into htmlResponse and, after finished, the inside of the callback function will be executed.

Keep in mind that, while pagination.php is executed, the rest of your js code will be executing in paralel as this is an asynchronous call (you can made calls synchronous with $.ajax instead of $.post, but the syntax is a bit different).
0
 
LVL 1

Author Closing Comment

by:derrida
ID: 37049404
sorry i just forgot all about that question
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month21 days, 3 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question