Below is a self-contained illustration. Upon execution, please pay attention to the following:
To run this straightforward example, two files are required:
File 1: TEST.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.img').click(function() {
var iid = $(this).attr('id');
//alert('You clicked ID: ' + iid);
$.ajax({
type: "POST",
url: "yogibear.php", // "source.php",
data: "iid="+iid,
success: function(data) {
//alert('AJAX recd: ' +data);
$('#moddlg').html(data);
$('#moddlg').dialog('open');
} //END success fn
}); //END $.ajax
});
$('#moddlg').dialog({
autoOpen: false,
modal: true,
width: 400, //default is 300
title: 'This is yer dialog:',
buttons: {
'Click Me': function() {
$(this).dialog('close');
}
},
close: function() {
alert('Dlg is closing... I can do more stuff in here, including running another AJAX call');
}
});
}); //END $(document).ready()
</script>
</head>
<body>
<img id="i-1" class="img" src="http://placehold.it/140x100" />
<img id="i-2" class="img" src="http://placehold.it/140x100" />
<img id="i-3" class="img" src="http://placehold.it/140x100" />
<img id="i-4" class="img" src="http://placehold.it/140x100" />
<div id="moddlg"></div>
</body>
</html>
File 2: YOGIBEAR.PHP
<?php
$x = $_POST['iid'];
die('PHP file recd: ' . $x);
//Of course, this is where you receive the img id sent via AJAX
//and look up stuff in MySQL or etc, then return the results
//simply by putting it all into a variable and ECHOing that
//variable. Or, you can use JSON to echo an array - but make
//sure to look up a couple of examples as you must add another
//couple of params to the AJAX code block