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/
Related
Okay I'm not really sure how to approach this. I have a user-generated post board where people post, it drops down onto a list of a bunch of posts. When you click on the ID number of the post it will bring you to a separate page with just that post and the comments on the post. I want it so when you hover over the href it drops down something that tells the user there are x amount of comments on this post. This way people know if there is comments without switching pages and also being able to be able to click the href still and go to the postid page.
I assume some ajax/jquery/javascript would be used to accomplish this but since I'm fairly new to ajax and jquery I'm not certain how this would be done. Thank you!
For a hover effect, it would be better if that information was already stored on the page and just hidden. Then when the user does hover, you can just un-hide it and have it positioned where you want, and then hide it again when their mouse leaves the area. Using AJAX requests for this purpose would waste away a lot of HTTP requests for such a tiny amount of information.
Really, you could do the hover effect using pure CSS if you wanted too (I would).
Since a hover happens fairly often, I wouldn't use it as the default event to fire an AJAX-request. This would increase the HTTP-traffic enormous. See if you can fetch this information when the page is build (and put it in then) or use something else like a "preview"-button for the event.
Anyways, this would be the basic workflow if you want/need to use AJAX:
Write a PHP-script (or any other language you use) which fetches the number of comments (and what else you want to display) from the database (or where your data is stored).
This script should then be called via AJAX (with $.ajax() from jQuery for example). As the expected return-type you would then use json.
The script which fetches your data would then create an object, use PHP's json_encode()-function to encode this object to JSON and echo it out.
This JSON-object will then be available in the success-method of the ajax()-method from jQuery. Then, you can access its members (e.g. the comment-count).
Iam new to PHP . I wanted to make a forum where users can ask questions.I am using ajax to auto refresh the page.But it creates some problems...
Firstly, if I make that particular div ,where most recent question will be displayed,refresh only the latest question is displayed .
let me clear it with an ex :
User A opens the forum
He gets questions qlatest,q1,q2,q3 . Where div containg qlatest refreshes every 1 sec
User B posts a question qlatest2
qlatest is replaced by qlatest2 !
Now should I make whole div conatining all the questions make refresh?
If I understand correctly you want to create something like the Twitter feed where the latest item is displayed on top of each other.
The reason that the entire DIV refreshes is because you are rewriting the entire inner HTML of that DIV. To avoid this, use .appendChild() and program your PHP callback file to only pull the latest record from the database.
http://www.ezineasp.net/post/Javascript-Append-Div-Contents.aspx
JQuery also has some very useful functions adding children. I suggest using a Javascript library if you are new to AJAX calls.
You have to:
Add some data source that returns last asked question.
Invoke that data source on a constant interval and load returned question into the div..
The simplest to explain is the following solution:
Write JavaScript code that uses JS builtin function setInterval() to load eg. script last_question.php into the div. You can do it eg. using jQuery load() function, which can look eg. like this (assuming your div has ID of "last_question"):
jQuery('#last_question').load('last_question.php');
Of course it can be optimized. To do so, read about:
Long polling
JSON format
jQuery.requestJSON() jQuery function
Maybe some effects to make the question change smoother (like slide out and slide in)
Hey guys I am really messing up with this.
This is I'm doing: If there are 100 users to fetch from Database, I'm using pagination and showing 10 users at a time. when user will click on next page, he will get next 10 users through ajax(called ajax on click) and so on. I'm showing 10 page-links right now with first, next last and previous links.
This is how flow will go: On a.php created links and called ajax function with every link, passing url(b.php) & target(where I will get result), with url also passing clicked pageno., this pageno. will go to b.php and next 10 users will be shown with the help of ajax.
This is the problem: Currently I'm showing 1-10 links with first and last links, unable to show next and previous links because to redirect to next or previous, I am not getting the current page number on a.php i.e i'm passing to b.php. also links are created in foreach loop.
I am trying hard to get this done, but no success yet.
waiting for valuable reply.
Ok, I think I understand...
I think what you need to do is store the current page number as a JavaScript variable. Use the function that is doing the Ajax to update this variable and also update the next/previous links.
Hope this helps.
Update:
On second thoughts, here's a better idea. Having your ajax call directly in your link means you have to put together a url and update it, which is awkward and annoying. This isn't ideal. Instead it is better to store the variables and have some set functions work with them in a set way. So, you could have something like:
<a href="javascript:void(0)" onclick="gotoNextPage()">
Rather than passing them the number of the page to go to, you can store the current page number in a javascript variable and do something like this:
gotoNextPage(){
// lets assume the current page number is stored in a
// variable defined outside of this function called curr_page
curr_page++; // increment the current
call_ajax('user_info.php?pageno='+curr_page);
}
This way the code for the link doesn't ever change.
You can still pass other variables (such as 'order', 'perpage' etc) to gotoNextPage() but you might find you don't need to.
A couple of things to bear in mind:
1. Using jQuery or something similar would probably make things easier for you.
2. Anyone without javascript enabled will not be able to use your site. Consider changing it to something like
<?php
echo '<a href="your_main_page.php?page_number=', ($curr_page + 1), '" onclick="gotoNextPage()">';
?>
This way it would work for via the ajax method but would also work (if not as smoothly and with a page reload) for people without javascript. It's a bit more work for you though...so hat's your choice!
Hope this makes sense. It's been a long day!
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
Further to my question yesterday (here), I am working on a webpage that has a section that shows 'live' order details.
The top half of my webpage has Spry Tabbed Panels. One of the panels contains an include call to a separate php page that I have created (getOpenOrders.php). This contains an SQL query to obtain all open orders and then puts the details into a table.
As a result, the table of open orders is shown in the Spry panel. What steps do I now need to take to have this refresh every 15 seconds?
Do you really want to call the database every 15 seconds for each user? isn't that an overload?
I'm not saying that your database will be overloaded, but, thats how you shouldn't do things!
Edited
you should show an image, or the link to that page in order to gt an appropriate answer, because it all depends in what are you doing in the table.
because I don't know, I will give you an answer on what probably is happening.
Because you said that you're new to the ajax world, let's make things simple, and not to complicate on the you should return a JSON object and use it to re populate your table. :)
So we will start with 2 buttons (Previous and Next) so the user can move the data that is showing (you probably don't want to give him/her 100 lines to see right?)
let's say that you have 2 pages, a showData.php and getTable.php, in the showData.php you will need to load jQuery (wonderful for this) and add a little code, but where the table is to be placed, just add a div tag with an id="myTable" because we will get the data from the getTable.php file.
getTable.php file has to output only the table html code with all the data in, without no html, body, etc... the idea is to add inside the div called myTable all the code generated by getTable.php
Let's imagine that getTable.php gets a page variable in the queryString, that will tell what page you should show (to use LIMIT in your MySQL or PostgreSQL database)
You can use jQuery plugin called datatables witch is one of my choices, check his example and how small code you need to write! just using jQuery and Datatables plugin.
The first description follows the jQuery.Load() to load the getTable.php and add as a child of the div and wold do this for the previous and next buttons, passing a querystring with the page that the user requested. It's to simple and you can see the website for that, if you prefer to use the DataTables plugin, then just follow their examples :)
if you, after all this need help, drop me a line.
<META HTTP-EQUIV=Refresh CONTENT="15; URL=<?php print $PHP_SELF ?>">
This should be in between the head tags.
-or-
header('Refresh: 15');
This should be before the head tag and directly after the html tag.
As said by balexandre, a different method should be used. One that does not require a database hit every 15 seconds for every single user that is connected to the site. But, there is your answer anyways.
Although, balexandre makes a very good point, if you do decide that you need a refresh, you could simply do something like this in your JavaScript:
window.onload = function( )
{
setTimeout( 'window.location.refresh( )', 1500 );
}
(I've not tested the above code, so syntax may need to be tweaked a little, but you get the idea)