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.
LVL 39
blue-genieAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
blue-genieConnect With a Mentor Author Commented:
success - that part does work, i have another little div that says login successful that pops up accordingly - just trying to trim the bits of fluff out to resolve this.
0
 
Gurvinder Pal SinghCommented:
So, rather than writing these lines 4-52 in document.ready(), you need to invoke these lines once the login is successful
0
 
blue-genieAuthor Commented:
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?
.....
0
 
Gurvinder Pal SinghCommented:
what is the value of response?
0
 
blue-genieAuthor Commented:
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.
0
All Courses

From novice to tech pro — start learning today.