AJAX in Font

Generate PDF417 in Font AJAX

CHAPTER 8 AJAX
PDF-417 2d Barcode Generation In None
Using Barcode generation for Font Control to generate, create PDF417 image in Font applications.
www.OnBarcode.com
UPC - 13 Encoder In None
Using Barcode encoder for Font Control to generate, create EAN13 image in Font applications.
www.OnBarcode.com
We do as usual return false in the click event to suppress the default browser click behavior, because we want that event to take action specified via our jQuery code and not by its default action On execution, our web page will initially display the paragraph element and a submit button as shown in Figure 8-23:
PDF417 Drawer In None
Using Barcode maker for Font Control to generate, create PDF417 image in Font applications.
www.OnBarcode.com
Paint Code128 In None
Using Barcode creator for Font Control to generate, create Code-128 image in Font applications.
www.OnBarcode.com
Figure 8-23. Initial web page with text message and a submit button to import XML contents On selecting the submit button, the first names of all the students (in the XML file) will be displayed in the form of list items as shown in Figure 8-24:
Barcode Drawer In None
Using Barcode generator for Font Control to generate, create Barcode image in Font applications.
www.OnBarcode.com
DataMatrix Generation In None
Using Barcode generation for Font Control to generate, create Data Matrix ECC200 image in Font applications.
www.OnBarcode.com
Figure 8-24. The contents of first-name tag of XML file imported in the form of list items When we modified the code, also, the content text from <roll>, <first-name>, <last-name> and <marks> tags is retrieved and nested inside <tr> and <td> tags so as to make them appear in the form of a table. On execution, we get the roll numbers, first and last names, and marks of all students in the form of table as shown in Figure 8-25:
UCC - 12 Printer In None
Using Barcode maker for Font Control to generate, create GS1-128 image in Font applications.
www.OnBarcode.com
Create ISBN In None
Using Barcode printer for Font Control to generate, create ISBN image in Font applications.
www.OnBarcode.com
Figure 8-25. The tags: roll, first-name, last-name and marks imported from XML file in the form of table
Generate PDF417 In None
Using Barcode printer for Word Control to generate, create PDF417 image in Office Word applications.
www.OnBarcode.com
Create PDF 417 In Java
Using Barcode maker for Android Control to generate, create PDF 417 image in Android applications.
www.OnBarcode.com
CHAPTER 8 AJAX
Create Data Matrix ECC200 In Visual C#.NET
Using Barcode creation for Visual Studio .NET Control to generate, create Data Matrix 2d barcode image in .NET applications.
www.OnBarcode.com
Data Matrix 2d Barcode Creator In None
Using Barcode creator for Online Control to generate, create ECC200 image in Online applications.
www.OnBarcode.com
8-9. Paginating tables
Recognizing Code39 In Visual C#.NET
Using Barcode recognizer for Visual Studio .NET Control to read, scan read, scan image in Visual Studio .NET applications.
www.OnBarcode.com
Printing Barcode In Objective-C
Using Barcode generator for iPad Control to generate, create Barcode image in iPad applications.
www.OnBarcode.com
Problem
Code-128 Generator In Java
Using Barcode generation for Android Control to generate, create Code 128C image in Android applications.
www.OnBarcode.com
GS1 - 12 Reader In .NET
Using Barcode decoder for .NET Control to read, scan read, scan image in Visual Studio .NET applications.
www.OnBarcode.com
You want to retrieve some student information from a table from a MySQL server, and you want to display them pagewise. You ve been asked to display five records per page.
Printing QR In None
Using Barcode drawer for Office Word Control to generate, create Quick Response Code image in Microsoft Word applications.
www.OnBarcode.com
Encode ANSI/AIM Code 128 In Visual Studio .NET
Using Barcode generation for Reporting Service Control to generate, create Code 128 Code Set A image in Reporting Service applications.
www.OnBarcode.com
Solution
Creating Barcode In Visual Basic .NET
Using Barcode creator for .NET Control to generate, create Barcode image in VS .NET applications.
www.OnBarcode.com
UPC-A Supplement 2 Drawer In None
Using Barcode creator for Microsoft Excel Control to generate, create GTIN - 12 image in Microsoft Excel applications.
www.OnBarcode.com
We ll begin by creating an HTML file that contains an empty div element message which will be used to display the table of student records pagewise. The HTML file should appear as shown below: <body> <div id="message"></div> </body> The jQuery code to divide the rows of the table in pages, with five rows per page, and to display the respective rows when a page number is clicked, is as shown right here: $(document).ready(function() { $.ajax({ type:"POST", url:"getstudrec.php", success:function(html) { $('#message').html(html); var rows=$('table').find('tbody tr').length; var no_rec_per_page=5; var no_pages=Math.ceil(rows/no_rec_per_page); var $pagenumbers=$('<div id="pages"></div>'); for(i=0;i<no_pages;i++) { $('<span class="page">'+(i+1)+'</span>').appendTo($pagenumbers); } $pagenumbers.insertBefore('table'); $('.page').hover(function(){ $(this).addClass('hover'); }, function(){ $(this).removeClass('hover'); }); $('table').find('tbody tr').hide(); var tr=$('table tbody tr'); for(var i=0;i<=no_rec_per_page-1;i++) { $(tr[i]).show(); }
CHAPTER 8 AJAX
$('span').click(function(event){ $('table').find('tbody tr').hide(); for(i=($(this).text()-1)*no_rec_per_page;i<=$(this).text()*no_rec_per_page-1;i++) { $(tr[i]).show(); } }); } }); }); You can see that we are invoking the request through the ajax() method, in which we specify that the method of request is POST and the url of the server side script file is getstudrec.php. The response generated from that server side script file all the records of students is returned to the JavaScript file and received in the parameter html of the callback function. We then assign the server response (html) to the div element message for display. Here is the code four our getstudrec.php script file: < php $connect = mysql_connect("localhost", "root", "mce") or die("Please, check your server connection."); mysql_select_db("college"); $query = "SELECT roll, name, marks from student"; $results = mysql_query($query) or die(mysql_error()); if($results) { echo '<table border="1">'; echo '<thead>'; echo '<tr><th>Roll</th><th>Name</th><th>Marks</th></tr>'; echo '</thead>'; echo '<tbody>'; while ($row = mysql_fetch_array($results)) { extract($row); echo '<tr><td>' . $roll . '</td><td>' . $name . '</td><td>' . $marks . '</td></tr>'; } echo '</tbody>'; echo '</table>'; } > And to apply a hover effect to the page numbers, and assign spacing around those page numbers, you need to define two style rules in the style sheet file which may appear as shown below: .hover { background-color: #00f; color: #fff; } .page{ margin:5px; }
CHAPTER 8 AJAX
How It Works
In the server side script we begin by establishing a connection with the MySQL server and selecting the database college. We then write an SQL query to retrieve roll, name, and marks of all students from the student table. We then execute the SQL query and the rows returned by the table as outcome of the query are stored in the $results array. The style rule hover contains the background-color and color property set to value #00f and #fff respectively to turn the background color of the hovered page number to blue, and its foreground color to white. The style rule page contains the margin property set to value 5px to create the space of 5px among page numbers. In the jQuery code itself, we invoke the request through the ajax() method, where we specify that the method of request that we are going to use is POST and the url of the server side script is getstudrec.php. The response generated by the server side script file is returned to the JavaScript file, and received in the parameter html of the callback function. Note here of course that html is an array of student rows, so it is a table of student records (containing student data regarding their Roll , Name and Marks ). The response generated by the server side script is assigned to the div element message for displaying the table of records on the screen. To do so, we count the number of rows (tr elements nested inside the tbody element) and store the count in variable rows. We assume that we want to see five rows per page, and we initialize the value of the variable no_rec_per_page equal to 5. We find out the total count of the page numbers by dividing the total count of the rows by the number of records that we want to see per page. The count of the pages is assigned to variable no_pages and we define a div element pages and assign it to the variable $pagenumbers. Then with the help of a for loop, we create few span elements (equal to the number of pages) that contain the sequence of page numbers (so 1,2,3 ) and the span element is assigned the class name page so that the style properties defined in the class selector page be automatically applied to all the page numbers. Finally, all the span elements containing the page numbers are appended to the div element of id pages. Presentationally, we insert the div element pages that was stored in variable $pagenumbers before the table element, so that the page numbers will appear above the table In the hover event to the page numbers (span element of class pages) you ll see that we highlight the page numbers when the mouse pointer moves over them by manipulating the properties defined in the style rule hover, which apply to the page numbers. We change their background and foreground color to blue and white respectively in that event and when there is no hover, we remove those style properties and the associated visual effect. We then hide all the rows (that is, tr elements nested inside tbody element) of the table, keeping only the column headings visible, and retrieve all the rows of the table and store them in variable tr. As you ll remember, tr is an array containing all the rows of the table, so we use the for loop to display the first five rows of the table. We attach the click event to the span elements, so that all the page numbers and hidden rows of the table are displayed displayed, leaving only the column headings of course. Finally, we display the rows that actually fall within the page number that the user clicks, using the tr array. On execution, we get first five rows of the table and page numbers at the top as shown in Figure 8-26:
Copyright © OnBarcode.com . All rights reserved.