jquery-pjax icon indicating copy to clipboard operation
jquery-pjax copied to clipboard

Textarea and select value isn't preserved when going back/forward

Open the-ress opened this issue 10 years ago • 2 comments

  1. Have a page with textarea and/or select element
  2. Manualy change the value
  3. Go back and forward (using PJAX)
  4. As the content is loaded from PJAX cache, the manual changes are lost.

Input element works correctly, probably because its value doesn't depend on other DOM nodes.

The solution I found is to set each textarea value as its contents before cloning. For select it's similar, just with the 'selected' attribute.

function cloneContents(container) {
  // Preserve textarea values
  var textarea = findAll(container, "textarea");
  textarea.text(function(i, text){return textarea[i].value});

  // Preserve select values
  findAll(container, "select").each(function(i, elem){
    elem = $(elem);
    var values = $(elem).val();
    elem.find('option[selected]').attr('selected', false);
    elem.find('option').filter(function(){
      return ($.inArray(this.value, values) !== -1);
    }).attr('selected', true);
  });

  var cloned = container.clone()
  //...

the-ress avatar Apr 11 '15 02:04 the-ress

:+1: thanks for the answer. This should be documented more in the README. That some elements' states are not preserved such as <select>.

It would be better if have an out of the box solution as this behavior is expected to just work.

westoque avatar May 24 '15 09:05 westoque

+1

jinmatt avatar Jul 08 '15 12:07 jinmatt