blue-genie
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 :
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.
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>
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;"
in the <body> works - but i want this to only kick in when the login is successful.
assistance direly needed.
So, rather than writing these lines 4-52 in document.ready(), you need to invoke these lines once the login is successful
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?
.....
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.