John Davidson

Message:

I am using a navigation menu functionality as described in the solution of this post:
show hide html code/content using nav menu

It updates what is displayed on the page when a menu item is clicked. I added an 'active' class to highlight the menu that is currently selected.

Since the page is all one page, after running some php, I'm returned to the same page, but the page reloads and the menu goes back to Home. I'd like to keep the user on the same menu selection.

Further down the page, I am using php to try run through the navigation menu function again to get the menu to update. This works, however, I get 'undefined' written to the browser at the bottom of the page.

I understand this happens because the javascript function doesn't return anything, it just updates elements. Thus, it returns undefined.

I've tried try/catch. I've tried setting the executed command to a variable and writing to console.log. Nothing works. It always says undefined. It will write to console, too, but it's always on the browser screen.

php echoing script to call function...

<?php

    

    if (isset($_SESSION['navMenu']) && $_SESSION['navMenu'] == 'divEvents') {

        echo "<script type='text/javascript'>  

        document.write(ShowContent('divEvents'));

        </script>";

    }

 ?>

Navigation Menu code

function ShowContent(content) {

document.getElementById("divHome").style.display = 'none';

document.getElementById("divEvents").style.display = 'none';

document.getElementById("divNews").style.display = 'none';

document.getElementById("divAbout").style.display = 'none';

document.getElementById(content).style.display = 'block';



if (content == "divHome"){

    document.getElementById("lnkHome").classList.add('active');

    document.getElementById("lnkEvents").classList.remove('active');

    document.getElementById("lnkNews").classList.remove('active');

    document.getElementById("lnkAbout").classList.remove('active');

    

}

if (content == "divEvents"){

    document.getElementById("lnkEvents").classList.add('active');

    document.getElementById("lnkHome").classList.remove('active');

    document.getElementById("lnkNews").classList.remove('active');

    document.getElementById("lnkAbout").classList.remove('active');

    

}

if (content == "divNews"){

    document.getElementById("lnkNews").classList.add('active');

    document.getElementById("lnkHome").classList.remove('active');

    document.getElementById("lnkEvents").classList.remove('active');

    document.getElementById("lnkAbout").classList.remove('active');

    

}

if (content == "divAbout"){

    document.getElementById("lnkAbout").classList.add('active');

    document.getElementById("lnkHome").classList.remove('active');

    document.getElementById("lnkEvents").classList.remove('active');

    document.getElementById("lnkNews").classList.remove('active');

    

}  

}

Is it possible to suppress 'undefined' from the page? Is it possible to execute an onclick some other way that doesn't result in 'undefined'?

Thank you.

---

My Answer:
There are a few ways to manage undefined values when PHP is echoing JavaScript to call a function to update a navigation menu. Here are some suggestions:

1. Check for undefined values in PHP before echoing JavaScript:
Before echoing the JavaScript code that calls the function to update the navigation menu, you can check if the value is undefined in PHP and handle it accordingly. For example:
php
if(isset($value)) {
echo "";
} else {
echo "";
}


2. Use JavaScript to handle undefined values:
You can also handle undefined values in JavaScript by checking if the value is undefined before calling the function to update the navigation menu. For example:
javascript
if(typeof value !== 'undefined') {
updateNavigationMenu(value);
} else {
updateNavigationMenu('default');
}


3. Set a default value in PHP:
If the value may be undefined in some cases, you can set a default value in PHP before echoing the JavaScript code. For example:
php
$value = isset($value) ? $value : 'default';
echo "";


By using these methods, you can effectively manage undefined values when PHP is echoing JavaScript to call a function to update a navigation menu.