I have a PHP application where a list of people is displayed in a select box. With time this list is now more than 100,000 long and the screen takes about 20-25 seconds to load. Is there any way I can cut down on this time? Tried loading the names via ajax, but the performance is same or worse. This also needs to be the first item selected on screen, as the rest of the items are dependent on it.
You could use ajax as you already tried, but instead of displaying all names, you could do something like autocomplete, which will display matching names when users start typing.
Example in jQuery: http://jqueryui.com/autocomplete/
Can u use jScroll?
you can just implement in your select dropdown, by replacing the contents to your list items.
Or you can see this.. jsfiddle
ember.js
Related
I'm having an array with possible values that I would like jQuery to autocomplete from. This array is very big. It has more than 1000 records inside. I'm using jQuery so I can be auto-completing from these possible values but it's taking so long that the page eventually crashes.
This is my jQuery snippet:
jQuery(function(){
jQuery(".postal-code-autocomplete").autocomplete({
source: postal_codes,
delay: 0
});
});
Any suggestion for optimization ?
EDIT: I made it work with minLength:3 but something weird happens. When I enter all 5 digits and it finds the value, it makes a drop down list with multiple rows and only one record, the one I chose. how can I avoid this?
Thank you!
You need to use the Remote option detailed in the documentation;
http://jqueryui.com/autocomplete/#remote
Loading many values at once will obviously lock-up the browser, using the remote option will allow only loading a filtered sub-set of the data, based on what the user has typed
I have a database with a table having a big number of rows. I am fetching the data in this table and displaying it in an HTML table on a web page.
My requirement is to display 20 records initially and then when the user clicks a button labelled Next, I show the next 20 records and so on...
So I have initially fetched first 20 rows from the table in my PHP (server-side), and then assigned a JS function to the onclick attribute of the button labelled Next. Inside this JS function, I use an AJAX call which brings me the next 20 rows. Then within this JS function, I replace the HTML rows with these new rows.
I need something like this:
The question is that are there any plugins available which can implement that functionality for me? If a plugin is available, implementing it manually wouldn't make sense because being a rookie, I can't develop it better than the developers of that plugin.
Yes
This is called pagination - a quick search for "ajax pagination mysql php" or similar brings up a wide range of options. I can't recommend any particular one as your question is too broad; I can only reasonably go as far as a definition.
Internally they use the MySQL LIMIT keyword which may help give further things to search for or experiment with depending on your actual use case.
I have two drop down menus on my webpage. One is a course list and the other is a student list. What I want to do is, when a selection is made in the course menu it will update the student menu to only list students in that course.
All the course and student data is saved in a MySQL database. The SQL statements to retrieve the results I want are not a problem. I have those figured out. The problem is that I don't know how to get one drop down menu to update the other without the use of a submit button. Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
I've looked through several similar questions, but a lot of them end up resetting the first menu when the second is updated. I need to print both the selected course and student on the page at the end.
Is this something that can be done with PHP, or would Javascript be more preferable? If someone could point em in the right direction, that would be much appreciated.
Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
Yes. The buzz-word for this is AJAX.
You will end up using both JavaScript and PHP to do this. The actual implementation is quite involved, so I will list the basic steps for you.
(JavaScript) Bind the change event for the course drop down menu.
(JavaScript) When that event is fired, capture the selected course and fire an XMLHttpRequest off to your server along with the selected course.
(PHP) Capture the selected course, and run the SQL statement to fetch your students.
(PHP) Convert the student list to a text format (JSON, XML, delimited-text, etc.) to send back to the browser (using echo, print, etc).
(JavaScript) Populate the student drop down menu.
The general approach to this is to use jQuery to add a hook to your drop-down selector and trigger an AJAX load on another section of the page, populating that with data retrieved either as an HTML fragment (easy) or JSON data that's turned into one (harder).
A really quick and dirty version is to grab a portion of a page and re-populate the current document with it using $.load():
$('#select1').on('change', function() {
$('#select2').load('select.php #select2', 'select1=' + $(this).val())
})
That's the rough idea: When your first selection box changes, load the select.php page, or whatever you're using, and add on the parameter select=N where N is the selected value. It then rips out the #select2 section and replaces it.
We are using Chosen Javascript plugin http://harvesthq.github.io/chosen/ . It works great except one issue. When it loads on the page, it shows the "list box" kind of view for few split seconds in place of the Chosen plug in. It loads to the chosen plug in "view" finally. But for that few moments it looks bad with all the data showing as items in list box. For example, if we have a Chosen Plug in control linked to a list of States in US. When this page loads, for a split second, it shows a list box (not the chosen plug in) and it shows all the items in the list (list of states etc) .. then after the page loads completely, it will render the Chosen Plug in with blank items as its supposed to.
Is there any setting I can make use of to fix this? Any work arounds? Causes? Any one encounter this before? Thanks for the help.
You could potentially set the style display:none; on the element and then display it once chosen loads.
I'm working on the front-end of my project and doing the back-end later. I've ran into a snag though. I have a list of DIVs (want them to be collapsible as well) that are suppose to show various apartments around a given zip code. Problem is, I don't know where to go to look for these things:
Firstly, I wish to sort these divs by name or ranking.
Secondly, I
want to be able to search these results and toss out the ones that
they do not want, i.e. I type in A, all apartments that begin with
letters B-Z disappear in the list. I think in p after A, all Aa-Az
letters disappear from the list, etc.
Thirdly, should I use jQuery to paginate my results or should I use PHP instead?
Lastly, I have a filter box. I want to do the same as above except with different selectable options (on the fly using AJAX). User selects, 1 to 3 bedroom apartments, no pets,
and hits filter... boom, list of apartments with values.
Is there anything that I can use using jQuery/Javascript to speed up this process that also degrades when Javascript's disabled? I know this sounds like a lot, but any help would be greatly appreciated.
Well for this to work without javascript, and still behave like you want, i guess you have to build this in pure old html (with form post's / links) and then add jquery ajax functionality to make it prettier and faster when javascript is enabled.
If i were doing this, i would build it with form post's that return the whole page (when javascript is disabled) and add jquery events on page load to prevent default form post and instead use ajax post to only partial load your pages and aply transition effects.
One last thing, if you have a lot of data to show on page use pagination and sorting at database level, return only the visible content of your page. This will work with and without javascript, and is scalable (with lots of results it becomes unmanageable to it in javascript)