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.

Comments

Your email address will not be published. Required fields are marked *