Андрей Фролов
Reputation: 15
When add content via innerHTML occur unnecessary scoll to the element
I need to insert some html to node after ajax call in javascript.
I use framework, but it doesn't matter. Important thing - insertion content in ajax callback:
// added filterWrapper to DOM
BX.ajax.get(
'/get_filter_for_diagrams.php',
{
'sessid': BX.bitrix_sessid()
},
function (data)
{
filterWrapper.innerHTML = data;
}
);
After adding content via innerHTML my window scrolls to this element, but I not want this behaviour.
I try make:
window.scrollTo(0,0);
But all the same - scroll to element.
How can I prevent scroll to element?
UPD: generated html
<!-- Final :: Search -->
<div class="main-ui-filter-search main-ui-filter-no-search main-ui-filter-theme-default" id="filter_diagrams_underwriters_search_container">
<input
type="text"
tabindex="1"autofocus=""value=""
name="FIND"
placeholder="Filter"
class="main-ui-filter-search-filter"
id="filter_diagrams_underwriters_search"
autocomplete="off">
<div class="main-ui-item-icon-block">
<span class="main-ui-item-icon main-ui-search"></span>
<span class="main-ui-item-icon main-ui-delete"></span>
</div>
</div>
<!--'start_frame_cache_xIeC97'-->
<script type="text/html" id="filter_diagrams_underwriters_GENERAL_template">
<div class="main-ui-filter-wrapper main-ui-filter-value-required-mode main-ui-filter-theme-default">
<div class="main-ui-filter-inner-container">
<div class="main-ui-filter-sidebar">
<div class="main-ui-filter-sidebar-title">
<h5 class="main-ui-filter-sidebar-title-item">Filters</h5>
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-sidebar-item-container">
<div class="main-ui-filter-sidebar-item main-ui-hide" data-id="tmp_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Current month</span>
<input type="text" placeholder="Filter name" value="Current month" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-current-item main-ui-hide" data-id="default_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Filter</span>
<input type="text" placeholder="Filter name" value="Filter" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-new-filter">
<div class="main-ui-filter-edit-mask"></div>
<input class="main-ui-filter-sidebar-edit-control" type="text" placeholder="Filter name">
</div>
</div><!--main-ui-filter-sidebar-item-container-->
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-field-container">
<div class="main-ui-filter-field-container-list">
</div>
<div class="main-ui-filter-field-add">
<span class="main-ui-filter-field-add-item">Add field</span>
<span class="main-ui-filter-field-restore-items">Restore default fields</span>
</div><!--main-ui-filter-field-add-->
</div><!--main-ui-filter-field-container-->
<div class="main-ui-filter-bottom-controls">
<div class="main-ui-filter-add-container">
<span class="main-ui-filter-add-item">Save filter</span>
<span class="main-ui-filter-add-edit" title="Configure filter"></span>
<span class="main-ui-filter-reset-link">
<span class="main-ui-filter-field-button-item">Reset to default</span>
</span>
</div><!--main-ui-filter-add-container-->
<div class="main-ui-filter-field-preset-button-container">
<div class="main-ui-filter-field-button-inner">
<span class="webform-small-button webform-small-button-blue main-ui-filter-field-button main-ui-filter-find">
<span class="main-ui-filter-field-button-item">Search</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-reset">
<span class="main-ui-filter-field-button-item">Reset</span>
</span>
</div>
</div>
<div class="main-ui-filter-field-button-container">
<div class="main-ui-filter-field-button-inner">
<label class="main-ui-filter-field-button main-ui-filter-save-for-all" for="save-for-all">
<input id="save-for-all" class="main-ui-filter-field-button-checkbox" type="checkbox">
<span class="main-ui-filter-field-button-item">Apply for all users</span>
</label>
<span class="webform-small-button webform-small-button-accept main-ui-filter-field-button main-ui-filter-save">
<span class="main-ui-filter-field-button-item">Save</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-cancel">
<span class="main-ui-filter-field-button-item">Cancel</span>
</span>
</div>
</div>
</div><!--main-ui-filter-bottom-controls-->
</div><!--main-ui-filter-inner-container-->
</div><!--main-ui-filter-wrapper-->
</script>
<!--'end_frame_cache_xIeC97'-->UPD2: after regular expression on remove autofocus (console.log output):
<!-- Final :: Search -->
<div class="main-ui-filter-search main-ui-filter-no-search main-ui-filter-theme-default" id="filter_diagrams_underwriters_search_container">
<input
type="text"
tabindex="1"value=""
name="FIND"
placeholder="Filter"
class="main-ui-filter-search-filter"
id="filter_diagrams_underwriters_search"
autocomplete="off">
<div class="main-ui-item-icon-block">
<span class="main-ui-item-icon main-ui-search"></span>
<span class="main-ui-item-icon main-ui-delete"></span>
</div>
</div>
<!--'start_frame_cache_xIeC97'-->
<script type="text/html" id="filter_diagrams_underwriters_GENERAL_template">
<div class="main-ui-filter-wrapper main-ui-filter-value-required-mode main-ui-filter-theme-default">
<div class="main-ui-filter-inner-container">
<div class="main-ui-filter-sidebar">
<div class="main-ui-filter-sidebar-title">
<h5 class="main-ui-filter-sidebar-title-item">Filters</h5>
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-sidebar-item-container">
<div class="main-ui-filter-sidebar-item main-ui-hide" data-id="tmp_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Current month</span>
<input type="text" placeholder="Filter name" value="Current month" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-current-item main-ui-hide" data-id="default_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Filter</span>
<input type="text" placeholder="Filter name" value="Filter" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-new-filter">
<div class="main-ui-filter-edit-mask"></div>
<input class="main-ui-filter-sidebar-edit-control" type="text" placeholder="Filter name">
</div>
</div><!--main-ui-filter-sidebar-item-container-->
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-field-container">
<div class="main-ui-filter-field-container-list">
</div>
<div class="main-ui-filter-field-add">
<span class="main-ui-filter-field-add-item">Add field</span>
<span class="main-ui-filter-field-restore-items">Restore default fields</span>
</div><!--main-ui-filter-field-add-->
</div><!--main-ui-filter-field-container-->
<div class="main-ui-filter-bottom-controls">
<div class="main-ui-filter-add-container">
<span class="main-ui-filter-add-item">Save filter</span>
<span class="main-ui-filter-add-edit" title="Configure filter"></span>
<span class="main-ui-filter-reset-link">
<span class="main-ui-filter-field-button-item">Reset to default</span>
</span>
</div><!--main-ui-filter-add-container-->
<div class="main-ui-filter-field-preset-button-container">
<div class="main-ui-filter-field-button-inner">
<span class="webform-small-button webform-small-button-blue main-ui-filter-field-button main-ui-filter-find">
<span class="main-ui-filter-field-button-item">Search</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-reset">
<span class="main-ui-filter-field-button-item">Reset</span>
</span>
</div>
</div>
<div class="main-ui-filter-field-button-container">
<div class="main-ui-filter-field-button-inner">
<label class="main-ui-filter-field-button main-ui-filter-save-for-all" for="save-for-all">
<input id="save-for-all" class="main-ui-filter-field-button-checkbox" type="checkbox">
<span class="main-ui-filter-field-button-item">Apply for all users</span>
</label>
<span class="webform-small-button webform-small-button-accept main-ui-filter-field-button main-ui-filter-save">
<span class="main-ui-filter-field-button-item">Save</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-cancel">
<span class="main-ui-filter-field-button-item">Cancel</span>
</span>
</div>
</div>
</div><!--main-ui-filter-bottom-controls-->
</div><!--main-ui-filter-inner-container-->
</div><!--main-ui-filter-wrapper-->
</script>
<!--'end_frame_cache_xIeC97'-->Upvotes: 1
Views: 136
Answers (1)
user1515791
Reputation:
The autofocus attribute will make the control, well, autofocus. Thus the page will scroll to there.
To demonstrate, in this actual page (this SO page), try executing (using dev tools console)
document.getElementsByClassName('js-primary-footer-links')[0].innerHTML = "<input autofocus='' type='text'/>"
VS
document.getElementsByClassName('js-primary-footer-links')[0].innerHTML = "<input type='text'/>"
Is the generated content also under your control? - if not, you can just remove that part from the returned data, before putting it on the page (using innerHTML)
ie
filterWrapper.innerHTML = data.replace('autofocus=""', '');
EDIT: your new code does not trigger the scroll for me anymore, so there is something else then as well. Maybe in the source of your current page, or still something in the framework.
Example with your supplied code (save in test.html and open in browser):
<html>
<head>
<script type="text/template" id="content">
<!-- Put your processed HTML here, for clearity - I did not include it here-->
<!--Your old html did trigger the scroll, your new html doesnt-->
</script>
</head>
<body>
<input type="button" onclick="load()" value="load"/>
<div style="background-color: green; height: 100%"></div>
<div id="diva"></div>
</body>
</html>
Upvotes: 1
Related Questions
- Adding innerHTML using Javascript
- InnerHTML issue
- innerHTML doesn't add HTML elements permanently
- InnerHTML append instead of replacing
- innerHTML inserts only [object HTMLDivElement]
- How to append content in javascript using innerHTML
- Elements redefined while adding content
- jquery append creates extra element
- innerHTML replaces whole document
- prevent auto tag generate in javascript innerHTML