I have a page that is tall enough that it scrolls vertically. When it finishes loading, the browser automatically scrolls to the bottom of the page where a cfgrid element lives. It happens in IE, Chrome and Firefox.
I've narrowed the cause down to the JavaScript that the ColdFusion 11 server adds to the top of the page. If I disable scripts in the browser, the page doesn't automatically scroll to the bottom.
Adding window.scrollTo(0,0) to the body onload doesn't work. Whatever JS is scrolling to the bottom happens after the onload event. I haven't tried jQuery's .ready() yet; hoping there is a fix.
Has anyone else seen this and know of a fix or workaround?
Thanks
Here's my code
<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>
Here's the code the browser sees:
<!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>
Thanks for your suggestions, @cfqueryparam. But I found that the solution is to add the attribute selectOnLoad="false" to the cfgrid tag. Its default value in CF11 is "true". I'm not sure about CF10, but in CF9 is seems to default to "false".