<< back to code examples

Pure Ajax and WordPress

Here I use Ajax and the XMLHttpRequest Object in pure JavaScript to grab the single page of a custom WordPress post and display it in the appropriate box. This work for all products including one that are dynamically added through WordPress.

   var descRequest;
   var loaders = ['shampooLoader', 'conditionerLoader'];
   var outterWraps = ['shampooBkg', 'conditionerBkg'];

   function getDesc(url, loader, fadeBkg) {

	for (i = 0 ; i < loaders.length; i++) {

	  var x = loaders[i];
          if( x != loader ){
				
          document.getElementById(x).innerHTML = '';

	  }
    }

    for (y = 0 ; y < outterWraps.length; y++) {

	  var z = outterWraps[y];
	  if( z != fadeBkg ){

	      document.getElementById(z).className = 'nofadeBkg';

	  }
    }

        document.getElementById(fadeBkg).className = "fadeBkg";

	getUrl(url, loader);

	return false;

    }

    function getUrl(url, loader) {

        descRequest = new XMLHttpRequest();

        descRequest.onreadystatechange = function() { 

	     if(descRequest.readyState == 4 && descRequest.status == 200) {
	         document.getElementById(loader).innerHTML = descRequest.responseText;
	     }
        }
        
        descRequest.open("GET", url, true);
        descRequest.send();
    }

More Code Projects