I have a table which dynamically reloads continually every 60 seconds. This keeps the data up to date.
I am using the script from here - http://www.michaelfretz.com/2010/04/21/using-ajax-to-load-data-from-php-into-your-website/
On the pages that have about 15 records, the Twitter Bootstrap tooltips work fine, they are speedy and look great.
On another page however I have over 400 records. Each record has a hover tooltip which shows the information from the database about that record. The information has already been outputted to the title tag but when hovering it takes more than a second before it appears which makes the whole page seem sluggish.
I'm thinking the reason for this is due to using the 'Rel' tag and twitter javascript which is live(Continually updating) , and therefore slows it down. But I'm not sure.
Is there any way to fix this..... or am I better to try and make a paginated table which loads the next page each time I click Next?
400 records is a lot to expect someone to traverse within a 60 second period. Without actually seeing any actual html, it's a bit hard to make suggestions but here are three:
Use the title attribute instead - see about the Title attribute. This will mean that you are using inbuilt browser code rather than Bootstrap rendering for tooltips.
Show a subject/content snippet for each row rather than just subject i.e. place the initial part of the content in available space after the actual subject. Most people have large monitors these days and with a responsive design you can show a lot of content after the subject.
As you say, use pagination. Bootstrap provides one but it requires you to do the wiring.
400 Records! Too much!
This is something seriously to do with the browser and system's performance. Displaying 400 records with live() is kinda crazy. The browser will crash for sure. Instead you can do one thing. Use pagination and display only a small sub set. Also, the users will find it difficult to navigate and search.
One another way is to use datatables. Load the full content in table and don't worry about anything. Datatables will take care of the rest. Pagination and Search are good features in this.
Screenshot of Datatables:
(source: webresourcesdepot.com)
If you see this, everything from Searching, Sorting, giving tooltips are done in the client side, with minimal set of data. So the payload on the browser will be less and the users see the part, which they just require.
Related
A couple years ago I had a client with a limited budget and a short deadline who wanted a sortable searchable table of their parts inventory online - at the time they had only an excel spreadsheet. I created a database, then I just used Script Artist (because I had it) to do the front end. It all works great and he's been happy with it, except now we'd like to make sure that Google can actually find all 17,000+ parts they have available and not just the first 25.
The page where the inventory is located is just www.thesite.com/inventory.php and the url remains the same no matter what page you're on.
I've been looking around at different options, using pushState vs html snapshots, and I'm not sure what would be the best option or if I can even do anything with the current Script Artist setup or if I should just pitch the whole thing. I'd really rather not have to start over since he still doesn't have much of a budget, so if anyone could give me any input that would be helpful. Thanks.
I want to make Newegg's like catalouge functionality for my little website. I want mine to be sligthly different(greatly simplified) though. I haven't done anything so advanced(atleast in my books) before, and wanted to know if it's possible to do. I want to use PHP and JS. The new records will be added manually through using either phpMyAdmin or pehaps I will install and use either SQLyog, HeidiSQL or Navicat for such purposes. Could someone point me to the right resources to get this kind of job done as fast as possible and properly?
What I had in mind was:
For example the cell which contains the thumbimage, all the mini information about the product and the big price tag will not have a separate, more detailed page. Everything user will need to know will be inside that product cell.
Right under the thumbnail image there will be numbers(1 2 3 4 5 6), and when you hover over them, under the cursor, a big version of one of the all available images will appear.
Lastly, it should have the page generation(don't know what you call it). For example there's more than 20 product entries on the page, then the server should create a new page(First 1 >2< Last) to hold the older records.
Oh and there won't be any shopping cart functionality. You can't really "order" these kinds of products, you just find something you like and call me up about it.
TIA
I'm sure there are dozens of books on this subject. I'm attempting a short reply, however:
This sounds like something that could profit from:
a MCV-framework like CakePHP (or Django, Ruby on Rails etc), which could handle database-logic (including pagination, which is the word you're looking for), and
a JavaScript library like JQuery to handle Ajax, JavaScript and other UI-related stuff.
++?
For the page numbers, I recently had to do this. The technique is called pagination, and this thread helped me out immensely: PHP Formula For a Series of Numbers (Mathy Problem)
The thumbnail effect you want to include would need to be done in javascript. I'd recommend learning jQuery, as it is pretty easy to use for this sort of thing.
This is a hard question to answer because you haven't given much indication as to your skill level, or progress towards accomplishing your goal. Assuming we're starting at 0, there is probably more to discuss than this thread can contain. :\
UPDATE
To learn PHP's database functions, I would lean on W3School's PHP/MySQL tutorial for a quick summary, referring to the php manual's mysql documentation for details and code examples when W3schools isn't enough. This should at least get you the markup you will need to work with.
For the thumbnails, I would reiterate my recommendation for jQuery, specifically attaching a .hover() event to the image numbers (this is equivalent to the onmouseover and onmouseout events in JS) that uses the .fadeIn() and .fadeOut() animations to show and hide your full size images. Hope that helps.
Does anyone know of a link to a site that has a tutorial/code on good way to paginate information coming from a database? (without page refresh) I have spent the better part of the day looking for a site that has what I need. Most are dealing with static/fixed data in the forms of lists etc.
I need one that has something like this for my tables:
Data Data Data Data
Data Data Data Data
Records 1 to 8 of 27 First Previous Next Last
We just implemented a few things using this plugin for JQuery:
Datatables.net
It works on basic html tables and has support for AJAX. Basically you would just write a PHP page that returns a partial result from your database in JSON, etc. The plugin will handle making the AJAX call and displaying the data.
This is only a very partial answer (sorry, not much time atm) but look for the 'LIMIT' command in mysql. It lets you pull back only a certain set of records, say records 11-20. I use that when I do pagination.
Again, this isn't complete, but hopefully it'll help!
I've worked with this one quite a bit. jQgrid... seems to be pretty well maintained.
http://www.trirand.com/blog/
I have a php code that fetches data from mysql. The data has (say) 15 rows. I want to display only 5 rows at a time to the user, with links to each of the set (3 in this case) such that when a user clicks on either of the links, the same page will show the corresponding results. Since, php code has the final result set, I don't want a solution that involves me to navigate to other pages and possibly re-calculate the next set of solutions (5~10 or 10~15). How can I do this? Thanks in advance.
If I am using javascript or ajax, how can I achieve this? I don't know javascript much.
You can try loading everything in your page and simulating the pagination thanks to javascript.
An example in jQuery here
It sounds like you want to send the Data as a complete set to the client but not let him display everything to the user. So use Javascript to just show you the pages 1*page_number to 5*page_number (with a for-loop).
By far, the easiest solution in this situation is a Dom-based Grid system. I recommend checking out Datatables. In essence, the Datatables code will take a fully-formatted html table and reformat it to include only the amount of rows you tell it to, with paging on the bottom as you've requested. In addition, you can turn on such features as filtering, toggle-able length, sorting, and selection. Once you get the hang of it, the additional code takes no more than a minute per table and the features are outstanding.
This is really straightforward. Use PHP to output ALL of the table, with all the rows. The only gotcha here is to include the full html, including <thead> and <tbody> Give the table an id such as "example"
Now, include the files that you download from the datatables site--datatables.js and Jquery.js. Instantiate the jquery like this:
$(document).ready(function() {
$('#example').dataTable();
} );
That's it. As you can see from the examples, it's a really cool tool. Good luck.
I have a list of keywords, about 25,000 of them. I would like people who add a certain < script> tag on their web page to have these keywords transformed into links. What would be the best way to go and achieve this?
I have tried the simple javascript approach (an array with lots of elements and regexping/replacing each) and it obviously slows down the browser.
I could always process the content server-side if there was a way, from the client, to send the page's content to a cross-domain server script (I'm partial to PHP but it could be anything) but I don't know of any way to do this.
Any other working solution is also welcome.
I would allow the remote site add a javascript file and using ajax connect to your site to get a list of only specific terms. Which terms?
Categories: Now if this is for advertising (where this concept has been done a lot) let them specify what category their site falls into and group your terms into those categories. Then only send those groups of terms. It would be in their best interest to choose the right categories because the more links they have the more income they can generate.
Indexing: If that wouldn't work, you can maybe when the first time someone tries to load the page, on your server index a copy of it and index all the words on their page with the terms you have and for any subsequent loads you have a list of terms to send them based on what their page contains. ideally after that you would have some background process that indexes their pages with your script like once a day or every few days to catch any updates. Possibly use the script to get a hash of the page contents and if changed at all you can then update your indexed copy.
I'm sure there are other methods, which is best is really just preference. Try looking at a few other advertising-link sites/scripts and see how they do it.