Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onClick insert of PHP script into div

    Hi, I'm relatively new to javascript and honestly not even 100% sure this is the right sub-forum.
    Like the title says, I have modified a script that I found that is supposed to load the contents of a dynamic PHP page into a div of the currently opened page by the click of a button.

    Code:
    function createRequestObject() {
    	var returnObj = false;
    	
    	// if Mozilla, Safari, etc...
        if(window.XMLHttpRequest) {
            returnObj = new XMLHttpRequest();
        }
    	
    	// if IE
    	else if(window.ActiveXObject) {
    		try {returnObj = new ActiveXObject("Msxml2.XMLHTTP");} 
    					
    		catch (e) {
    			try {returnObj = new ActiveXObject("Microsoft.XMLHTTP");}
    			catch (e) {}
    		}
    			
        }
    	
    	return returnObj;
    }
    
    var request = createRequestObject();
    
    // call the download search results
    function loadDownloads(scriptFile, targetElement) {
    	
    	// send our request
    	request.open('get', scriptFile, true);
    	
    	// call showDownloads when we get a response
    	request.onreadystatechange = showDownloads(targetElement);
    	request.send();	
    }
    
    // display the download search results
    function showDownloads(targetElement) {
    	console.log("showDownloads called");
    	
    	var panelContent = document.getElementById(targetElement).children[0];
    	
    	// if request was successful display downloads	
    	if(request.readyState == 4 && request.status == 200) {
    		panelContent.innerHTML = request.responseText;
    	}
    	
    	console.log("request.readyState: " + request.readyState);
    	console.log("request.status: " + request.status);
    }
    
    // switch the download results pane on and off
    function toggleDownloads(scriptFile, targetElement) {	
    	var panelShadow = document.getElementById(targetElement);
    	var panelShadowAll = document.getElementsByClassName("result-panel-download-shadow");
       
    	if(panelShadow.style.display == 'block') {		
    		panelShadow.style.display = 'none';
    		panelShadow.children[0].innerHTML = "";
    	}
       
    	else {		
    		for (var i = 0; i < panelShadowAll.length; i++) {
    			panelShadowAll[i].style.display = 'none';
    			panelShadowAll[i].children[0].innerHTML = "";
    		}
    		
    		panelShadow.style.display = 'block';
    		loadDownloads(scriptFile, targetElement);
    	}
    }
    Sadly this doesn't work, here is what firefox can tell me:

    GET http://localhost/dapper-donkey/inc.php [HTTP/1.1 200 OK 858ms]
    "showDownloads called" script.js:90
    "request.readyState: 1" script.js:99
    "request.status: 0"

    To my surprise, I have basically the same script loading the contents of the original page where the button will have to be pressed, which works just fine. It takes a while to load so I'm displaying a loading animation to begin with, then overwrite it when the PHP has done its job.

    Code:
    function createRequestObject() {
    	var returnObj = false;
    	
    	// if Mozilla, Safari, etc...
        if(window.XMLHttpRequest) {
            returnObj = new XMLHttpRequest();
        }
    	
    	// if IE
    	else if(window.ActiveXObject) {
    		try {returnObj = new ActiveXObject("Msxml2.XMLHTTP");} 
    					
    		catch (e) {
    			try {returnObj = new ActiveXObject("Microsoft.XMLHTTP");}
    			catch (e) {}
    		}
    			
        }
    	
    	return returnObj;
    }
    
    var request = createRequestObject();
    
    // load the information
    function loadInfo() {
    	
    	// construct request url from query url
    	var url = location.href.substring(location.href.lastIndexOf("/") + 1, location.href.length);
    	
    	if(url.indexOf("?") == -1) {
    		url = url + "?loading";
    	}
    	
    	else {
    		url = url + "&loading";
    	}
    	
    	// send our request
    	request.open('get', url, false);
    	
    	// call showInfo when we get a response
    	request.onreadystatechange=showInfo;
    	request.send();
    }
    
    // display the information
    function showInfo() {
    	
    	// if request was successful display information
    	if(request.readyState == 4 && request.status == 200) {
    		document.write(request.responseText);
    	}
    }
    
    // Load the information after the page loads
    window.addEventListener ?
    	window.addEventListener('load',loadInfo,false) :
    		window.attachEvent('onload',loadInfo);
    Any help on what went wrong would be greatly appreciated.

  • #2
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Managed to solve it by myself.
    This sequence works for the initial insertion of the main page while the loading animation is playing:

    Code:
    request.open('get', url, false);
    request.onreadystatechange=showInfo;
    request.send(null);
    For some mysterious reasons, this does NOT work for insertion of further results into a div after the page has loaded. Instead I used this:

    Code:
    request.open('get', scriptFile, false);
    request.send(null);
    request.onreadystatechange = showDownloads(targetElement);
    And again, this does NOT work for the initial load.
    Maybe it'll help someone someday.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Why would you want to turn the asynchronous option "off" by setting the third parameter of open to "false"?

    Try to set it to "true" ... if that doesn't work for you, please show us the "showinfo" method.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •