{"id":147,"date":"2012-11-21T23:27:47","date_gmt":"2012-11-21T20:27:47","guid":{"rendered":"http:\/\/meekconsulting.com\/?p=147"},"modified":"2012-11-21T23:34:17","modified_gmt":"2012-11-21T20:34:17","slug":"using-fading-div-tag-messages-to-show-ajax-call-results-without-requiring-click","status":"publish","type":"post","link":"https:\/\/meekconsulting.com\/?p=147","title":{"rendered":"Using Fading Div tag messages to show ajax call results without requiring click."},"content":{"rendered":"<p>We use xajax calls to server functions to update databases or insert records from a web page. Usually when they finish they return javascript to close the dialog or div tag and show an alert \u2014 this can be maddening if you are trying to add a lot of data and have to click to acknowledge the alert each time.<\/p>\n<p>So this solution works well to give visual confirmation that doesn\u2019t require clicking.<\/p>\n<blockquote><p>\/\/ Normal close dialog and remove edit form div<\/p>\n<p>$objResponse->script(\u201d $(\u2018#edit_item\u2019).dialog(\u2018close\u2019);\u201d);<br \/>\n$objResponse->remove(\u2018edit_item\u2019);<\/p>\n<p>\u00a0<\/p>\n<p>\/\/ Replace table with new updated values and call jquery data table to make look good<\/p>\n<p>$objResponse->assign(\u201ctable_content_div\u201d,\u201dinnerHTML\u201d, \u201c$html\u201d);<br \/>\n$objResponse->script(\u201c$(\u2018#item_table\u2019).dataTable( {<br \/>\nbJQueryUI: true,<br \/>\nbAutoWidth: false,<br \/>\naoColumns: [{\u2018sWidth\u2019:\u201910%\u2019},{\u2018sWidth\u2019:\u201930%\u2019},{\u2018sWidth\u2019:\u201960%\u2019}],<br \/>\nsScrollY: \u2018400px\u2019,<br \/>\nbSort: false,<br \/>\nbScrollCollapse: true,<br \/>\nbProcessing: true,<br \/>\nbDeferRender: true,<br \/>\niDisplayLength: \u2018-1\u2019,<br \/>\naLengthMenu: [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, \u2018All\u2019]]<br \/>\n}); \u201c);<\/p>\n<p>\u00a0<\/p>\n<p>\/\/ create div tag with message<\/p>\n<p>$objResponse->create(\u2018table_content_div\u2019,\u2019div\u2019,\u2019done_message\u2019);<br \/>\n$html = \u201c<img src=\\\u201dimages\/Check_Icon.png\\\u201d alt=\\\u201dSave Complete\\\u201d\/> Save Complete\u201d;<br \/>\n$objResponse->assign(\u2018done_message\u2019,\u2019innerHTML\u2019,\u201d$html\u201d);<\/p>\n<p>\/\/ jquery dialog<br \/>\n$objResponse->script(\u201d $(\u2018#done_message\u2019).dialog({<br \/>\nwidth: 300,<br \/>\nheight: 100,<br \/>\nmodal:true,<br \/>\nresizable: false,<br \/>\ndraggable: false,<br \/>\ndialogClass: \u2018done_message\u2019<br \/>\n});\u201d);<br \/>\n$objResponse->script(\u201d $(\u2018#done_message\u2019).closest(\u2018.ui-dialog\u2019).find(\u2018.ui-dialog-titlebar\u2019).hide();\u201d);<\/p>\n<p>\u00a0<\/p>\n<p>\/\/ Fade away WITHOUT requiring a click \u2014 adjust numbers to effect speed<br \/>\n$objResponse->script( \u201csetTimeout(function(){ $(\u2018#done_message\u2019).fadeOut(300, function(){ $(this).remove();});}, 500);\u00a0 \u201c);<\/p><\/blockquote>\n<p>\u00a0<\/p>\n<p>That\u2019s It.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We use xajax calls to server functions to update databases or insert records from a web page. Usually when they finish they return javascript to close the dialog or div tag and show an alert \u2014 this can be maddening &hellip; <a href=\"https:\/\/meekconsulting.com\/?p=147\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[7,8],"_links":{"self":[{"href":"https:\/\/meekconsulting.com\/index.php?rest_route=\/wp\/v2\/posts\/147"}],"collection":[{"href":"https:\/\/meekconsulting.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meekconsulting.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meekconsulting.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meekconsulting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=147"}],"version-history":[{"count":6,"href":"https:\/\/meekconsulting.com\/index.php?rest_route=\/wp\/v2\/posts\/147\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/meekconsulting.com\/index.php?rest_route=\/wp\/v2\/posts\/147\/revisions\/154"}],"wp:attachment":[{"href":"https:\/\/meekconsulting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meekconsulting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meekconsulting.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}