Страница автоматически прокручивается в cfgrid
У меня есть страница, которая достаточно высока, чтобы она прокручивалась вертикально. Когда загрузка заканчивается, браузер автоматически прокручивает страницу вниз, где находится элемент cfgrid. Это происходит в IE, Chrome и Firefox.
Я сузил причину до JavaScript, который сервер ColdFusion 11 добавляет в начало страницы. Если я отключаю скрипты в браузере, страница автоматически не прокручивается вниз.
Добавление window.scrollTo(0,0) к телу onload не работает. Все, что JS прокручивает до дна, происходит после события onload. Я еще не пробовал jQuery.ready(); надеясь, что есть решение.
Кто-нибудь еще видел это и знает об исправлении или обходном пути?
Спасибо
Вот мой код
<cfoutput>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
0<br>
1<br>
2<br>
2<br>
3<br>
3<br>
4<br>
5<br>
5<br>
6<br>
7<br>
8<br>
9<br>
<!-- Lines deleted that push the cfgrid below the bottom of the screen -->
<cfquery datasource="#application.datasource#" name="testquery">
select MNU_MENU_ID, MNU_MENU from #application.db_owner#.menu
</cfquery>
<cfform name="assays">
<cfgrid name = "FirstGrid" title="test" format="html" height="310" width="500"
stripeRows="true" preservepageonsort="true"
query = "testquery">
<cfgridcolumn name="MNU_MENU_ID" header="ID" width="25" />
<cfgridcolumn name="MNU_MENU" header="Menu" width="200" />
<!--- Hidden Columns --->
</cfgrid>
</cfform>
<script>
setTimeout(function(){ window.scrollTo(0,0); }, 4000);
//alert('scroll attempted');
</script>
</body>
</html>
</cfoutput>
Вот код, который видит браузер:
<!DOCTYPE html>
<html>
<head><script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml="<img alt=' ' src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath="";
_cf_ajaxscriptsrc="/CFIDE/scripts/ajax";
_cf_jsonprefix='//';
_cf_websocket_port=8577;
_cf_flash_policy_port=1243;
/* ]]> */</script><script type="text/javascript" src="/CFIDE/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-all.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/DataView.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/SplitButton.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfgrid.js"></script>
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/ext/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/cf/cf.css" />
<script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
<meta charset="ISO-8859-1">
<title>Test</title>
<script type="text/javascript">/* <![CDATA[ */
ColdFusion.Ajax.importTag('CFGRID');
/* ]]> */</script>
<script type="text/javascript">/* <![CDATA[ */
ColdFusion.objectCache['FirstGrid'] = new ColdFusion.Grid.Actions('cfgrid148239339981943');
_cf_GRIDTAG_initAjaxGrid_148239339981944=function()
{
var _cf_gridColModel = [{header:'ID','colName':'MNU_MENU_ID',id:'FirstGrid_MNU_MENU_ID','name':'MNU_MENU_ID',dataIndex:'MNU_MENU_ID',menuDisabled:false,sortType:'asFloat',sortable:true,flex:1,width:25},{header:'Menu','colName':'MNU_MENU',id:'FirstGrid_MNU_MENU','name':'MNU_MENU',dataIndex:'MNU_MENU',menuDisabled:false,sortType:'asUCString',sortable:true,width:200},{header:'CFGRIDROWINDEX','colName':'CFGRIDROWINDEX',id:'FirstGrid_CFGRIDROWINDEX','name':'CFGRIDROWINDEX',dataIndex:'CFGRIDROWINDEX',menuDisabled:false,sortType:'asFloat',sortable:true,hidden:true}];
var _cf_gridData = [[1,'Home',1],[2,'Compounds',2],[3,'Dashboard',3],[4,'Authorize',4],[5,'Reports',5],[6,'Administration',6],[7,'Help',7],[8,'Dataload',8],[9,'Logout',9],[17,'cmpIdentification',10],[18,'cmpAcquisition',11],[19,'cmpRegistration',12],[20,'cmpReview',13],[21,'cmpChemistry',14],[23,'stdInVitro',15],[10,'adminAssays',16],[11,'adminStudies',17],[12,'adminSubmitters',18],[13,'adminLabs',19],[14,'adminAnnouncements',20],[15,'adminUsers',21],[24,'dashProgramActivity',22],[25,'dashDashboard',23],[26,'dashStructure',24],[27,'dashResupply',25],[28,'dashInventory',26],[29,'dashTDPComments',27]];
Ext.define('cf_gridmodel', { extend: 'Ext.data.Model', fields: _cf_gridColModel,idProperty : 'CFGRIDROWINDEX' });
var _cf_gridDataModel = Ext.create('Ext.data.Store', { model : 'cf_gridmodel', data: _cf_gridData,proxy: { type: 'memory',reader : new Ext.data.reader.Array({id:_cf_gridColModel.length-1}, _cf_gridColModel)}});
ColdFusion.Grid.init('FirstGrid','__CFGRID__assays__FirstGrid','assays',false,false,true,false,'MNU_MENU_ID',_cf_gridColModel,_cf_gridDataModel,500,310,true,'#cfgrid148239339981943 .x-grid-cell-FirstGrid_MNU_MENU_ID{color:#0B333C;} #cfgrid148239339981943 .x-grid-hd-FirstGrid_MNU_MENU_ID{color:#0B333C;} #cfgrid148239339981943 .x-grid-row-selected .x-grid-cell-FirstGrid_MNU_MENU_ID{background-color:#7FCDFE !important;} #cfgrid148239339981943 .x-grid-cell-FirstGrid_MNU_MENU{color:#0B333C;} #cfgrid148239339981943 .x-grid-hd-FirstGrid_MNU_MENU{color:#0B333C;} #cfgrid148239339981943 .x-grid-row-selected .x-grid-cell-FirstGrid_MNU_MENU{background-color:#7FCDFE !important;} #cfgrid148239339981943 .x-grid-cell-FirstGrid_CFGRIDROWINDEX{color:#0B333C;} #cfgrid148239339981943 .x-grid-hd-FirstGrid_CFGRIDROWINDEX{color:#0B333C;} #cfgrid148239339981943 .x-grid-row-selected .x-grid-cell-FirstGrid_CFGRIDROWINDEX{background-color:#7FCDFE !important;} #cfgrid148239339981943 .x-grid-row .x-grid-cell-FirstGrid_MNU_MENU_ID{background-color:null} #cfgrid148239339981943 .x-grid-row-alt .x-grid-cell-FirstGrid_MNU_MENU_ID{background-color:null} #cfgrid148239339981943 .x-grid-row .x-grid-cell-FirstGrid_MNU_MENU{background-color:null} #cfgrid148239339981943 .x-grid-row-alt .x-grid-cell-FirstGrid_MNU_MENU{background-color:null} #cfgrid148239339981943 .x-grid-row .x-grid-cell-FirstGrid_CFGRIDROWINDEX{background-color:null} #cfgrid148239339981943 .x-grid-row-alt .x-grid-cell-FirstGrid_CFGRIDROWINDEX{background-color:null} ',10,true,true,null,false,null,'test',null,null,{'appendKey':true,colInfo:[null,null,null]},null,null,null,null);
Ext.form.ComboBox.prototype.triggerAction = 'all';
};ColdFusion.Event.registerOnLoad(_cf_GRIDTAG_initAjaxGrid_148239339981944);
/* ]]> */</script>
<script type="text/javascript">
<!--
_CF_checkassays = function(_CF_this)
{
//reset on submit
_CF_error_exists = false;
_CF_error_messages = new Array();
_CF_error_fields = new Object();
_CF_FirstErrorField = null;
//display error messages and return success
if( _CF_error_exists )
{
if( _CF_error_messages.length > 0 )
{
// show alert() message
_CF_onErrorAlert(_CF_error_messages);
// set focus to first form error, if the field supports js focus().
if( _CF_this[_CF_FirstErrorField].type == "text" )
{ _CF_this[_CF_FirstErrorField].focus(); }
}
return false;
}else {
return true;
}
}
//-->
</script>
</head>
<body>
0<br>
1<br>
2<br>
2<br>
3<br>
3<br>
4<br>
5<br>
5<br>
6<br>
7<br>
8<br>
9<br>
<!-- Again, lines deleted that push the cfgrid below the bottom of the screen -->
<form name="assays" id="assays" action="/index.cfm" method="post" onsubmit="return _CF_checkassays(this)">
<div id="cfgrid148239339981943" style="border: 1px solid #cccccc; overflow: hidden;height:310px;">
</div> <div><input type="hidden" name="__CFGRID__assays__FirstGrid" value="" /></div>
</form>
</body>
</html>
2 ответа
Спасибо за ваши предложения, @cfqueryparam. Но я обнаружил, что решение состоит в том, чтобы добавить атрибут selectOnLoad="false" к cfgrid тег. Его значение по умолчанию в CF11 "true". Я не уверен насчет CF10, но в CF9, кажется, по умолчанию "ложь".
В будущем, пожалуйста, предоставьте прямой код, чтобы пользователи могли работать именно с тем, с чем вы работаете. Используя CF9, я не мог повторить поведение, но, как вы сказали, вы используете CF11.
Это код, который вы написали, или код, который вы унаследовали, или код, который вы скопировали откуда-то (например, учебник)? Вы уверены, что это сгенерированный CF javascript вызывает хаос, а не javascript, предназначенный для фокусировки сетки?
Если это то, что вы не можете отследить, а у кого-то нет лучшего решения, это может сработать. В настоящее время он установлен на 3000 (3 секунды), но меньшее время должно работать лучше (и быть менее раздражающим для ваших пользователей).
Я бы поместил его после вашей cfgrid.
<script>
setTimeout(function(){ window.scrollTo(0,0); }, 3000);
</script>
Вы также можете найти решение с помощью этого JavaScript.
var scrolled = 0;
window.onscroll = function() {
if (!(scrolled)) {
scrolled = 1;
setTimeout(function(){ window.scrollTo(0,0); }, 300);
}
};
Но я бы разместил его только на странице вашей cfgrid, а не на вашем сайте. Хороший способ раздражать людей в противном случае.