Skip to main content

Posts

Showing posts from April, 2012

Table to jqGrid

In order to use this module you should mark the Table to Grid (in Other modules) when you download the grid. Calling Convention: tableToGrid ( selector , options ) This is function and not a method where selector(string) can be either the table's class or id options is array with grid options The html table should have the following structure: < table class = "mytable" > (or < table id = "mytable" > ) < tr > < th > header 1 < / th > < th > header 2 < / th > ... < / tr > < tbody > < tr > < td > data 1 < / td > < td > data 1 < / td > ... < / tr > < tr > ... < / tr > .... < / tbody > < table >

How to save JQGrid parameters in cookie

jqGrid is an excellent jquery plugin to display a grid. We added some filter possibilities and with jquery updated the url where we had to fetch the data from. Worked nice, however, when the user selected a certain filtering or a certain page and clicked on one of the items in the list, they were navigated away from the grid. When they navigated back, the grid was at its start position, so at the first page, default sorting and filtering. So we had to store the values selected by the user. I created two javascript functions for this (in combination with jQuery) function saveGridToCookie(name, grid) { var gridInfo = new Object(); name = name + window.location.pathname; gridInfo.url = grid.jqGrid( 'getGridParam' , 'url' ); gridInfo.sortname = grid.jqGrid( 'getGridParam' , 'sortname' ); gridInfo.sortorder = grid.jqGrid( 'getGridParam' , 'sortorder' ); gridInfo.s

onSelectRow event in jqgrid

The example below specifies the action to take when a row is selected.   var lastSel; jQuery ( "#gridid" ) . jqGrid ( { ... onSelectRow : function ( id ) { if ( id && id !== lastSel ) { jQuery ( '#gridid' ) . restoreRow ( lastSel ) ; lastSel = id; } jQuery ( '#gridid' ) . editRow ( id , true ) ; } , ... } ) ;

Multiple $(document).ready()

One more great thing about $(document).ready() that I didn't mention in my previous tutorial is that you can use it more than once. In fact, if you don't care at all about keeping your code small, you could litter your JavaScript file with them. It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document).ready() function allows you to do that, pain free. You could, for example, have one .js file that is loaded on every page, and another one that is loaded only on the homepage, both of which would call $(document).ready(). So, inside the <head> tag of your homepage, you would have three references to JavaScript files altogether, like so: <script src="/scripts/jquery.js"></script> <script src="/scripts/common.js"></script> <script src="/scripts/homepage.js"></script> You could also do something like this inside a sin

Introducing $(document).ready()

This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded. $(document).ready(function() { // put all your jQuery goodness in here. });   The $(document).ready() function has a ton of advantages over other ways of getting events to work. First of all, you don't have to put any "behavioral" markup in the HTML. You can separate all of your JavaScript/jQuery into a separate file where it's easier to maintain and where it can stay out of the way of the content. I never did like seeing all those "javascript:void()" messages in the status bar when I would hover over a link. That's what happens when you attach the event directly inside an <a href> tag. On some pages that use traditional JavaScript, you'll see an "onloa