Loading a page into jQuery UI Dialog

First, create a html file, jqueryDialog.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Loading a page dynamically from the server into jQuery UI Dialog</title>
<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    function openDialog()    {
        $('<div/>').dialog({
            modal: true,
            open: function ()
            {
            if ($(this).is(':empty')) {
 				$(this).load('greeting.php?greeting=hello');
				}
            },         
            height: 600,
            width: 950,
            title:"JQuery Dialog"
        });
    }
</script>
</head>
<body>
<a href="#" id="dialog" onclick="openDialog()";>open</a>
</body>
</html>

Second, create the file, greeting.php

<?php 
echo $_GET["greeting"];
phpinfo(); 
?>

Third, put those two files in the same directory.

Lastly, load the jqueryDialog.html from your browser to see the result.

Search within Codexpedia

Custom Search

Search the entire web

Custom Search