{"id":2849,"date":"2020-05-26T09:22:26","date_gmt":"2020-05-26T08:22:26","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=2849"},"modified":"2026-04-27T12:07:57","modified_gmt":"2026-04-27T11:07:57","slug":"ajax-dynamic-page-content","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/wordpress\/ajax-wordpress\/ajax-dynamic-page-content","title":{"rendered":"AJAX Dynamic Page Content"},"content":{"rendered":"\n<p>Simple ajax call to dynamically load page content, solving issues of page caching etc.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ensure jquery is activated<\/h4>\n\n\n\n<p>In your function that hooks &#8220;wp_enqueue_scripts&#8221;, add this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/********** ENSURE jQuery IS ALWAYS LOADED ON PAGES **********\n\/\/(we use in our custom code)\nadd_action( 'wp_enqueue_scripts', 'MyThemeEnqueueScripts' );\nfunction MyThemeEnqueueScripts()\n{\n  wp_enqueue_script( 'jquery' );\n}\nadd_action( 'admin_enqueue_scripts', 'MyAdminEnqueueScripts' );\nfunction MyAdminEnqueueScripts( $hook )\n{\n  wp_enqueue_script( 'jquery' );\n}<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">HTML<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  $AjaxUrlHtml = \"var ajaxurl = '\" . admin_url('admin-ajax.php') . \"';\";\n\n  &lt;script&gt;\n  $AjaxUrlHtml\n  jQuery(document).ready(function(){\n\n    var post_data = {\n               'action': 'my_ajax_action_callback',   \/\/The name of the ajax callback action in functions.php\n               'my_value_1': 'AjaxTest'\n    };\n\n    jQuery.post(ajaxurl, post_data, function(response) {\n      \/\/----- CALLBACK SUCCESS - RESPONSE RECEVIED -----\n      document.getElementById( 'ajax_output1' ).innerHTML = response;\n    });\n\n  });\n  &lt;\/script&gt;\n  &lt;div id='ajax_output1'&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">AJAX Callback<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/***********************************\n\/\/***********************************\n\/\/********** AJAX CALLBACK **********\n\/\/***********************************\n\/\/***********************************\nadd_action ( 'wp_ajax_my_ajax_action_callback', 'my_ajax_action_callback' );        \/\/For AJAX calls made for logged in users\nadd_action ( 'wp_ajax_nopriv_my_ajax_action_callback', 'my_ajax_action_callback' ); \/\/For AJAX calls made from non logged in users\nfunction my_ajax_action_callback()\n{\n  $my_value_1 = '';\n  if (isset($_POST&#91;'my_value_1']))\n    $my_value_1 = $_POST&#91;'my_value_1'];\n  \n  $ReturnHtml = \"HELLO: \" . $my_value_1;\n  \n  echo ($ReturnHtml);\n  \n  wp_die();     \/\/Terminate immediately and return a proper response\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Simple ajax call to dynamically load page content, solving issues of page caching etc. Ensure jquery is activated In your function that hooks &#8220;wp_enqueue_scripts&#8221;, add this: HTML AJAX Callback<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[180],"tags":[],"class_list":["post-2849","post","type-post","status-publish","format-standard","hentry","category-ajax-wordpress"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=2849"}],"version-history":[{"count":5,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2849\/revisions"}],"predecessor-version":[{"id":5390,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2849\/revisions\/5390"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=2849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=2849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=2849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}