The HTML
Head
<!-- JQUERY UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <!--Should be first script imported/first script on the page-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
//----------------------------------------
//----- OUR JQUERY ENTER TEXT DIALOG -----
//----------------------------------------
$(".our_jquery_dialog").live('click', function(e)
{
e.preventDefault();
//----- OPTIONAL GET SPECIAL VALUES INCLUDED IN THE LINK -----
var usage_id = $(this).attr("usage_id");
//----- THE CONTENT DISPLAYED IN THE DIALOG -----
$("#dialog-confirm").html(
"<p>" + $(this).attr("message") + "</p>" +
"<p>" + "<textarea id='text_area_1' style='width:100%; height:100%; resize:none; outline:none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding: 10px;'>The default text</textarea>" + "</p>"
);
//----- MAKE THE TEXTAREA FILL THE AVAILABLE SPACE IF THE DIALOG IS RESIZED -----
var d = $("#dialog-confirm").dialog({resizable:true});
d.bind("dialogresize", function(event, ui)
{
var width = ui.size.width;
var height = ui.size.height;
$('textarea#text_area_1').css('width', width - 50);
$('textarea#text_area_1').css('height', height - 220);
});
//----- ADD THE BUTTONS -----
$( "#dialog-confirm" ).dialog(
{
resizable: true,
modal: true,
buttons:
{
"OK": function()
{
//----- OK -----
//Disable the dialog (if the next step takes a while to complete this stops the user being able to press a button again)
$( this ).dialog( "disable" );
var new_text = escape($('textarea#text_area_1').val()); //escape special characters
//alert( new_text );
//POST TO THE PHP PAGE
$.post("some_page.php", //Page to post to
{
//Data sent with the post request
action: "my_action_name",
id: usage_id,
text_field: new_text
},
function(data) { //Callback function that is executed if the request succeeds - success(data, textStatus, jqXHR)
$( "#dialog-confirm" ).dialog( "close" ); //Close the dialog box
alert( data ); //Display message echo'd by the php file
history.go(-1); //Go back to previous page
});
$( this ).dialog( "close" );
window.location.reload()
//window.location = "some_page.php";
},
Cancel: function()
{
//----- CANCEL -----
$( this ).dialog( "close" );
}
},
title: $(this).attr("title")
});
return false;
});
</script>
Body
<!-- div element used for confirmation and other dialogs -->
<div id="dialog-confirm" style="display:none;"></div>
<!-- -->
<a href="javascript:void(0)" class="our_jquery_dialog" title="The Title" message="A message" usage_id="12345">Open The Dialog</a>
The PHP File
<?php
if(isset($_POST['action']))
{
$action = $_POST['action'];
if($action == 'my_action_name')
{
}
echo "Video deleted!";
}
?>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.