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

[the-ress]

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()
  //...

[westoque]

👍 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.

[jinmatt]

+1