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 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Need help with Javascript function - new load page breaks it

    Hello all,

    I'm learning js basics and am working to integrate code that works in an old function into my latest project. An older function does its intended job and, when completed, uses ajax to load a fresh php file into the browser. The function I just completed, CustomAlert(), does it's intended alertbox job, but after the [ok] button is pushed, a fresh php file needs to load. So my plan was to incorporate the old code with the new, but when I add the ajax code from my older function, CustomAlert() is broken. So I need help integrating them.

    Here's the CustomAlert() function that works:

    Code:
    function CustomAlert(){
    	this.render = function(dialog){
    		var winW = window.innerWidth;
    	    var winH = window.innerHeight;
    		var dialogoverlay = document.getElementById('dialogoverlay');
    	    var dialogbox = document.getElementById('dialogbox');
    		dialogoverlay.style.display = "block";
    	    dialogoverlay.style.height = winH+"px";
    		dialogbox.style.left = (winW/2) - (550 * .5)+"px";
    	    dialogbox.style.top = "100px";
    	    dialogbox.style.display = "block";
    		document.getElementById('dialogboxhead').innerHTML = "PNS System Message";
    	    document.getElementById('dialogboxbody').innerHTML = dialog;
    		document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
    	}
    	this.ok = function(){
    		document.getElementById('dialogbox').style.display = "none";
    		document.getElementById('dialogoverlay').style.display = "none";
    }
    }
    
    var Alert = new CustomAlert();
    Here's the add-on ajax code:

    Code:
    var ajax = window.XMLHttpRequest != null 
    		 ? new XMLHttpRequest() 
    		 : new ActiveXObject("Microsoft.XMLHTTP");
    ajax.open( "POST", "cplxDisplayRec5.php", true );
    ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajax.onreadystatechange = function( )
    So some help would be great, along with an explanation on the how and why it works.

    Thanks!

    Geno

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,280
    Thanks
    12
    Thanked 342 Times in 338 Posts
    there isn’t really much I canged. the only thing to do was moving the event attachment from event attributes (event handler defined in the HTML) to event listeners (event handler defined in JS). and of course rewrite that useless object constructor. (there’s no need to construct a new object every time). Besides that I got rid of the unreliable Alert.ok() assignment (what if somewhere else in your code you do: Alert = "foo"?)
    PHP Code:
    var customAlert = {
        
    render : function _render(dialog) {
            var 
    winW window.innerWidth;
            var 
    winH window.innerHeight;
            var 
    dialogoverlay document.getElementById('dialogoverlay');
            var 
    dialogbox     document.getElementById('dialogbox');
            var 
    dialogboxfoot document.getElementById('dialogboxfoot');
            
    dialogoverlay.style.display "block";
            
    dialogoverlay.style.height  winH+"px";
            
    dialogbox.style.left        = (winW/2) - (550 .5)+"px";
            
    dialogbox.style.top         "100px";
            
    dialogbox.style.display     "block";
            
    document.getElementById('dialogboxhead').innerHTML "PNS System Message";
            
    document.getElementById('dialogboxbody').innerHTML dialog;
            
    // removing event attribute in favour of event listeners
            
    dialogboxfoot.innerHTML '<button>OK</button>';
            
    dialogboxfoot.addEventListener("click"customAlert.ok);
            
    // given that it doesn’t need any arguments
            
    dialogboxfoot.addEventListener("click"myAjaxFunction);
        },
        
    ok : function _ok(evt) {
            
    // should the container be much larger than the button
            // (and you only want the button as trigger)
            // otherwise remove the condition
            
    if (evt.target.tagName.toLowerCase() === "button") {
                
    document.getElementById('dialogbox').style.display "none";
                
    document.getElementById('dialogoverlay').style.display "none";
            }
        }

    Last edited by Dormilich; 03-24-2014 at 11:51 AM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Tags for this Thread

    Posting Permissions

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