page automatically scrolls to cfgrid - coldfusion
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>
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.
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".
Related
in HTML Call href="#" automatically?
Can the following href="#" be called automatically? <a id="loadBtn" href="#">Do stuff</a></p> Thanks! (Update) In the following facebook gallery launcher: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script> <link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css"> <script type="text/javascript"> $(document).ready(function () { $('#loadBtn').click(function () { $('#albumsContainer').getFacebookAlbums({ appId : 'ID', onImageSelected : function (data) { alert("Your facebook image is located at " + data); window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data; } }) return false; }); }); </script> <style type="text/css"> html, body { font-family: Arial, _sans; font-size: 0.8em; } </style> </head> <body> <p><a id="loadBtn" href="#">Get photo</a></p> <div id="albumsContainer"></div> </body> </html> Essentially to get to the action faster rather than having msc bits of text to click first.
you can set href attribute with whatever value you want as per below code: $('#loadBtn').attr('href','#');
Not sure whether the href='#' is just for example purposes or what you're putting in your final code. (1) If you want to scroll to the top of the page, you can either use $('body').scrollTop(0) or animate it a bit with something like $('html, body').animate( {scrollTop : 0 }, 200); (If you want to animate it, just attach it to #loadBtn's click event and be sure to return false, so the anchor won't jump to the top and override your animation.) If you want, you can also set window.location.hash so the hash location will be recorded. (2) If you want to simulate a click on the link, you can use .trigger(), e.g.: $('#loadBtn').trigger('click');
I think following code will work for you: $("#loadBtn").ready(function(){ $(this).click(); }); Also try this in your onload function: document.getElementById('yourLinkID').click(); // Automatically href will be called
Thanks for your pointers. It lead me to the idea of just rearranging the javascript so that the code was executed without need to click anything: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script> <link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css"> <style type="text/css"> html, body { font-family: Arial, _sans; font-size: 0.8em; } </style> </head> <body> <!--p><a id="loadBtn" href="#">Get photo</a></p--> <div id="albumsContainer"></div> <script type="text/javascript"> $('#albumsContainer').getFacebookAlbums({ appId : 'ID', onImageSelected : function (data) { alert("Your facebook image is located at " + data); window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data; } }) </script> </body> </html>
how to reload a list WinJS
I want to create a list which dinamically grows after an event (take a shoot) I mean adding each picture on real time to the list, this is my method... //Invoke the camera capture UI for snapping a photo function imageCapture() { ... //Creates the array, datalist and the namespace for making this data public if (dataArray == null) { dataArray = new Array(); } dataArray[captureCount] = { title: capturedItem.name, id: "img" + captureCount, picture: photoBlobUrl }; var dataList = new WinJS.Binding.List(dataArray); var publicMembers = { itemList: dataList }; WinJS.Namespace.define("DataExample", publicMembers); } And this is the HTML page which loads the content <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <title>eCamera</title> <!-- Referencias de WinJS --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- Referencias de eCamera2 --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body > <div id="content"> <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"> <div style="width: 150px; height: 100px;"> <!-- Displays the "picture" field. --> <img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" /> <div> <!-- Displays the "title" field. --> <h4 data-win-bind="innerText: title"></h4> <!-- Displays the "id" field. --> <h6 data-win-bind="innerText: id"></h6> </div> </div> </div> <div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), itemsDraggable: true, itemsReorderable: true }"></div> </div> </body> </html> If I load all the content in a fixed dataArray at first it works perfect, but dinamically adding elements and setting it all each time I take a picture so far doesn't work, how to make it work??? thanks in advance for the support
The app should not create new list each time. Use the WinJS.Binding.List.push method to append or splice can be used to insert. Since the list is observable, UI will autoupdate on changes (delete/add) to the list.
How to run multiple versions of Jquery in one HTML [duplicate]
This question already has answers here: Can I use multiple versions of jQuery on the same page? (8 answers) Closed 9 years ago. I was wondering if someone could tell me if it is possible to run multiple versions of jquery in one html file? i.e. I have 6 divs each dive contains a different jquery plugin. The first plugin runs on the latest jquery. The second powered by an older version and so forth. I tried to implement all of these into one html, but as soon as I implement script 2 underneath, script 1, then #1 doesnt work anymore, but #2 does. As soon as I implement #3 underneath #2, then #3 works and everything above breaks. Is there a specific way to do this? I have tried applying the noConflict code, but then the script which I assign it to, stops working. Unless I did it wrong. I have though about using if statements to say, if var=plugin 1 gets clicked, the cancel all other jquery and only play jquery for that particular plugin. And so forth for all the other plugins. But I am not sure if this will work. I have also thought about using a seperate $(document).ready(){}; for each plugin, but again not sure if this will work. Is there anyone who knows how I can solve this problem? I have been battling this beast for the past 3 days & nights adn will for ever be in your debt. ps:I didn't supply any code cause it's just so much, and a little all over the place. I can if you would like me to. Thanks <!DOCTYPE html> <html> <head> <!-- jQuery --> <script src="jquery191.js"></script> <!-- easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- liteAccordion js --> <script src="js/liteaccordion.jquery.js"></script> <script src="js/datepicker.js"></script> <script ></script> <script ></script> <script ></script> <script ></script> <!-- liteAccordion css --> <link href="css/liteaccordion.css" rel="stylesheet" /> <!-- liteAccordion js --> <script type="text/javascript"> $(document).ready(function() { $('#div1').liteAccordion({ onTriggerSlide : function() { this.find('figcaption').fadeOut(); }, onSlideAnimComplete : function() { this.find('figcaption').fadeIn(); }, autoPlay : true, pauseOnHover : true, theme : 'stitch', rounded : true, enumerateSlides : true }).find('figcaption:first').show(); <!-- date picker js --> $('#trip input#leavedate, #trip input#returndate').datepicker({ dateFormat: 'D, M d, yy', showOn: 'button', buttonImage: 'calendar.gif', buttonImageOnly: true }); // format: Thurs, Jan 31, 2008, only show when the user clicks the calendar }); </script> // datepicker <link rel="stylesheet" href="ui.datepicker.css"/> <style type="text/css"> body { font-family: verdana, arial, sans-serif; color: white; font-size: 0.8em; } #trip{ background-color: black; width: 500px;} #trip fieldset { border-width: 1px; width: 470px; } #trip .fields { padding: 25px; margin-bottom: 20px; } #trip div { clear: both; } #trip label { float: left; width: 165px; } #trip input { float: left; width: 200px; } #trip .ui-datepicker-trigger { float: left; width: 16px; } </style> // datepicker <script src="jq.js"></script> <script type="text/javascript"> var jQuery_1_2_6 = $.noConflict(true); </script> <script language="JavaScript" src="jq.date.js"></script> <script language="JavaScript"> </script> // Style switch <link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="styleswitch.js"></script> <script src="/mint/?js" type="text/javascript"></script> </head> <body> <div id="div1"> <ol> <li> <h2><span>Slide One</span></h2> <div><p><img src="img-one/1.jpg">HELLO HELLOHELLOHELLOHELLO</p></div> </li> <li> <h2><span>Slide Two</span></h2> <div></div> </li> <li> <h2><span>Slide Three</span></h2> <div></div> </li> <li> <h2><span>Slide Four</span></h2> <div></div> </li> <li> <h2><span>Slide Five</span></h2> <div></div> </li> </ol> <noscript> <p>Please enable JavaScript to get the full experience.</p> </noscript> </div> <br><br> <!-- Date Picker --> <div id="div2"> <form id="trip" action="#" > <fieldset> <legend>Trip Length</legend> <div class="fields"> <div><label for="leavedate">Departure Date:</label> <input type="text" id="leavedate" name="leavedate"/></div> <div><label for="returndate">Return Date:</label> <input type="text" id="returndate" name="returndate"/></div> </div> </fieldset> </form> </div> <br><br><br><br> <!-- Style Switcher --> <div> <h1>Stylesheet switcher using jQuery</h1> <p>This is a simple example of my stylesheet switcher which is very simple thanks to the power of jQuery.</p> <p><strong>Update 25/08/2006:</strong> Updated to work with persistant stylesheets and new version of jQuery (r226 from SVN) [thanks Andrea]</p> <p><strong>Update 20/08/2006:</strong> Updated to work with new version of jQuery (r200 from SVN) ["*=style" replaced with "=*style*"]</p> <p> Currently active stylesheet: <span id="st1">styles1</span> <span id="st2">styles2</span> <span id="st3">styles3</span> </p> <p>Choose a different stylesheet:</p> <ul> <li>styles1</li> <li>styles2</li> <li>styles3</li> </ul> <p>Please view source to see how it works or see the full article about this script for more information. You can download the relevant Javascript here: styleswitch.js, jquery.js</p> </div> <!-- FOUR --> <div> </div> </body> </html>
It should be pretty simple: <script type='text/javascript' src='js/jquery.1.0.0.js'></script> <script type='text/jvascript'> var $jq1 = jQuery.noConflict(); </script> <script type='text/javascript' src='js/jquery.2.0.0.js'></script> <script type='text/jvascript'> var $jq2 = jQuery.noConflict(); </script> <script type='text/javascript' src='js/jquery.3.0.0.js'></script> <script type='text/jvascript'> $(document).ready(function() { console.log('constructed with jQuery 3.0.0'); }); </script> You however must make sure the right script is in the right scope, usualy you do something like: $('#id').plugin(); this must be, for example: $jq1('#id').plugin();
Here is an example of changing the jQuery namespace. You can have the older version run on a different namespace to avoid conflict and confusion.
Raphael Javascript text not displaying correctly
I have some text being displayed and I am using the Raphael JS library. I want the 'firstname' text to be size 25px, but it is not working. I am passing in a JS variable to the Raphael part and maybe that is part of the problem. If anyone could help me I would appreciate it. <html> <head> <script src="raphael.js"></script> <script src="jquery-1.7.2.js"></script> <script type="text/javascript"> var string = "J\no\ne"; </script> </head> <body> Text: <input type="text" id="words" value="" /> <input type="button" value="Animate" onclick="animate()" /> <div id='msg'></div> <div id='num'></div> <div id='letters'></div> <!--<div id="letters2"></div>--> <div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;"> </div> <div id="elps" style="margin-left:100px;"/> <script type="text/javascript"> //all your javascript goes here var r = new Raphael("draw-here-raphael"); var firstname = r.text(95,100, string).attr({font: "25px"}); var name = r.text(100,100, string); name.blur(1); </script> </body> </html>
Try var firstname = r.text(95,100, string).attr({"font-size": 25});
Try calling the raphael js file after the jQuery file. <script src="jquery-1.7.2.js"></script> <script src="raphael.js"></script>
Set Cookies with form button
I am trying to set a cookie with the onclick of a button. I am still very new to cookies and I am not sure what I am doing wrong. Below is the button and the function. <script type="text/javascript"> function setCookie(){ var exp = new Date( ); exp.setMinutes( exp.getMinutes( ) + 5 ); document.cookie("cookieOne=red; expires=" + exp.toUTCString( )); } </script> <input name="addtocart" type="button" value="Add To Cart" onClick="setCookie()" /> I thought this would work but when I go to another page it prints nothing. Here is the second page. <link href="css/mainstyle.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="Table_01"> <script type="text/javascript"> document.writeln( document.cookie ); </script> </div> </body> </html> Again I just hit the cookies section of the javascript book I am learning from and this simple test doesnt seem to be working for me.
Try adding ;path=/ and see if it fixes things. EDIT: whoops, nothing to see, move along...