Link to home
Start Free TrialLog in
Avatar of blue-genie
blue-genieFlag for South Africa

asked on

JQuery / Ajax

I'm trying out a bunch of new things and maybe i'm trying to combine too many things into one.

i have a basic click here which makes a div with logon visible - do a standard mysql/php login - if successful hide the div.

I then want to reveal a div with the grid  http://www.jqgrid.com/
on it's own the code below :
<script type="text/javascript">
// We use a document ready jquery function.
jQuery(document).ready(function(){
jQuery("#list2").jqGrid({
    // the url parameter tells from where to get the data from server
    // adding ?nd='+new Date().getTime() prevent IE caching
    url:'example.php?nd='+new Date().getTime(),
    // datatype parameter defines the format of data returned from the server
    // in this case we use a JSON data
    datatype: "json",
    // colNames parameter is a array in which we describe the names
    // in the columns. This is the text that apper in the head of the grid.
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    // colModel array describes the model of the column.
    // name is the name of the column,
    // index is the name passed to the server to sort data
    // note that we can pass here nubers too.
    // width is the width of the column
    // align is the align of the column (default is left)
    // sortable defines if this column can be sorted (default true)
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90},
    	{name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},		
        {name:'total',index:'total', width:80,align:"right"},		
        {name:'note',index:'note', width:150, sortable:false}		
    ],
    // pager parameter define that we want to use a pager bar
    // in this case this must be a valid html element.
    // note that the pager can have a position where you want
    pager: jQuery('#pager2'),
    // rowNum parameter describes how many records we want to
    // view in the grid. We use this in example.php to return
    // the needed data.
    rowNum:10,
    // rowList parameter construct a select box element in the pager
    //in wich we can change the number of the visible rows
    rowList:[10,20,30],
    // path to mage location needed for the grid
    imgpath: 'themes/sand/images',
    // sortname sets the initial sorting column. Can be a name or number.
    // this parameter is added to the url
    sortname: 'id',
    //viewrecords defines the view the total records from the query in the pager
    //bar. The related tag is: records in xml or json definitions.
    viewrecords: true,
    //sets the sorting order. Default is asc. This parameter is added to the url
    sortorder: "desc",
    caption: "Demo"
});
});
</script>

Open in new window


with
<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>

<!-- pager definition. class scroll tels that we want to use the same theme as grid -->
<div id="pager2" class="scroll" style="text-align:center;"></div>
in the <body> works - but i want this to only kick in when the login is successful.

assistance direly needed.
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

So, rather than writing these lines 4-52 in document.ready(), you need to invoke these lines once the login is successful
Avatar of blue-genie

ASKER

hey gurvinders - yeah i thought as much - but I couldn't figure out how to execute it.
I have a block of code that catches the successful ajax action - and i've tried putting the code in there - but it doesn't do anything.

function submitFinished( response ) {
  response = $.trim( response );

  if ( response == "success" ) {

   <-- put it here - but doesn't work - should there be a specific way of doing it?
.....
what is the value of response?
ASKER CERTIFIED SOLUTION
Avatar of blue-genie
blue-genie
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I'm accepting my own comment as the solution to close the question. After much fiddling i've managed to make it work in an acceptable fashion.
I'm adding the content to a div - and hiding it and unhiding it when the login is successful.

not the tidiest of methods but until I find a proper pointer in jQuery forum, this will have to do. I don't have too much time to play with this right now.