{"id":1531,"date":"2014-10-13T15:17:09","date_gmt":"2014-10-13T15:17:09","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=1531"},"modified":"2022-02-17T07:14:46","modified_gmt":"2022-02-17T07:14:46","slug":"text-area-dialog-that-then-calls-php-function","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/jquery\/dialogs\/examples-dialogs\/text-area-dialog-that-then-calls-php-function","title":{"rendered":"Text Area Dialog that then calls PHP Function"},"content":{"rendered":"
\nThe HTML
\n<\/h5>\n
\nHead
\n<\/h5>\n
\r\n\r\n<!-- JQUERY UI -->\r\n<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-->\r\n<link rel="stylesheet" href="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.9\/themes\/smoothness\/jquery-ui.css" type="text\/css" media="all" \/>\r\n<script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.9\/jquery-ui.min.js" type="text\/javascript"><\/script>\r\n\r\n\r\n<script type="text\/javascript">\r\n\t\/\/----------------------------------------\r\n\t\/\/----- OUR JQUERY ENTER TEXT DIALOG -----\r\n\t\/\/----------------------------------------\r\n\t$(".our_jquery_dialog").live('click', function(e)\r\n\t{\r\n\t\te.preventDefault();\r\n\t\t\r\n\t\t\/\/----- OPTIONAL GET SPECIAL VALUES INCLUDED IN THE LINK -----\r\n\t\tvar usage_id = $(this).attr("usage_id");\r\n\t\t\r\n\t\t\/\/----- THE CONTENT DISPLAYED IN THE DIALOG -----\r\n\t\t$("#dialog-confirm").html(\r\n\t\t\t"<p>" + $(this).attr("message") + "<\/p>" +\r\n\t\t\t"<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>"\r\n\t\t);\r\n\t\t\r\n\t\t\/\/----- MAKE THE TEXTAREA FILL THE AVAILABLE SPACE IF THE DIALOG IS RESIZED -----\r\n\t\tvar d = $("#dialog-confirm").dialog({resizable:true});\r\n\t\td.bind("dialogresize", function(event, ui)\r\n\t\t{\r\n\t\t\t\tvar width = ui.size.width;\r\n\t\t\t\tvar height = ui.size.height;\r\n\t\t\t\t$('textarea#text_area_1').css('width', width - 50);\r\n\t\t\t\t$('textarea#text_area_1').css('height', height - 220);\r\n\t\t});\r\n\t\t\r\n\t\t\r\n\t\t\/\/----- ADD THE BUTTONS -----\r\n\t\t$( "#dialog-confirm" ).dialog(\r\n\t\t{\r\n\t\t\tresizable: true,\r\n\t\t\tmodal: true,\r\n\t\t\tbuttons:\r\n\t\t\t{\r\n\t\t\t\t"OK": function()\r\n\t\t\t\t{\r\n\t\t\t\t\t\/\/----- OK -----\r\n\t\t\t\t\t\r\n\t\t\t\t\t\/\/Disable the dialog (if the next step takes a while to complete this stops the user being able to press a button again)\r\n\t\t\t\t\t$( this ).dialog( "disable" );\r\n\t\t\t\t\t\r\n\t\t\t\t\tvar new_text = escape($('textarea#text_area_1').val());    \/\/escape special characters\r\n\t\t\t\t\t\/\/alert( new_text );\r\n\t\t\t\t\t\r\n\t\t\t\t\t\/\/POST TO THE PHP PAGE\r\n\t\t\t\t\t$.post("some_page.php",\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/Page to post to\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\/\/Data sent with the post request\r\n\t\t\t\t\t\t\taction: \"my_action_name\",\r\n\t\t\t\t\t\t\tid: usage_id,\r\n\t\t\t\t\t\t\ttext_field: new_text\r\n\t\t\t\t\t\t}, \t\r\n\t\t\t\t\t  function(data) {\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/Callback function that is executed if the request succeeds - success(data, textStatus, jqXHR)\r\n\t\t\t\t\t\t\t$( "#dialog-confirm" ).dialog( "close" );\t\t\/\/Close the dialog box\r\n\t\t\t\t\t\t\talert( data );\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/Display message echo'd by the php file\r\n\t\t\t\t\t\t\thistory.go(-1);\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/Go back to previous page\r\n\t\t\t\t\t   });\r\n\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t$( this ).dialog( "close" );\r\n\t\t\t\t\twindow.location.reload()\r\n\t\t\t\t\t\/\/window.location = "some_page.php";\r\n\t\t\t\t},\r\n\t\t\t\tCancel: function()\r\n\t\t\t\t{\r\n\t\t\t\t\t\/\/----- CANCEL -----\r\n\t\t\t\t\t$( this ).dialog( "close" );\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\ttitle: $(this).attr("title")\r\n\t\t});\r\n\t\t\r\n\t\t\r\n\t\treturn false;\r\n\t});\r\n<\/script>\r\n<\/code><\/pre>\n
\nBody
\n<\/h5>\n
\r\n\r\n<!-- div element used for confirmation and other dialogs -->\r\n<div id="dialog-confirm" style="display:none;"><\/div>\r\n<!-- -->\r\n\r\n<a href="javascript:void(0)" class="our_jquery_dialog" title="The Title"  message="A message" usage_id="12345">Open The Dialog<\/a>\r\n\r\n<\/code><\/pre>\n
\nThe PHP File
\n<\/h5>\n
\r\n\r\n\r\n<?php\r\n\t\r\n\tif(isset($_POST['action']))\r\n\t{\r\n\t\t$action = $_POST['action'];\r\n\t\tif($action == 'my_action_name')\r\n\t\t{\r\n\r\n\r\n\t\t}\r\n\r\n\t\techo "Video deleted!";\r\n\r\n\t}\r\n\r\n\r\n?>\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[131],"tags":[],"class_list":["post-1531","post","type-post","status-publish","format-standard","hentry","category-examples-dialogs"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/1531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":4,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/1531\/revisions"}],"predecessor-version":[{"id":1536,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/1531\/revisions\/1536"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=1531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=1531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}