A client has given me a task to do that I've not done before, and so I'm looking for the best way to do it. They have a form they want users to fill in, but for one field, they want an option of thousands to be placed into three dropdown menus.
For example:
So a user will only be able to choose a Venue once they've chosen a City, only a City once they'd chosen a State. (A nice way to break up the thousands of options.)
I suppose I could this quite easily using POSTBACKs and a simple database, but I imagine that doing something with AJAX and a simple database would be the slicker solution.
Are there any other ways that this problem might be tackled? If not, does anyone have any links to tutorials or code snippets I could grab? Secondly, how long do you think it would take you to implement such a system?
I've never done this before so I'm hoping to avoid as many unforeseen pitfalls as possible. Thanks.
How about a simple jQuery Autocomplete solution?
I've done such a thing, also with several thousands of entries.
The problems:
it's difficult for the end user to navigate trough the list if there are hundreds of cities to choose
dropdowns as they are terrible for such things
querying a database to obtain info is stressful because the query is basically the same, with same results, nearly never-changing.
So on to solutions:
I still stood by dropdowns, but I added (trough UI) options for users to filter the list a bit. I won't post the code or the layout, if you are fine with the dropdowns as they are - keep them.
I loaded all of the countries, cities and areas via JS once. Now, why - first off, it wasn't that huge of a deal, it was about 20ish kilobytes gzipped if I'm not mistaken. I didn't want the "please choose a country" > "please wait, loading cities" > "choose a city" > "please wait, loading areas" > "choose an area" thing, I absolutely hate waiting so I don't want anyone to wait if they don't have to :)
So, the whole structure is loaded at once (when page is requested) and kept inside an object. If the browser supports sessionStorage, I check whether I have the object there in the first place - if not, I load it via jQuery's $.ajax call.
On the web server, the script returning JSON object actually loads the data from Memcache. If there's no entry in the Memcache, then I query the db and load all the data and I store it with Memcache for later use.
Now, what happens is that I've got a JS object representing all countries, cities and areas - with relations, meaning I can render the dropdowns in any way I need to, showing only relevant cities for current country selection.
Now, as you have similar structure - you can apply the same logic.
Load the item when the page loads, but check if you have sessionStorage available. If yes, check if you got object there. No? Do a $.ajax call and obtain it. When dropdowns fire change event, render the appropriate data.
Hopefully this helps a little, I'm typing this in a rush :)
A few responses:
This is a good use of AJAX, no need to look for another method. You wouldn't want to force the client to pre-load all of the javascript arrays for the possible state/city/theater combinations...
jQuery Autocomplete is a good tool to use to implement the UI
The list of cities and states can be obtained from GeoNames
How long it would take to implement depends on the skill of the implementer ;)
Somewhat working example: http://jsfiddle.net/rA9gU/36/
Hope this might help
UPDATE: Added the NO theater found near you option
http://jsfiddle.net/rA9gU/39/
You've got it. On the "on change" event for each dropdown, run an AJAX request for the options for the next dropdown.
With jQuery it's pretty simple.
$(document).ready(function () {
$("#state").change(function () {
// AJAX call w/ $.get or $.post to a script to return and set city options
});
// Same for city to retrieve cinema options
....
});
jQuery is by no means a requirement -- just wraps things up nicely and in cross-browser fashion.
Be happy to provide a more specific example if you like.
Related
I'm using ACF to set a series of slots in my page. So the admin screen contains a series of Flexible fields, each of which can be one of the following:
Post
Category
Tag
Works great on the front end. I can drag-and-drop, choose posts/categories/tags etc. from the database and generally have a good time.
Unfortunately when trying to add a new slot to the page on the back end, or load it, the time taken to add a new row is killing it. I've only got a few rows there, but it's already taking unacceptably long; I'm fairly sure when I add a few more we'll start getting timeouts.
The only information I can find about this problem is this support thread on the ACF forums (https://support.advancedcustomfields.com/forums/topic/slow-backend-v-2-5-7/), which basically says:
Yeah, if you've got a big database and try and use flexible fields it's gonna do that.
I'm also using ACF-JSON to no noticeable effect.
Has anyone else experienced this problem? What did you do to work around it? Or did you have to abandon?
(Ideally my solution would keep flexible fields, as they're exactly what the client wants in this situation - but if there's another solution that enables them to edit the back end in linear time, I'm interested in that too.)
It's due to the way ACF loads its repeater fields and flexible fields. All layouts in flexible fields are loaded into the dom and hidden, and an absolute ton of javascript logic is applied to all of them. When you click to add a new "slot", it runs a clone of the hidden layout, and attaches all the necessary event handlers to the clone.
If you check the timeline for page DOMContentLoaded vs load (final render event), DOMContentLoaded is actually pretty fast most of the time, but load (everything that happens after the html is loaded) is what eats up most of that time, and memory.
Best I've been able to do is activate the new "Delay Initialization" option for WYSIWYG content fields, and disable "Stylized UI" and "AJAX" options for select, checkbox, and radio fields.
Ultimately, the biggest issues come from having deeply nested repeaters/flexfields inside repeaters/flexifields. Avoid nesting those as much as you can and page load time will decrease significantly.
If you are using any extensions that need access to the fields on any page, for example LastPass. Disabling that extension will speed up the page alot.
So the situation I have is I'm using Wordpress and I'm trying to write a custom plugin.
What I want to do is grab an array of all the posts and show the first 25.
Then underneath that I want to have a button that says , "Show Next 25" and when I hit the button it will add the next 25 to the list of articles, and if I hit again, wash , rinse repeat till it's out of articles.
I was going to write this in straight PHP / MySQL but not sure how to incorporate JQuery into it.
My thought was to write a series of offsetting MYSQL statements but thats probably too clunkly.
My 2nd thought was to pull all the post info into one Associative array and then find a way to parse the other output into the hidden divs.
Thoughts?
I tried looking for a wordpress plugin that does this but did not find one and I tried searching for a situation like this on here, found some stuff similar but not the same.
I guess you could compare this to commenting feature where it shows the last 10 commends and you have hit a button to see the rest of the comments.
Thanks much in advance.
I would grab from the database only 25 at a time. Then I might use JQuery to do the ajax call to pull another 25 based on what has already been shown.
Use a limit 25, offset clause on the mysql. Send the next offset value to the web page as a hidden input or a javascript var. Then use JQuery ajax to call your php function that returns a JSON data of the next 25 rows to display.
So this isn't JQuery, but I like this:
http://www.kryogenix.org/code/browser/sorttable/
But I also agree w/ the thoughts, you're wasting the resources of Ajax if you do it this way. Ajax would do well here.
Here's how "I" would do it, though this is just a suggestion.
First, if you don't already have it, I would suggest something like Komodo Edit to code in. It's free, but I have the pay for for very cheap (i think my last upgrade lic was 30 bucks?). If you, buy just one copy, they'll offer you a ton of discounts if you ever decide not to upgrade. Good program for HTML5/php editing.
Second, go look at Codeigniter's Active Record. After looking this page over, you'll see very easily why I would suggest CI. CI's Active Record makes safe and secure SQL calls an absolute breeze, though for better security, I would suggest you make use of there XML filter and never "chain" Active Record calls as it shows you can do on that page.
Finally, as I said before, I would read up on jQuery's .ajax(), .get(), and .post() commands. After a stirring read, I'd probably end up using .get() to make calls to a controller containing a simple php active record function that would return the wanted update data at +25 "ahead" of what the user is actually looking at.
I have a form that needs to allow people to search for hikes, hiking groups, or hikers, depending on what radio button they choose within the form.
Obviously, in either of these 3 cases, the query will be of different tables in the database, and have different usability down the road. So I probably shouldn't process all of these in one place I am assuming. Would you guys agree?
What might be a good practice way to handle such a case? I tried redirecting the request to single form processing modules, but I had trouble making a POST request in the URL that I was trying to redirect.
Ideas/suggestions appreciated,
Alex
I don't see a problem handling this from 1 form. pass on the search type and build an appropriate query based on the type, search terms, etc. Even if the queries are totally different, it sounds like the input your gathering is pretty simple. You may want to display the results with different pages, but processing can easily be handled with one form and one script.
Quick example:
//get variables out of POST
if ($search_type == "hike")
{
//put together a hike query, get results
//call script to display hikes
}
elseif ($search_type == "group")
{
//put together a group query, get results
//call script to display hikes
}
elseif(...) //etc, etc
You can just check the value for the radio button and call different methods for further handling the form. That way you can put the queries and any related code in totally different files.
Where exactly do you see a problem in that? In how is the handling behind the screens related to user-experience?
For Example
Let say we have 1000 products in a single category.
And we would like to Filter through these products.
As we Filter through the products using json.
Each time we have need run a separate query to the DB.
We were wondering if any one knows if it's possible display a preload the products table.
For example preload bar: initializing search (0 - 100%)
So the whole system would only initialize once on load then we would hope the search results could then be instant.
Unfortunately tweaking customers servers isn't really an option for us, so hopefully someone here may have a better suggestion
Thanks in advance!
On the PHP end, you could preload the records into something like a memcache bucket.
I strongly doubt, though, that the problem is the database query. It's much more likely that the json request is what takes so long.
It's certainly possible to preload all the values (i.e. fetch them in one big request). You are not giving any details about your system, but it would probably simply be a big json request.
I don't see any easy way to implement a progress bar for the Ajax request. Maybe a simple "loading" animation will do as well.
You would probably have to use some sort of local storage to persist the data across pages for it to make sense. For that, see this question.
1000 data sets isn't that much to query through, but it is a significant amount to store client side. However.. to answer your question:
Javscript can create an array of objects. Let's say
<script type="text/javascript">
var products = new Array()
products[0] = {name:'First', price:29.99};
products[1] = {name:'Second', price:29.99};
products[2] = {name:'Third', price:29.99};
</script>
... create these via php. Also instead of {...} you can create a function product(name, price) and then call products[0] = new product("first", 29.99);
When you have this set up all information is stored in the clients browser. So now you can use a search/filter via only javascript.
Loading bar can be neatly done through jquery-ui. Searching involves an array loop.
If you have multiple categories that you can separate before hand - you can just create different arrays, instead of storing everything in products array.
Good luck!
I'm a hobbyist, and started learning PHP last September solely to build a hobby website that I had always wished and dreamed another more competent person might make.
I enjoy programming, but I have little free time and enjoy a wide range of other interests and activities.
I feel learning PHP alone can probably allow me to create 98% of the desired features for my site, but that last 2% is awfully appealing:
The most powerful tool of the site is an advanced search page that picks through a 1000+ record game scenario database. Users can data-mine to tremendous depths - this advanced page has upwards of 50 different potential variables. It's designed to allow the hardcore user to search on almost any possible combination of data in our database and it works well. Those who aren't interested in wading through the sea of options may use the Basic Search, which is comprised of the most popular parts of the Advanced search.
Because the advanced search is so comprehensive, and because the database is rather small (less than 1,200 potential hits maximum), with each variable you choose to include the likelihood of getting any qualifying results at all drops dramatically.
In my fantasy land where I can wield AJAX as if it were Excalibur, my users would have a realtime Total Results counter in the corner of their screen as they used this page, which would automatically update its query structure and report how many results will be displayed with the addition of each variable. In this way it would be effortless to know just how many variables are enough, and when you've gone and added one that zeroes out the results set.
A somewhat similar implementation, at least visually, would be the Subtotal sidebar when building a new custom computer on IBuyPower.com
For those of you actually still reading this, my question is really rather simple:
Given the time & ability constraints outlined above, would I be able to learn just enough AJAX (or whatever) needed to pull this one feature off without too much trouble? would I be able to more or less drop-in a pre-written code snippet and tweak to fit? or should I consider opening my code up to a trusted & capable individual in the future for this implementation? (assuming I can find one...)
Thank you.
This is a great project for a beginner to tackle.
First I'd say look into using a library like jquery (jquery.com). It will simplify the javascript part of this and the manual is very good.
What you're looking to do can be broken down into a few steps:
The user changes a field on the
advanced search page.
The user's
browser collects all the field
values and sends them back to the
server.
The server performs a
search with the values and returns
the number of results
The user's
browser receives the number of
results and updates the display.
Now for implementation details:
This can be accomplished with javascript events such as onchange and onfocus.
You could collect the field values into a javascript object, serialize the object to json and send it using ajax to a php page on your server.
The server page (in php) will read the json object and use the data to search, then send back the result as markup or text.
You can then display the result directly in the browser.
This may seem like a lot to take in but you can break each step down further and learn about the details bit by bit.
Hard to answer your question without knowing your level of expertise, but check out this short description of AJAX: http://blog.coderlab.us/rasmus-30-second-ajax-tutorial
If this makes some sense then your feature may be within reach "without too much trouble". If it seems impenetrable, then probably not.