How to load jQuery with Ajax in WP version 5.3.2?

I am building a custom theme and using wp_enqueue_scripts to load a custom JS file for a specific page template. As you can see I declared jquery as a dependency…

function enqueue_theme_scripts() {   if (is_page_template('template-contact.php')) {     wp_enqueue_script(       'template-contact-js',       get_bloginfo('template_directory') . '/template-contact.js',       array('jquery'),       false,       true     );   } } add_action('wp_enqueue_scripts', 'enqueue_theme_scripts'); 

This is what I have in the JS file…

(function($  ) {   $  (document).ready(function() {     console.log($  );     console.log($  .ajax);     }); })(jQuery); 

This is what the ‘console’ tab shows…

Screenshot of Chrome Inspector console tab

jQuery is loaded, but the $ .ajax method is not included.

This is what the ‘sources’ tab in the Inspector shows…

screenshot of jQuery 3.4.1 loaded in Chrome's inspector

As you can see it is loading jQuery version 3.4.1, but line 48 seems to indicate that ajax is being removed. How do I get jquery to load with the ajax method included?

AJAX Call Via Vanilla JavaScript In WordPress Plugin Development

I ama newbie in WordPress Plugin development in which I have some HTML form on the main plugin page that will get the data from the admin who is logged in and a back page where I have some different functions in PHP like to get information from the database etc. To explain in detail, here is the code…

Main Plugin File:

<?php /* Plugin Name: WP Testing Plugin Plugin URI: http://www.wordpress.org/WP-Testing-Plugin Description: A Detailed Description About This Plugin. Author: Muhammad Hassan Version: 0.1 Author URI: http://www.wordpress.org */  /*____________WP Testing Plugin Admin/Script_____________*/ function wp_testingPlugin_admin() {     echo '         <form id="searchForm" onsubmit="return searchData(this)">             <input name="WhatToSearch" type="text" />             <input type="submit" value="Search"/>             <input type="reset" value="Reset"/>             <div id="showReturnData"></div>         </form>     ';     echo '         <form id="infoForm" onsubmit="return searchInfo(this)">             <input name="WhatToKnow" type="text" />             <input type="submit" value="Search"/>             <input type="reset" value="Reset"/>             <div id="showReturnInfo"></div>         </form>     ';      echo '         <script type="text/javascript">             function searchData(incomingForm) {                 // Confirmation To Add A Data                 var answer = confirm("Are You Sure Want To Search?");                 if (answer){                     // If User Click Ok Then Execute The Below Code                          var FD = new FormData(incomingForm); // Get FORM Element Object                     FD.append("Function", "DataFunction"); // Adding Extra Data In FORM Element Object To Hit Only This Function In Ajax Call File                     var ajx = new XMLHttpRequest();                     ajx.onreadystatechange = function () {                         if (ajx.readyState == 4 && ajx.status == 200) {                             document.getElementById("showReturnData").innerHTML = ajx.responseText;                                      }                     };                     ajx.open("POST", "'.plugin_dir_url( __FILE__ ).'my_functions.php", true);                     ajx.send(FD);                     document.getElementById("showReturnData").innerHTML = "<div class="error">ERROR: AJAX Did Not Respond.</div>";                 }                 return false; // For Not To Reload Page             }               function searchInfo(incomingForm) {                 // Confirmation To Add A Data                 var answer = confirm("Are You Sure Want To Search?");                 if (answer){                     // If User Click Ok Then Execute The Below Code                          var FD = new FormData(incomingForm); // Get FORM Element Object                     FD.append("Function", "InfoFunction"); // Adding Extra Data In FORM Element Object To Hit Only This Function In Ajax Call File                     var ajx = new XMLHttpRequest();                     ajx.onreadystatechange = function () {                         if (ajx.readyState == 4 && ajx.status == 200) {                             document.getElementById("showReturnData").innerHTML = ajx.responseText;                                      }                     };                     ajx.open("POST", "'.plugin_dir_url( __FILE__ ).'my_functions.php", true);                     ajx.send(FD);                     document.getElementById("showReturnInfo").innerHTML = "<div class="error">ERROR: AJAX Did Not Respond.</div>";                 }                 return false; // For Not To Reload Page             }          </script>     '; //if you want only logged in users to access this function use this hook add_action('wp_ajax_searchData', 'searchData'); add_action('wp_ajax_searchInfo', 'searchInfo'); //if you want none logged in users to access this function use this hook add_action('wp_ajax_nopriv_searchData', 'searchData'); add_action('wp_ajax_nopriv_searchInfo', 'searchInfo');   } /*__________________________________________________________________*/   /*____________WP Testing Plugin Option_____________*/ //Adding "WP Testing Plugin" Menu To WordPress -> Tools function wp_testingPlugin() {     //  add_management_page( $  page_title, $  menu_title, $  capability, $  menu_slug, $  function);                  Menu Under Tools     add_management_page("WP Testing Plugin By Hassan", "WP Testing Plugin", 'activate_plugins', "WP-Testing-Plugin", "wp_testingPlugin_admin"); } add_action('admin_menu', 'wp_testingPlugin'); /*__________________________________________________________________*/ ?> 

And this is my_functions.php file.

<?php /****************************************************************************/ //Garb The Function Parameter /****************************************************************************/ $  Function = $  _POST['Function'];   /****************************************************************************/ // Run Search Function /****************************************************************************/ if ($  Function == "DataFunction"){      if(!isset($  _POST['WhatToSearch'])){         $  WhatToSearch = "Nothing";     } else {         $  WhatToSearch = $  _POST['WhatToSearch'];     }      echo "<div class='success'>SUCCESS: Function Is Working Perfectly And Getting Data ".$  WhatToSearch.".</div>"; }  /****************************************************************************/ // Run Another Function /****************************************************************************/ if ($  Function == "InfoFunction"){      if(!isset($  _POST['WhatToKnow'])){         $  WhatToKnow = "Nothing";     } else {         $  WhatToKnow = $  _POST['WhatToKnow'];     }      echo "<div class='success'>SUCCESS: Function Is Working Perfectly And Getting Data ".$  WhatToKnow.".</div>"; }  ?> 

But my code is not working and not hitting my_functions.php file even. Whats the problem here? Need basic step only to work in this patteren. Currently, I am not sure I am even implementing this correctly as I never used WP AJAX before. So right now, my objective is just to get a basic example working. I appreciate any suggestions on how to accomplish this.

Thank you!

How to do the simplest possible frontend ajax call from a plugin?

I’m trying to make this as simple as possible just to get the basics down, but I keep getting a 400 error and 0 response from admin-ajax.php. I just want to hit ajax with some data. Here’s my js:

jQuery(document).ready(function($  ) {   $  ('body').click(function(e){       $  .ajax({           action: 'the_ajax_hook',           data: 'field=data',           type: 'post',           url: the_ajax_script.ajaxurl,           success: function(response_from_the_action_function) {               $  ("#site-content").html(response_from_the_action_function);           }       });   }); }); 

And here’s my plugin:

function load_my_scripts(){      wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( __FILE__ ) . 'ajax.js', array( 'jquery' ) );      wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); }  add_action( 'wp_enqueue_scripts', 'load_my_scripts' ); add_action( 'wp_ajax_the_ajax_hook', 'the_action_function' ); add_action( 'wp_ajax_nopriv_the_ajax_hook', 'the_action_function' );   function the_action_function(){   echo "field is " . $  _POST['field'];   die(); } 

