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?

Disable Cloudflare Rocket Loader for jQuery javascript and make it load first

I use Cloudflare Rocket Loader to speed up Javascript on my site.

The problem is, it loads certain scripts that need jQuery before loading jQuery itself making them not working correctly.

As soon as it is possible to disable Rocket Loader for specific script adding data-cfasync="false" to the <script src=""> I would like to know how can I add it to jQuery scripts as WordPress doesn’t simply load the jQuery via the script tag I guess.

At the moment my website loads jquery-migrate.min.js and jquery.js

PS there is a similar question but it’s almost 7yrs ago so, it may be outdated at this point Cloudflare's Rocket Loader + WordPress -> Ignore scripts?

jQuery and cf7 expiration date and dynamic auto populate

I have a WordPress site running Woocommerce which uses products as courses. I manually add a selection dropdown form in the description which shows the dates a course is available. I have jQuery script to auto populate a date form dynamically when the user selects a date within an enquiry form. I also have a script which checks for todays date and hides any expired date within the selection dropdown. But they don’t seem to work together. Can anyone take a look at the JSFiddle and work out why it doesn’t work? If there is anything missing or extra information required please do ask! This is pulling my hair out!

https://jsfiddle.net/24m0cq5b/#&togetherjs=7cDV098hfn

JQuery function inside Script Tag. How to execute XSS in such a scenario?

