8

I am currently working on a search page that includes several Select2 dropdowns. The dropdown works great on the first page load, but the issue only occurs when someone searches and then hits the browser back button and returns to the page. The cache values for the dropdowns/inputs are loaded and the issue occurs. All of my other form inputs load the cache completely normally with no issues.

After the "Back button" in their browser is hit, the search page with the Select2 dropdowns loads again, and the "cached" value that they searched for is stored from any entries they previously entered. The cached value is shown correctly for all input methods other than select2 on the page. When the dropdowns with Select2 load, the displayed text reverts back to "All Units" (meaning nothing selected), the placeholder I have set, yet the Select2 value is still set to what they just searched for.

This creates a confusing problem, and forces the user to search for what they previously had selected, with no ability to clear the dropdown.

Here is how the dropdown should look all the time (and how it looks upon first page load)

enter image description here

And here is how the select2 dropdown looks after the user hits the back button and returns to the page

enter image description here

It looks normal at first, but when you expand the dropdown you find the cached value selected but only if you expand the dropdown:

enter image description here

An item is selected (the one they previously selected) but it does not show it is selected in the actual value area, it still says "All Units". There is no way for the user to deselect this value or know it is still there. This leads to the user having to restart the page or clear the cache to be able to "unsearch" the select2 values

Here is my code, any help is much appreciated on this confusing issue.

@Html.DropDownListFor(model => model.UnitID, Model.unitIDL, new { @class = 
 "select2", style = "width: 165px" })

  <script type="text/javascript">
        $(".select2").select2(
            {
                allowClear: true,
                placeholder: "All Units"
            })
    </script>
Eli
  • 533
  • 1
  • 5
  • 24
  • 1
    Hm its gonna be hard to help you with this problem with the given code. Can you try doing some debugging and sharing the results? – Andrew Lohr Feb 14 '19 at 20:20
  • It's difficult to debug this issue due to the fact that its based upon cache. I didn't write the code that is responsible for caching the dropdowns on page return, so thats why I feel pretty lost on this issue. – Eli Feb 14 '19 at 20:41
  • If you are familiar with the dev console in your browser you can look at (in Chrome) Application -> local Storage or Application -> Cookies (not sure which the cache uses, it might be something different) and see how it sets the cache, that might be a good starting point to see what is going on. – Andrew Lohr Feb 14 '19 at 20:46
  • 9
    A little late to the game, but try using `window.onpageshow = function() { };` when initializing select2. – Mark G Dec 13 '19 at 07:09
  • Did you ever fix this? I have the same problem with Chrome, but it works fine in Firefox. – brfox Apr 09 '20 at 06:05
  • Did you ever solve this? I'm having the same issue. – Rafael Tamayo Jun 14 '20 at 01:31
  • Final Edit: @MarkG I wish you would have submitted an actual answer so I could give you credit. Your solution of using the window.onpageshow actually fixed my issue. Thank you! – Eli Sep 29 '20 at 15:03
  • @MarkG Solve problem! – Simone Rossaini Feb 01 '21 at 10:16

1 Answers1

0

Just copy the value of the combobox back in the select2 item:

Here a working example:

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script language="javascript">

// call when loaded (from the cache)
function PageShown()
{
  list = document.getElementsByName('COUNTRY');
  if (list.length > 0) // check we are on the search page and not on the search-result page
  {
  
      combo = document.getElementById('COUNTRY'); // Take the value of the combobox
      if (combo.value != "-1")
        $("select[name='COUNTRY']").val(combo.value).trigger("change");  // https://select2.org/programmatic-control/methods

      combo = document.getElementsByName('PRODUCT')[0]; // No id: use the name
      if (combo.value != "-1")
        $("select[name='PRODUCT']").val(combo.value).trigger("change");
        
  }
}
$(document).ready(function(){
    $(".js-example-basic-single").select2(); // use the class for initializing select2
    // https://stackoverflow.com/questions/17480040/select2-hiding-the-search-box
    // https://select2.org/searching#hiding-the-search-box
    $("select[name='PRODUCT']").select2({ minimumResultsForSearch: -1 });  // No search box shown (too less items)
});

</script>
</head>

<body onpageshow="PageShown()">
<SELECT NAME='COUNTRY' ID='COUNTRY' class="js-example-basic-single" SIZE='1'  style="width: 150px;">
<OPTION VALUE='-1'> -- Select all --</OPTION>
<OPTION VALUE='12204791' >France</OPTION>
<OPTION VALUE='12204721' >Belgium</OPTION>
<OPTION VALUE='12204735' >Netherlands</OPTION>
<OPTION VALUE='12204786' >Germany</OPTION>
<OPTION VALUE='12204744' >Italy</OPTION>
<</SELECT>
<BR><BR>
<SELECT class="js-example-basic-single" NAME='PRODUCT' SIZE='1'  style="width: 150px;">
<OPTION VALUE='-1'> -- Select all --
<OPTION VALUE='Apple' >Apple
<OPTION VALUE='Tomato' >Tomato
<OPTION VALUE='Pear' >Pear
</SELECT>
<BR><BR>
<button onclick="window.location.href='https://google.com';">Search ></button>
<p>
First select items in the comboboxes<br>
Click on the search button<br>
After clicking this button, go back with the back button of the browser
</body>
</html>
vandenberghejeftelenetbe
  • 1
  • 1