Good morning,
I am looking for a solution to the following problem. When a user edits an item in a list and then saves/closes the item, the page reloads back at the top. I would like the page to reload where the scroll position was when the user initially clicked on the edit button to edit the list item. Is this something that can be done with Jquery or Javascript, and if so, would anyone happen to have any code they wouldn't mind sharing? Thanks in advance.
I had a similar requirement for a client, albeit it was to maintain the state of a clicked heading in a Content Query Web Part. The key is to use localStorage.
You can find a primer on it here.
You could easily modify this code to your environment by locating the clicked item and getting its offset position...something like element.getBoundingClientRect().top for the top (or y) position and element.getBoundingClientRect().left for the left (or x) position.
$(function() {
// automatically collapse all data view list items
$("li.dfwp-item").find("ul.dfwp-list").hide();
// make sure the groupheader has a consistent data-id attribute and looks 'clickable'
$('.groupheader').each(function(index) {
$(this).attr('data-id', index);
$(this).css('cursor', 'pointer');
getValueFromStorage(this);
if(this.classList.contains('is-opened')) {
$(this).next("ul.dfwp-list").show();
} else {
$(this).next("ul.dfwp-list").hide();
}
});
$(".groupheader").on("click", function() {
if(!this.classList.contains('is-opened')) {
this.classList.add('is-opened');
// add the current groupheader element data-id to localStorage
addSectionToStorage(this);
} else {
this.classList.remove('is-opened');
// remove the item from localStorage
removeValueFromStorage(this);
}
// toggle children list items
$(this).next("ul.dfwp-list").slideToggle(300);
});
// set item in localStorage
function addSectionToStorage(el) {
var id = el.getAttribute('data-id');
if(!localStorage.getItem(id)) {
localStorage.setItem(id, Math.random().toString(36).substring(2) + (new Date()).getTime().toString(36));
}
}
// remove the item from localStorage
function removeValueFromStorage(el) {
var id = el.getAttribute('data-id');
if(id) {
localStorage.removeItem(id);
}
}
function getValueFromStorage(el) {
var arr = [];
var id = el.getAttribute('data-id');
for(var i = 0, len = localStorage.length; i < len; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
arr.push({
key: key,
value: value
});
}
arr.filter(function(item) {
return item.key === id;
}).map(function(group) {
if(group.key === id) {
el.classList.add('is-opened');
}
});
}
});
`
