Demo HTML Seite:
<html>
<head>
<title>dynamic buttons for jquery.dialog</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/dialog-func.js"></script>
</head>
<body>
<p><a href="#" id="update-license" value="1" class="dialog">Open Dialog</a></p>
<div id="result"></div>
</body>
</html>
This is the corresponding javascript file dialog-func.js
$(function(){
var $dialog = $('<div id="dia"></div>')
.dialog({
autoOpen: false,
width: 100,
});
$('.dialog').click(function(){
$func = $(this).attr('id');
$id = $(this).attr('value');
$.get('ajax.function.php', {func:$func,id:$id},
function(data){
var buttonDefs = {};
buttonDefs[data.okbutton] = function(){eval(data.okfunc);};
buttonDefs["Cancel"] = function() { $(this).dialog("close"); };
$('#dia').dialog({title: data.title});
$('#dia').html(data.html);
$('#dia').dialog( "option", "buttons", buttonDefs);
},
"json"
);
$dialog.dialog('open');
return false;
});
});
While Cancel is hard coded, "OK" is fully dynamical.
Here comes the dynamic content via ajax.function.php
<?php
$titleString = 'Information';
$bodyString="Func: " . $_REQUEST['func'] . '
Id: ' . $_REQUEST['id'];
$okButtonName = 'Ok-Button-Text';
$okButtonFunc = '$("#result").html("Show this string.");$(this).dialog("close");';
echo json_encode(array(
'title'=>$titleString,
'html'=>$bodyString,
'okbutton'=>$okButtonName,
'okfunc'=>$okButtonFunc
));
