Load jQuery Window with PHP

Today, we will illustrate how to set the jqxWindow’s content and title via PHP. 1. Create a new index.php page. 2. In the head tag of your page, include the following JavaScript and CSS files.
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
3. In the HTML markup, add a DIV tag with 2 nested DIV tags – one for the jqxWindow’s Title and another for its content. In the code below is illustrated how to generate a simple title and content with PHP. With a PHP loop, we created a simple HTML table with 10 rows and 2 columns. That table will be displayed in the jqxWindow’s content area.
<div id="window">
<?php echo "Title" ?>
$price = 10;
echo "<table style='height: 100%; width: 100%;' border=\"1\" align=\"center\">";
echo "<tr><th>Quantity</th>";
echo "<th>Price</th></tr>";
for ( $counter = 10; $counter <= 100; $counter += 10) {
echo "<tr><td>";
echo $counter;
echo "</td><td>";
echo $price * $counter;
echo "</td></tr>";
echo "</table>";
4. The final step is to select the ‘window’ DIV tag with jQuery and call the jqxWindow constructor function.
<script type="text/javascript">
$(document).ready(function () {
$('#window').jqxWindow({ theme: 'classic'});
The result is below: php-dialog

About admin

This entry was posted in jqxWindow, PHP and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply