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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts

    Exit link won't show up with popup div

    Everything was working fine until I added an AJAX call in. Now, I'm not sure what the problem is. When the link 'friends' is clicked, the event listener is supposed to call the activatePopUp() function. This part it does fine. Inside this function in addition to changing the styles on the other elements it should change the style on the exitPopUp link so that it is displayed as well. This is also fine, until it calls AJAX. Once the results from the PHP file are returned, the exitPopUp link disappears.
    Code:
    <li><a id="friends" href="#">Friends</a></li>
    <div id="popup">
    					<a id="exitPopUp" href="#" >X</a>
    				</div>
    Pop Up div functions
    Code:
    function activatePopUp() {
    		document.getElementById('main').style.opacity = '0.5';
    		//For profile pages only
    		if (document.getElementById('profile')) {
    			document.getElementById('profile').style.opacity = '0.5';
    			getFriends();
    			}
    		document.getElementById('content').style.opacity = '0.5';
    		document.getElementById('footer').style.opacity = '0.5';
    		document.getElementById('popup').style.display = 'block';
    		document.getElementById('exitPopUp').style.display = 'block';
    	}
    function deactivatePopUp() {
    		document.getElementById('main').style.opacity = '1.0';
    		if (document.getElementById('profile')) {document.getElementById('profile').style.opacity = '1.0';}
    		document.getElementById('content').style.opacity = '1.0';
    		document.getElementById('footer').style.opacity = '1.0';
    		document.getElementById('popup').style.display = 'none';
    		document.getElementById('exitPopUp').style.display = 'none';
    	}
    	
    function getFriends() {
    	var hr = new XMLHttpRequest();
    	var url = "/ajax/gf.php";
    	if (document.getElementById('username')) {var username = document.getElementById('username').innerHTML;}
    	var vars = "username="+username;
    	if (document.getElementById('fullName')) {var usrFullName = document.getElementById('fullName').innerHTML;}
    	hr.open("POST", url, true);
    	hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    	hr.onreadystatechange = function() {
    	if (hr.readyState === 4 && hr.status === 200) {
    		var return_data = hr.responseText;
    		document.getElementById('popup').innerHTML = "<h1 class='special'>"+usrFullName+"'s Friends</h1><hr />"+return_data;
    	}
    }
    hr.send(vars);
    }
    
    if (document.getElementById('friends')) {document.getElementById('friends').addEventListener('click', activatePopUp, false);}
    window.onload = document.getElementById('exitPopUp').addEventListener('click', deactivatePopUp, false);
    Edit: When I add in
    Code:
    document.getElementById('exitPopUp').style.display = 'block';
    to the console I get TypeError: Cannot read property 'style' of null
    Last edited by elitis; 02-12-2013 at 09:28 PM.
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by elitis View Post
    Edit: When I add in
    Code:
    document.getElementById('exitPopUp').style.display = 'block';
    to the console I get TypeError: Cannot read property 'style' of null
    That's because document.getElementById('exitPopUp') no longer exists, having been hosed by this statement:
    Code:
    document.getElementById('popup').innerHTML = "<h1 class='special'>"+usrFullName+"'s Friends</h1><hr />"+return_data;

    Try
    Code:
    document.getElementById('popup').innerHTML += "<h1 class='special'>"+usrFullName+"'s Friends</h1><hr />"+return_data;

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    well that solves the original problem. Nice to know that innerHTML replaces the content. I originally thought it just added in addition to the content, like the += does. offtopic: but are "all" javascript methods like this? (i.e document.write(), .value, etc) And now the deactivatePopUp() function ceases to work...
    Last edited by elitis; 02-12-2013 at 11:09 PM.
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by elitis View Post
    well that solves the original problem. Nice to know that innerHTML replaces the content. I originally thought it just added in addition to the content, like the += does. offtopic: but are "all" javascript methods like this? (i.e document.write(), .value, etc) And now the deactivatePopUp() function ceases to work...
    This statement is incorrect, executing the statement immediately instead of onload:
    Code:
    window.onload = document.getElementById('exitPopUp').addEventListener('click', deactivatePopUp, false);
    Use:
    Code:
    window.onload = function(){document.getElementById('exitPopUp').addEventListener('click', deactivatePopUp, false); };

  • #5
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    Still nothing in regards to the exit link problem:
    Code:
    if (document.getElementById('friends')) {document.getElementById('friends').addEventListener('click', activatePopUp, false);}
    window.onload = function(){document.getElementById('exitPopUp').addEventListener('click', deactivatePopUp, false); }
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps


  •  

    Posting Permissions

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