Support archive

No idea how to integrate Low Search with Ajax

arvinsim 24 Jan 2013 08:26 question, complete

I am at a loss on how to implement Ajax in Low Search.

I already perused some answers in stackexchange(second question one is mine)

http://expressionengine.stackexchange...
http://expressionengine.stackexchange...

but their answers are very cryptic, don't show any low search forms and results tag examples and doesn't really help anyone new to implementing Low Search with Ajax.

Does someone have a step-by-step tutorial on how to use Low Search with Ajax?

Replies

1. Low 24 Jan 2013 09:06

   I can show you what approach I'd take, but since Low Search is working correctly, this becomes an implementation question that is beyond the scope of support...
   
   Anyway, my approach:
   
   - If your results template is search/results, create an additional template where you put just the Results tag, for example search/ajax-results.
   - Embed the search/ajax-results inside the search/results template.
   - Use JS to add an event to the Search Form on submit.
   - When the form is submitted, use JS to change the 'result_page' value from search/results to search/ajax-results.
   - Submit the form using Ajax, using the form's action="" as the URL and POST all the form values along with it.
   - The results should now be just the content of the embedded template, so inject that into the page.

2. arvinsim 24 Jan 2013 09:23

   Ok...will try your approach and report back what I find out.

3. arvinsim 25 Jan 2013 03:00

   
   When the form is submitted, use JS to change the 'result_page' value from search/results to search/ajax-results
   

   
   
   - I assume that means that the results_page parameter will be defined as a field(hidden text field in my case).
   
   - It seems that no matter what I do, my Ajax call always get redirected(302 Found).
   Looking around, it may be the cause of the ACT=31 POST variable but not sure.
   
   - Is your solution dependent on the jquery form plugin? Because I am not using it.

4. Low 25 Jan 2013 08:20

   Very well. Check this gist: https://gist.github.com/4632695
   
   I tested that code, using just the jQuery library (no plugins), and it worked.

5. arvinsim 31 Jan 2013 07:34

   Sorry for the late reply but I feel that I need to respond that to say that it is now working and why.
   
   The reason why your steps did not work for me?
   
   I set the value of result_page in the a JS variable in the Javascript code that handles the code.
   
   I don't know why but using JS to set the result_page field value in the actual field itself on page load( $(document).ready() ) in the DOM made it work. Not sure why but it made it work.
   
   Thanks, Low!