Blogs

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">
	<div>
		<?php echo "Title" ?>
	</div>
	<div>
		<?php 
			$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>";
		?>
	</div>
</div>

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'}); 
        });
</script>

The result is below: