Solved

JQuery / Ajax

Posted on 2012-04-04
5
311 Views
Last Modified: 2012-04-09
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.
0
Comment
Question by:blue-genie
  • 3
  • 2
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37805661
So, rather than writing these lines 4-52 in document.ready(), you need to invoke these lines once the login is successful
0
 
LVL 39

Author Comment

by:blue-genie
ID: 37805813
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37805842
what is the value of response?
0
 
LVL 39

Accepted Solution

by:
blue-genie earned 0 total points
ID: 37805991
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
 
LVL 39

Author Closing Comment

by:blue-genie
ID: 37822714
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

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now