1

I have a page with a form that gives a user the option to filter a list of objects (programs) by selecting options. For example, they could select the option architecture to show only the programs which contain that subject. An AJAX-request is sent to the server, which then returns the results. So far, everything works.

My problem: in some browser when someone clicks to go to another page and then goes back to the page where the form is, the results are reset, although the form selection(s) are still visible. In Chrome this is a problem, whereas in Firefox this does not happen. On this page you can see a live example.

My JavaScript AJAX post-request looks like this: 

let sendQuery = () => {

    let programsList = document.getElementById('programs-list');

    axios.post('/programs/getByFilter', filter )
        .then(function (response) {
            programsList.innerHTML = response.data;
        })
        .catch(function (error) {
            console.log(error);
        });
}

And then in PHP (I use Symfony):

/**
 * @Route("/getByFilter", name="program_get_by_filter")
 */
public function returnProgramsByFilter(Request $request, SearchHelper $searchHelper)
{
    $jsonFilter = $request->getContent();
    $filter = json_decode($jsonFilter, true);

    // the query is done here. 
    $programs = $searchHelper->findByFilter($filter);

    return $this->render('program/programs_ajax.html.twig', [
            'programs' => $programs ]);
}

Now I have looked for similar questions and found this one and this one, but I haven't been able to solve the problem. Initially I tried to send the request as a GET-request instead of a POST-request, but the data I send is JSON and I did not manage to make it work. I am not really sure if that has to do with the JSON or not. My understanding of JS is really poor. Then I tried with a session variable like so:

    $jsonFilter = $request->getContent();
    $filter = json_decode($jsonFilter, true);

    $session->set('filter', $filter);

And then:

if($session->has('filter')){
        $programs = $searchHelper->findByFilter($session->get('filter'));
    } else {
        $programs = $programRepository->findAll();
}

This does not really work either because the original options will be overwritten when going back and making a new selection. Also, with my JS I show the current filters that are being used and the number of results. That's gone too.

Is there a JS solution or should I try to fix this in PHP?

Update:

I have been able to set filter as a cookie every time an ajax call is made by making it a string with JSON.stringify(filter) and then I get it and use it with:

// Getting the cookie, parsing it and running the query.
var filterCookie = getCookie('filter');
if (filterCookie) {
    var objectCookieFilter = JSON.parse(filterCookie);
    let programsList = document.getElementById('programs-list');

    axios
        .post('/programs/getByFilter', objectCookieFilter )
        .then(function (response) {
            programsList.innerHTML = response.data;
        })
        .catch(function (error) {
            console.log(error);
        });
}

This will re-run the last query that was set in the cookie. The problem that remains though is that all the filter-badges are set on a change event of the checkboxes and I cannot figure out how to show them based on the cookie (or perhaps some other way?)

Dirk J. Faber
  • 4,360
  • 5
  • 20
  • 58
  • With both FF and Chrome I am seeing the selection under Subjects being reset when going back to the programs page. That said you appear to be getting the HTML associated with the `programs-list` ID but that covers the list of programs not the filters which I think is what you're talking about. The filters are in the `div` with an ID of `filters`. – Dave Mar 12 '19 at 11:47
  • Each of the filters and their values appear to have their own ID so I would go through those to detect which ones are checked, stash those, and then show them checked again when going back to the programs page. – Dave Mar 12 '19 at 11:48
  • @Dave, somehow in my FF I have no problem. Considering your solution, how would you do that? I tried setting all the filters (which basically are all the checked IDs) in a session variable, but that still gives me problems. – Dirk J. Faber Mar 12 '19 at 13:14
  • If your HTML is built dynamically you would have to check each of those IDs against what you stashed in the session and "check" them as needed. Personally I would probably create a simple array with the IDs of the boxes that are checked so I could use the `in_array` function to determine whether or not to have them checked again when rendering the page. – Dave Mar 12 '19 at 13:17

0 Answers0