In your function that hooks \u201cwp_enqueue_scripts\u201d, add this:<\/p>\n\n\n\n
wp_enqueue_script('jquery');<\/code><\/pre>\n\n\n\nA working example<\/h4>\n\n\n\nIn functions.php<\/h5>\n\n\n\n\/\/**************************************************\n\/\/**************************************************\n\/\/********** AJAX CALLBACK - MY TEST PAGE **********\n\/\/**************************************************\n\/\/**************************************************\nadd_action ( 'wp_ajax_my_test_page_ajax_action_callback', 'my_test_page_ajax_action_callback' ); \/\/For AJAX calls made for logged in users <<<For namespaces use: '\\MyNamespaceName\\my_test_page_ajax_action_callback\nadd_action ( 'wp_ajax_nopriv_my_test_page_ajax_action_callback', 'my_test_page_ajax_action_callback' ); \/\/For AJAX calls made from non logged in users (include both if both logged in and not logged in users will trigger this)<<<For namespaces use: '\\MyNamespaceName\\my_test_page_ajax_action_callback\nfunction my_test_page_ajax_action_callback()\n{ \n \n \/\/Check the nonce\n check_ajax_referer('my-nonce-special-string', 'security'); \/\/This will die(); if the nonce check fails\n \n \/\/if (!is_user_logged_in())\n \/\/ die();\n \n $MyRequestField1 = '';\n if (isset($_POST['MyRequestField1']))\n $MyRequestField1 = sanitize_text_field($_POST['MyRequestField1']);\n \n $MyRequestField2 = '';\n if (isset($_POST['MyRequestField2']))\n $MyRequestField2 = sanitize_text_field($_POST['MyRequestField2']);\n\n \/\/<<<Do your handling of the request here...\n \n $MyReturnField1 = \"Hi there ($MyRequestField1-$MyRequestField2)\"; \n \n $ReturnArray = array(\n \"MyReturnField1\" => $MyReturnField1\n );\n echo json_encode($ReturnArray);\n\n wp_die(); \/\/Terminate immediately and return a proper response\n}<\/code><\/pre>\n\n\n\nIn your HTML<\/h5>\n\n\n\n \/\/----- DO THE AJAX BACKGROUND CHECK -----\n \/\/Ajax call is handled in: functions.php\n $AjaxUrlHtml = \"var ajaxurl = '\" . admin_url('admin-ajax.php') . \"';\";\n $AjaxNonce = wp_create_nonce( 'my-nonce-special-string' );\n \n $MyField1Value = \"Test string\";\n \n $MaxPageAgeMs = (60 * 1000);\n \n $HtmlOutput .= <<<_END\n <script>\n $AjaxUrlHtml\n\n const PAGE_ACTIVE_DO_AJAX_CHECK_EVERY_SECS = 3; \/\/<<<How often to fire an ajax check\n \n var DoAjaxCheckEverySecs = PAGE_ACTIVE_DO_AJAX_CHECK_EVERY_SECS;\n var DoAjaxCheckEveryCounter = 0;\n var NumOfChecksCounter = 0;\n var PageFirstLoaded = new Date().getTime();\n \n var MyField2Value = 123; \/\/<< A JS variable you can pass example\n\n \/\/----- DO AJAX CALL -----\n setInterval(function()\n {\n \/\/Here every 1000mS \n DoAjaxCheckEveryCounter++;\n if (DoAjaxCheckEveryCounter >= DoAjaxCheckEverySecs)\n {\n DoAjaxCheckEveryCounter = 0;\n \n var post_data = {\n 'action': 'my_test_page_ajax_action_callback', \/\/<<The name of the ajax callback action in functions.php\n 'security': '$AjaxNonce', \/\/<<<<DELETE LINE IF NOT USING NONCE\n 'MyRequestField1': '$MyField1Value',\n 'MyRequestField2': MyField2Value\n };\n jQuery.post(ajaxurl, post_data, function(response) {\n \/\/----- CALLBACK SUCCESS - RESPONSE RECEVIED -----\n response = jQuery.parseJSON(response); \/\/Decode the json response\n \n var MyReturnField1 = response.MyReturnField1;\n \n NumOfChecksCounter++;\n \n \n document.getElementById( 'ajax_value1' ).innerHTML = 'Response: ' + MyReturnField1 + ', number of checks made: ' + NumOfChecksCounter;\n \n });\n \n }\n }, 1000);\t\t \/\/<<<<Call every time in mS\n <\/script>\n \n <style>\n #MyWaitingAnimatedIcon {\n border: 6px solid #f3f3f3;\n border-radius: 50%;\n border-top: 6px solid #777777;\n width: 40px;\n height: 40px;\n -webkit-animation: animated_icon_spin 2s linear infinite; \/* Safari *\/\n animation: animated_icon_spin 2s linear infinite;\n\n margin-top: 10px;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 10px;\n }\n @-webkit-keyframes animated_icon_spin {\n 0% { -webkit-transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); }\n }\n @keyframes animated_icon_spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n <\/style>\n\n <div id=\"MyWaitingAnimatedIcon\"><\/div>\n <p style=\"text-align:center;\"><span id='ajax_value1'>Connecting...<\/span><\/p>\n \n_END;<\/code><\/pre>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Ensure jquery is activated In your function that hooks \u201cwp_enqueue_scripts\u201d, add this: A working example In functions.php In your HTML<\/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-4286","post","type-post","status-publish","format-standard","hentry","category-ajax-wordpress"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4286","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=4286"}],"version-history":[{"count":7,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4286\/revisions"}],"predecessor-version":[{"id":5136,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4286\/revisions\/5136"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=4286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=4286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=4286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}