menu

Questions & Answers

How to send PHP variable to AJAX and then update it after success?

Background

I am creating a search page with products divided into different pages (8 products per page in this case). When the page loads I fetch all products from the database with a basic SQL query, which I then send to my own function to create the HTML card for each product:

global $wpdb, $CORE;

$SQL = $GLOBALS['base_query'];
$posts_from_query = $wpdb->get_results($SQL , OBJECT);
$CORE->create_output(posts_from_query, 1);

This puts the first 8 products on page 1 as expected.

I also have a search functionality and a "pagination" functionality to be able to go to page 2, 3 etc. Search takes some argument specified in a form and sends it to PHP via AJAX to make a new database query from the input, create the new html output and then send back to JS which prints it on the page. This works fine and it shows the new search results as expected.

Problem

The problem arises when I want to go to page 2. I would want to be able to use the already existing $posts_from_query which holds all the results, without having to make another database query/call. But how can I send it back to PHP after a search has been made to update it?

What I tried

I could run the same query again when pressing page 2 (maybe with OFFSET to save some time) and print product 9 to 16. However, I want to have as few database queries as possible, and this would also slow down between changing pages which is not desireable.

I also tried to have $posts_from_query as a global variable which is defined when the page loads. But when I send a new search via AJAX and try to update the global $posts_from_query I see that it has been reset and it can't be used like that. After reading a bit I found that you can't use global variables with AJAX.

Questions

  1. Can I somehow send the variable $posts_from_query via AJAX when a search is made, update it in PHP with the new posts, send it back to JS, and then somehow update it on the page so that I can use the updated version again?
  2. Am I missing something obvious that can solve this much easier (probably)?
Comments:
2023-01-19 23:01:14
The AJAX response contains anything you send back from the PHP code which handled the request. That can contain any data you want. And the client-side code can use that data in whatever way you want. So I guess, overall, the answer is... Yes, you can send data back to JS in an AJAX response and update the page with that new data. What have you tried and what isn't working as expected?
2023-01-19 23:01:14
@David, I know that, I am sending back the new search output for example. And I can send back the new $posts_from_query there too. Then later on when I have search I want to click to page 2. This is done by another JS call to a JS function. Now how do I retrieve the new $posts_from_query when clicking on page 2? Sorry if question was unclear
2023-01-19 23:01:14
It sounds like you may be misunderstanding the difference between server-side code and client-side code. In your JavaScript you don't necessarily "retrieve the new $posts_from_query". Whatever information was returned from the AJAX operation, the JavaScript code would need to retain the information somewhere. For example, in a variable. Then, when you need to reference that information, you'd read it from wherever you stored it. If you have a minimal reproducible example which demonstrates a problem, that would help. Currently this is all hypothetical, and hypothetically you can use your data however you like.
2023-01-19 23:01:14
@David, I have posts data in PHP. On search I send it to PHP via AJAX, there I modify it and send it back. But how do I access the modified variable from HTML/PHP again? I can't use a global variable with AJAX apparently.
2023-01-19 23:01:14
"there I modify it and send it back" - Your JavaScript code can then do whatever you like with the data that was returned to it. "how do I access the modified variable from HTML/PHP" - You either store the data client-side to use later (e.g. in a variable, or anywhere else you like), or you make another AJAX request to fetch the data from the server (which would be pretty strange, since the server already responded with that data, so it makes more sense to just keep it locally). "I can't use a global variable with AJAX" - Yes you can. That might not be the best approach though.
2023-01-19 23:01:14
@David, I think the best would be to print the html from a JS call then. Thank you for elaborating, this client-/serverside variable sending is a headache to me :P
Answers(0) :