send a php variable in jquery dialog() - php

Question

I have a table with images and info about each image. Next to each image I have an 'add' button that when clicked opens a jquery dialog() with id="alignment".
I want to send a php variable (with the image name) so when you click on the 'add' button I can call the variable and the image name can be displayed in the dialog box.
My code is:
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button class="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('<img src="images/thumb/'.$upload[0].'/120px-'.$upload[0].'" />');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml($upload[4]);
$wgOut->addHtml('</td></tr>');
}
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Image",
//draggable: false,
resizable: false,
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$(".imageSetting")
.click(function() {
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$out = self::alignment();
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');

Answer 1

So I added a bit of code to your example, but you can tweak it as you find necessary. Basically I recommend using the jQuery .data() method to pass along the data you need. Each button will utilize the HTML5 data attribute inside the loop to create the image name as part of the button html.
Next, when you click on the button it'll grab that value and assign it to the modal's copy of image-name.
I added an open function to your modal. Inside that function it'll fetch that image-name value (the one we just assigned) and you can now use it to append into the contents of the modal. (For example, you can create a <span> somewhere in your modal html where you'd like to place the image name... And then use the .html() method to "paste" the value in there).
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button data-image-name="' . $upload[0] . '" class="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('<img src="images/thumb/'.$upload[0].'/120px-'.$upload[0].'" />');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml($upload[4]);
$wgOut->addHtml('</td></tr>');
}
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Image",
//draggable: false,
resizable: false,
open: function() {
var imageName = $("#alignment").data("image-name");
// use the jQuery .html() function to put the value of 'imageName'
// into your dialog contents. (like #modal-subheader.html(imageName);)
},
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$(".imageSetting")
.click(function() {
$("alignment").data("image-name", $(this).data("image-name"));
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$out = self::alignment();
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');