page automatically scrolls to cfgrid

Question

page automatically scrolls to cfgrid

493 Views Asked by user1286322 At 20 October 2024 at 12:55

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="&#x2f;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>

Original Q&A

There are 2 best solutions below

Regular Jo On 11 December 2014 at 21:30

In the future, please provide direct code so that users here can work with exactly what you're working with. Using CF9, I couldn't replicate the behavior but like you said, you're using CF11.

Is this code you wrote, or code you inherited, or code you copied from somewhere (like a tutorial)? Are you sure it's CF-generated javascript causing the havoc and not a javascript designed to focus the grid?

If it's something you can't trace, and someone else doesn't have a better solution, this may work. It's currently set to 3000 (3 seconds), but a lower time should work better (and be less annoying to your users.

I would place it after your cfgrid.

<script>
  setTimeout(function(){ window.scrollTo(0,0); }, 3000);
</script>

You might also find a solution with this javascript.

var scrolled = 0;
window.onscroll = function() {
    if (!(scrolled)) {
        scrolled = 1;
        setTimeout(function(){ window.scrollTo(0,0); }, 300);
    }
};

But I'd place it only in your cfgrid's page, not across your site. Good way to annoy people otherwise.

**user1286322** · Accepted Answer

user1286322 On 15 December 2014 at 13:44 BEST ANSWER

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".

page automatically scrolls to cfgrid

There are 2 best solutions below

Related Questions in COLDFUSION

Related Questions in CFGRID

Trending Questions

Popular # Hahtags

Popular Questions