Rails - Back button duplicating elements

user_7429535 0
Viewed 173

I've come across an issue where a user can go to a certain page, go to a new page, press the chrome back button (happens with all major browsers) and some elements will be duplicated.

The elements in question come from JavaScript within a partial view I am rendering as part of that page.

I have seen some people having this issue while using turbolinks, however I don't have that installed so I am not sure what is causing this issue.

I have tried putting bindings in Chrome dev console on the JavaScript that is run to create these elements, however on Chrome back button press, it doesn't trigger, so I'm not sure why they are being duplicated.

Below is what I'm doing to create the elements that are being duplicated:

theFieldset = document.getElementsByTagName("fieldset")[0];
editForm = document.getElementById("edit_pattern");
theFieldset.innerHTML += "<div class='form-group control-group belongs_to_association_type pattern_field ' id='pattern_html_block_id_field'><label class='col-sm-2 control-label' for='pattern_pattern_html_block'>Attach template</label><div class='controls col-sm-10' data-children-count='2'><select data-filteringselect='true' placeholder='Search' name='email[pattern_id]' id='pattern_pattern_html_block' style='display: none;'><option value=''></option></select><span class='help-block'>Optional. </span></div></div><div class='form-group control-group belongs_to_association_type pattern_field ' id='pattern_pattern_field' style='display:none'><label class='col-sm-2 control-label' for='currentTemplate'>Current template</label><div class='controls col-sm-10' data-children-count='2'></div><br><label class='col-sm-2 control-label' for='pattern_pattern_html_block'>Attach template</label><div class='controls col-sm-10' data-children-count='2'></div></div>";

Edit: Neither turbolinks nor hotwire is installed. Have been unsuccessful in trying to individually create elements and adding them to the fieldset rather than adding in bulk via innerHTML or insertAdjacentHTML.

html javascript
1 Answers

I would use theFieldSet.appendChild(div) instead of fieldSet.innerHTML here is an example of the code!

var theFieldset = document.getElementsByTagName("fieldset")[0];
var editForm = document.getElementById("edit_pattern");
var div = document.createElement('div');
div.className = 'form-group control-group belongs_to_association_type pattern_field ';
div.id='pattern_html_block_id_field';
var label = document.createElement('label');
label.className = 'col-sm-2 control-label';
label.id = 'theLabel';

var div2 = document.createElement('div');
div2.className = 'controls col-sm-10';
div2.id = 'div_2';
var selectE = document.createElement('select');
selectE.id = 'pattern_pattern_html_block';
var option = document.createElement('option');
option.value = '';
var spanE = document.createElement('span');
spanE.className = 'help-block';
var div3 = document.createElement('div');
div3.className = 'form-group control-group belongs_to_association_type pattern_field ';
div3.id = 'pattern_pattern_field';
var labelEL = document.createElement('label');
labelEL.className = 'col-sm-2 control-label';
labelEL.id = 'labelElement2';
var div4 = document.createElement('div');
div4.id = 'DivEl4'
div4.className = 'controls col-sm-10'
var breakPoint_ = document.createElement('br');
breakPoint_.id = 'breakPoint';
var label_el2 = document.createElement('label')
label_el2.id = 'LabelEl3';
label_el2.className = 'col-sm-2 control-label';
var div5 = document.createElement('div')
div5.className = 'controls col-sm-10';
div5.id = 'DivEl5';

div[0].appendChild(label);
div2[0].appendChild(selectE);
selectE[0].appendChild(option);
spanE[0].appendChild(div2);
document.getElementByTagName("[div]'s parent")[0].appendChild(div3);
div2[0].appendChild(span);
div3[0].appendChild(labelEL);
div3[0].appendChild(breakPoint_);
div3[0].appendChild(label_el2);
div3[0].appendChild(div5

document.getElementById('LabelEl3').attr('for','pattern_pattern_html_block');
document.getElementById('LabelEl3').text('Attach template');
document.getElementById('DivEl5').attr('data-children-count','2');
document.getElementById('DivEl4').attr('data-children-count','2');
document.getElementById('labelElement2').attr('for','currentTemplate');
document.getElementById('labelElement2').text('Current template');
document.getElementById('pattern_pattern_field').css('display','none');
document.getElementsByClassName('help-block').text('Optional. ');
document.getElementById('select_element').attr('name','email[pettern_id]');
document.getElementById('pattern_pattern_html_block').attr('placeholder','Search');
document.getElementById('pattern_pattern_html_block').css('display', 'none');
document.getElementById('theLabel').attr('for','pattern_pattern_html_block');
document.getElementById('theLabel').text('Attach template');
document.getElementById('div_2').attr('data-children-count','2');

I hope this works I spent a long time on it I know it is messy but it should work

user_173892600
Related