0

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?

1
  • 1
    Don't change the action attribute of the form to admin-ajax.php. Instead trigger the ajax request with javascript. This way you will have your form working with and without javascript.
    – cybmeta
    Sep 23, 2013 at 17:34

1 Answer 1

2

You can change the form action to admin-ajax.php?action=your_action and this will work, but it's not best practice.

The ajax submition should be added via javascript, not by changing the form action (also your js function should prevent the form from submiting normally, returning false - see here an example: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/), and php handling of the data (on the page the form action is poing to) should be present as fallback.

1
  • Hmm, it's Monday morning. I just did that. I must have changed the form action when I was first attempting to use the ajax hooks before I got it working and never realized that the html form action wasn't doing anything with javascript enabled and ajax submit working. Thanks!
    – biggles
    Sep 23, 2013 at 17:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.