The value of currentPage: can be controlled by the user. All characters (like: " ' ( ) / ; : except < & > are injected without being sanitized.

Is there any possible way to execute XSS in such a scenario?

<script type="text/javascript"> $  (function() {             $  ("#blog-pagi").pagination({                 items: 9,                 itemsOnPage: 6,                 currentPage: inject payload here                 edges: 0,                 displayedPages: 10,                 hrefTextPrefix:"?page=",                 prevText: "<i class=\"fa fa-chevron-left\" ></i>",                 nextText: "<i class=\"fa fa-chevron-right\" ></i>",                 onPageClick: function(pageNumber,event){                     window.history.replaceState(null, null, "?page="+pageNumber);                 },             });             });             </script> 

How to select a SharePoint people picker using JQuery

Im trying to select a sharepoint peoplepicker element in my form list.

i tried:

$ ("#ctl00_ctl41_g_326d802c_cd66_443c_9312_18e0ff9786b9_ctl00_iwPermIterator_ctl19_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv")

But i had issues previously where the id would change, so that would not be a solution.

I also tried,

$  ("div[title='People Picker']") 

But it would select 3 people pickers in my form list

Therefore, can someone suggest a way to select this element.

Filtering list view based on querystring using jQuery?

Using Sharepoint 2010 Content Editor Web Parts (some links dynamically created) List View Web Part

Ability to add additional software or packages to the system extremely limited (so would prefer answers that do not suggest software upgrades/additional different Web Parts)

Notes using javascript/JQuery and have access to SPServices.

Given the services I have access to, is there a way to filter the List View Web Part based on a querystring?

hide webparts via JQuery on SharePoint Online

I have a page with multiple web parts. I have four buttons in a web part

<div id="buttons">    <div class="gmcButton" id="About GMC">About GMC</div>     <div class="gmcButton" id="Key Features">Key Features &amp; Changes</div>     <div class="gmcButton" id="Implementation And Rollout">GMC Implementation<br/>and Rollout</div>     <div class="gmcButton" id="GMC Resources">GMC Resources<br/></div> </div> 

In a second web part zone are the four list view web parts. On page load, I have a Jquery function that loops through the four web parts and hides all but the default part.

function loadPanels(){  $  ('.js-webpart-titleCell').each(function (j){     var title = $  (this).find('h2.ms-webpart-titleText').text();     if(title!="About GMC"){                 $  (this).parent().parent().parent().addClass("hidden");             } }); 

}

This works. All but the default “About GMC” web part hide. What happens though when I click the buttons on the page is that the title of the web part changes to the appropriate title, but the contents of the web part do not change. If I examine the CSS in the DOM explorer, the entire web part has the correct class applied, but it is not changing the display from the default web part content. What am I doing wrong?

File uploaded to SharePoint library using JQuery and SharePointPlus js lib only from second click

I’m using createFile() method of SharepointPlus 5.2 js library to upload a file to a SharePoint 2013 library. It works perfect on most of the SP libraries. But on newly created SP libraries it throws an error (the file content is required) on first click, and then makes a proper upload on the second click. How to solve this issue?

The Header section includes:

<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script> <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> <script type="text/javascript" src="/_layouts/15/sp.js"></script> <script type="text/javascript" src="/_layouts/15/init.js"></script> <script type="text/javascript" src="/_layouts/15/core.js"></script> <script type="text/javascript" src="/_layouts/15/1049/strings.js"></script> <script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script> <script type="text/javascript" src="/SiteAssets/_js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/SiteAssets/_js/bootstrap.min.js"></script> <script type="text/javascript" src="/SiteAssets/_js/sharepointplus-5.2.min.js"></script> 

The HTML body:

<div data-role="form" class="container form">      <div data-field="Title">             <label class="form_label required">Title:</label><br>             <input class="form_field required" value=""></input>         </div>          <div id="fileUploadControl" >          <label class="form_label required">Document selection:</label><br/>          <input id="fileUploadInput" class="form_field" type="file"/>          </div>      <hr>      <div class="btn_panel">         <input type="button" class="btn" id="save_btn" name="Save" value="Save" onclick="_uploadFile();">          <input type="button" class="btn" id="cancel_btn" name="Cancel" value="Cancel">     </div>  </div> 

The JS function:

function _uploadFile() {    var Title = $  ('div[data-field="Title"] input').val();    var files = document.querySelector('#fileUploadInput').files;    files = Array.prototype.slice.call(files);   // read the files   Promise.all(files.map(function(file) {     return new Promise(function(prom_res, prom_rej) {       // use fileReader       var fileReader = new FileReader();       fileReader.onloadend = function(e) {         file.content = e.target.result;         prom_res(file);       }       fileReader.onerror = function(e) {         prom_rej(e.target.error);       }       fileReader.readAsArrayBuffer(file);     });   })).then(function(files) {     // upload files     return Promise.all(files.map(function(file) {       return $  SP().list("8D5132D2-A458-4961-BCD6-FFD9CE964C0F").createFile({ //Doc lib UID         content:file.content,         filename:file.name,         fields:{             "Title":Title           }       });     }))   }).then(function(file) {         alert(file[0].Name+" has been uploaded");         console.log("Document " + file[0].Name+" has been uploaded to the Outgoing documents library");     }, function(error) {         console.log("Error: ",error);     }); } 

The error in Firefox console is

uncaught exception: [SharepointPlus ‘createFile’]: the file content is required.

Debugging the file object contents shows that it exists (the size in bytes is shown). Error handler doesn’t return an error text message. On the second click on the same form (without page refresh) uploads the file and gives success message. I’m stuck, if it is a SharePoint, JQuery or SharepointPlus issue, or some conflict. Normally, the file upload from the first click is expected as the same code works on other existing libraries.

File uploaded to SharePoint library using JQuery and SharePointPlus js lib only from second click

I’m using createFile() method of SharepointPlus 5.2 js library to upload a file to a SharePoint 2013 library. It works perfect on most of the SP libraries. But on newly created SP libraries it throws an error (the file content is required) on first click, and then makes a proper upload on the second click. How to solve this issue?

The Header section includes:

<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script> <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> <script type="text/javascript" src="/_layouts/15/sp.js"></script> <script type="text/javascript" src="/_layouts/15/init.js"></script> <script type="text/javascript" src="/_layouts/15/core.js"></script> <script type="text/javascript" src="/_layouts/15/1049/strings.js"></script> <script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script> <script type="text/javascript" src="/SiteAssets/_js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/SiteAssets/_js/bootstrap.min.js"></script> <script type="text/javascript" src="/SiteAssets/_js/sharepointplus-5.2.min.js"></script> 

The HTML body:

<div data-role="form" class="container form">      <div data-field="Title">             <label class="form_label required">Title:</label><br>             <input class="form_field required" value=""></input>         </div>          <div id="fileUploadControl" >          <label class="form_label required">Document selection:</label><br/>          <input id="fileUploadInput" class="form_field" type="file"/>          </div>      <hr>      <div class="btn_panel">         <input type="button" class="btn" id="save_btn" name="Save" value="Save" onclick="_uploadFile();">          <input type="button" class="btn" id="cancel_btn" name="Cancel" value="Cancel">     </div>  </div> 

The JS function:

function _uploadFile() {    var Title = $  ('div[data-field="Title"] input').val();    var files = document.querySelector('#fileUploadInput').files;    files = Array.prototype.slice.call(files);   // read the files   Promise.all(files.map(function(file) {     return new Promise(function(prom_res, prom_rej) {       // use fileReader       var fileReader = new FileReader();       fileReader.onloadend = function(e) {         file.content = e.target.result;         prom_res(file);       }       fileReader.onerror = function(e) {         prom_rej(e.target.error);       }       fileReader.readAsArrayBuffer(file);     });   })).then(function(files) {     // upload files     return Promise.all(files.map(function(file) {       return $  SP().list("8D5132D2-A458-4961-BCD6-FFD9CE964C0F").createFile({ //Doc lib UID         content:file.content,         filename:file.name,         fields:{             "Title":Title           }       });     }))   }).then(function(file) {         alert(file[0].Name+" has been uploaded");         console.log("Document " + file[0].Name+" has been uploaded to the Outgoing documents library");     }, function(error) {         console.log("Error: ",error);     }); } 

The error in Firefox console is

uncaught exception: [SharepointPlus ‘createFile’]: the file content is required.

Debugging the file object contents shows that it exists (the size in bytes is shown). Error handler doesn’t return an error text message. On the second click on the same form (without page refresh) uploads the file and gives success message. I’m stuck, if it is a SharePoint, JQuery or SharepointPlus issue, or some conflict. Normally, the file upload from the first click is expected as the same code works on other existing libraries.

Acceder a un objeto jquery

Hola tengo el siguente objecto que contiene otros objectos y me gustaria acceder a las propiedades de cada pero cada vez que hago console.log de una de estas me sale undefined

$  .each(response.data, function (index, value){     console.log(value);     $  .each(value, function (index, valor){          console.log(valor);          console.log(valor.id); // DEVUELVE UNDEFINED     }) }) 

Si hago console.log(valor): console.log(valor)

Si hago console.log(valor.id): console.log(valor.id)