I'm currently working on a site and I would like to barrow the technique from Facebook on how the 'pagination' or 'view more' works. I think I have it sorted out but I'm just asking if this is the prefered approach or if I'm way off base.
I'd have a More button that when the user hovered or clicked upon it I'd fire off an ajax request.
The ajax request would pass two variables the limit and the current item (just like a normal pagination would work) and grab the results from the database and render them as necessary for the feed/etc.
I'd use jQuery's append to add an anchor link here so i could jump to the spot where the last post was. Then I'd append the results from the ajax request to the bottom of my feed/etc.
Fire the link to move the screen to the anchor tag and call it a day.
Anything I'm missing? Any flaws that you see that you could give me a heads up on... I'm currently using primarily PHP, MySQL, and jQuery as my weapons of attack.
Any assistance would be appreciated.
I have implemented this with similar idea.
When you click the "more" button,
remove that button.
Request with $.getJSON a page to get next page data.
append those to the content-page-div.
append the removed "more" button to the end.
Related
Here is the problem, I have a WP site that changes the display depending on the presence or not of a parameter in the URL.
If no parameter the whole post shows normally.
If the user has the parameter in the URL the post will be split into many sections (break lines are used as separators) and each time he clicks next the page will load and the URL will change to "/2" for the second element of the post for example. This is what I have for the moment and it works.
With parameter in the URL I want the users to have a slide that only loads the content without the page loading but I can't find a way to do this in WP.
Is it possible with jQuery? For example, load all the content first and show the appropriate section after each click? How would you go about it?
I'm not asking for a code but the logic that you'll use to tackle this issue if you were in my shoes.
Thank you in advance for your suggestions.
I'm making a page which shows data, which is quite enormous.Tried pagination on it but didn't work the way I wanted. I'm looking for, something like "See more results", which on clicking will increase size of the page. Further, is it possible to do it with some limit on content to be shown on every click, like on every click it should show, say 10 or 15 rows ?
The best way to do this, in my opinion, is to cut the text and load just part of it with PHP. In this way the initial page won't be heavy. Then with a ‘Read more...’ button you can send an ajax request (with jQuery, maybe using the function load() function) you can get additional text, which will be appended in a div after the current text. Additionally, if you want to retrieve just some lines each time you press the button, you can check with jQuery how many div are already added (just adding a class to your new divs, you can check this just with $('#NameOfTheparent div.classOfTheNewDivs').length) and pass the variable to PHP, during the ajax request (so it won't be $('newDiv').load('something.php') but $('newDiv').load('something.php?var=numberOfDivAlreadyLoaded').
Well, this is the concept. :P
in my opinion, you need something like this:
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
I am having difficulties in the following problem:
I have a screen in PHP which displays a list of some records when I choose any of these
records (by clicking) it gives me a web site to share the data with this record. So far, it works.
I need to click on some of these records, instead of him
open another page, scroll down the screen and the record data to appear in the same screen, ie without opening another window.
Do you have any idea how to do this?
Thanks
You'll need to have a DIV at the bottom of the page, which will be completed by using an Ajax call and some javascript or jquery.
Without going into too much detail, heres what needs to happen:
User clicks a link which fires off an ajax request.
The backend PHP script takes the ajax call and generates either XML or pure HTML and returns the data.
JQuery or JavaScript on the original page takes the return and populates the empty DIV at the bottom of the page.
Regards
It sounds like you'll need to use ajax to pull this off.
I would personally suggest starting with reading up on the jQuery javascript library if you are not familiar with it already. It provides a very good set of ajax tools to work with.
Create a DIV layer on the bottom of the page. Use a simple AJAX library like this
Create a new php page that will only load a new record based on the recordID and call this page on the onclick method of your link that is now opening in the new window
I would try adding some jQuery to your page to handle this effect.
If you do add jQuery here is a function written to do just that:
http://pastebin.com/SeMHwSgg
Call the script like so:
Where a is the record you are having them click on and href="[some anchor]" located at the spot on the screen where you want the scrolling to stop:
<a id="gotop" href="#" onclick="goTop();return false;">click here</a>
So
Indeed, there is no error, it just does not have the effect that (scroll down the screen and show the record data). For now, it only shows the record open in another window.
I have a button on a page. The button is an image sprite, and it choose ADD in green. I want the user to be able to click this button, and then do a few things:
1) That button makes a call to add an item to my MySQL database, without reloading the page. (I think this needs AJAX.)
2) The button background image sprite changes such that it now says REMOVE in red.
I don't understand how to do this. I'd greatly appreciate a basic walk through on how to do it.
Have a look at this page that i created to demonstrate css sprites.
I call a function on click of the button that changes the image of the button.
You can call a function that does an ajax call inside this function.(Try looking at the source)
Take a look here to learn about ajax and database related stuff.
It will be easier to make the "AJAX" call if you use a JavaScript framework, such as jQuery.
You'll tell jQuery to issue a POST request (with data attached) to a PHP script on the server. The PHP script you write will add the item to the database. When the request is complete, jQuery will run a "callback" for you. In your callback, you can change the styling of the button.
Please see jQuery.post
That's the general overview and should get you started. Please comment on this answer if you'd like more details or examples on a particular part of the process.
I would like to create a pagination system for comments in my website.So far, I have been able to create pagination using php/mysql and html but the page has to refresh every time we click on the next button(for the next set of comments) or previous or a particular page....
As far as my knowledge of jquery is concerned I am thinking that, when the user clicks on the next button we post data for the page number to comments.php then echo all the comments in comments.php, then the jquery data variable recieves all the data echo'd in the file and appends it to the #comments box...
Is my solution a valid one??? or anyone has a better solution.....thanks
Your question doesn't make much sense and is very jumbled.
You can either load the entire list when the page first loads, and use jquery to paginate it by hiding the extra entries, which will work fine for lists with a few pages worth of content.
The other option is to use AJAX to fetch the next or previous page when the appropriate link is clicked.
There are plenty of pagination add ons for jquery. Maybe check them out.
Don't use a POST request to get the next page as it looks like you might be, unless you are just using the wrong terminology.
Yes, when you click 'next', you send ajax request to comments.php and replace current comments with new ones.
You can do it with a get()/getJSON() call in jQuery.
Something like
$('#next').click(function(){
$.getJSON('url?withnextpage=number',
function(data){
//update variables or the DOM
});
});
Returning it in JSON may be quicker. I hope that helps