I have a page with a table of posts and groups of checkbox filters in the sidebar. Looks something like this:
www.example.com/toylist
|___________| |_______________________|
| [ ] Red | | 1. Big Red Box |
| [ ] Blue | | 2. Big Blue Box |
| [ ] Green | | 3. Big Green Box |
| | | 4. Small Red Box |
| [ ] Box | | 5. Small Blue Box |
| [ ] Ball | | 6. Small Green Box |
| | | 7. Big Red Ball |
| | | 8. Big Blue Ball |
| [Filter] | | 9. Small Green Ball |
The sidebar is a form which posts data to the same url and appends parameters based on the chosen options. (www.example.com/toylist?color=red&type=ball
) The page is set to show all posts by default and read the URL filters and return the appropriately filtered posts.
This worked successfully with just PHP. I then added ajax for a better user experience so when you click on the checkboxes, the table with repopulate with the filtered posts, instead of having to click on the filter button.
I found that in order to use ajax with wordpress, you should route it through admin-ajax.php using the wp_ajax_
hook. I added the hooks and changed the form's submission action to admin-ajax.php. Now, when javascript is disabled, the form obviously does not work anymore. I get a 404 because the browser is attempting to display admin-ajax.php.
Is there a way to have a form work with and without javascript turned on using the wordpress ajax hooks?
Update: Ok, so I fixed the 404 error. My url in the form action was incorrect. Functionally it works now without javascript, however the page it displays, www.example.com/wp-admin/admin-ajax.php?action=my_function&color=red&type=ball
obviously is not picking up the styles in my theme. How do I route it back to 'www.example.com/toylist` with the return data from my function?