The localization seems to work because it hits the right URL for admin_ajax, but it’s a bad request and returns nothing.

I know I’m missing something obvious but that’s the thing about obvious mistakes, they don’t seem obvious until someone else shows it to you. What am I missing?

JWT in GraphQL GET Request via AJAX

I have a SPA application that receives and updates information about the logged in user from the API using an AJAX request. However, the requests are authorized using a JWT that is passed via the URL query.

For example: GET /graphql?token=$ {token}

This request is done over HTTPS but I’ve read that this can still be a potential security issue as URL requests can end up in server logs or proxy logs. Is it really any better if I were to pass through a request body or header ?

How to prevent Cross-site Scripting in ajax response

I have a page(parent.php) from where i am calling a another page(result.php) through jquery ajax that is returning a response in html format. This response is showed on the parent.php page in a div. How can i secure my ajax response from xss attack. Here is the code snippet of parent.php page

$  .ajax({         type: "POST",         url: "getResult.php",         data:{search_in:search_in},           beforeSend:function(){           $  ("#search_result").html('Loading..');      },        success: function(result)     {         $  ("#search_result").html(result);         $  ("#search_result").show();      } }); 

in the getResult.php page i am quering database based on the parameter and returning some result in html form like table. How can i prevent cross site attack

What would happen if some random webpage made an Ajax request for http://127.0.0.1/private.txt?

I run a localhost-only webserver (PHP’s built-in one) for all my admin panels and whatnot on my machine. I’m worried that, if any random webpage has a JavaScript snippet which makes an Ajax call to http://127.0.0.1/private.txt , and I visit that webpage, it will make my browser (Firefox) fetch whatever data is returned from that URL and be able to use it, for example to send it back to their own server in another Ajax request.

Let’s assume that http://127.0.0.1/private.txt returns my entire diary since 1958. Or anything equally sensitive. I definitely don’t ever want it to interact with anything other than my Firefox browser, but from what I can reckon, this could be a massive privacy/security issue. I hope I’m wrong about my assumption that this request would be allowed. I hope that it has some kind of “cross-domain policy” blocking it or something. Especially since it’s from 127.0.0.1, which should be some kind of special case.

What would stop it from doing this? What am I missing in my reasoning?

How to organize big amounts of texts after several Ajax calls?

Sorry if this is a dumb question, I’m trying to figure out the more appropiate way to deal with some content presentation.

I have 10 category buttons on a page, each one is assigned to a div.

On those divs, I would show Ajax results, on the click of their specific button.

However, if people enabled all of the 10 buttons, the amount of text that would be shown would be too large, and unmanageable from a user interface point of view.

How should I resolve this situation and create an appropiate interface?

Is Ajax pagination a possible solution for me? How to combine separate Ajax calls with a generic pagination system? Otherwise, can you point me to some other ideas?

Thanks,

How to implement an infinite scroll or Ajax load more

My site is www.grubnglug.co.uk. I use geomywp to search/filter and display posts and do not want to change it.

My question is, how can I implement infinite scrolling or Ajax load more button functionality on the posts, so i can get rid of the ugly pagination buttons.

I tried various plugins but they all load the posts independently rather than integrating with geomywp /it’s template for displaying postsand infinitely loading them.

As a result I end up with two lots of posts – one infinitely loaded and the other as it is currently, with the pagination buttons.

I don’t have coding skills beyond minor tweaks. I’m lost 🙁