Using AJAX

JavaScript
1

Hey guys, i want to my javascript function will apply when my windows tab gets small but witout refreshing the page. So, i tried to use AJAX, the function works but i’m stil refreshing my web page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--STYLES-->
        <link rel="stylesheet" href="styles.css">
        <!--JAVASCRIPT-->
        <script defer src="script.js"></script>
        <script defer src="script2.js"></script>
    </head>
    <body>
        <header>
            <img src="images/header.jpg" width="100%" height="150px">
        </header>
            <nav class="menu">
                <button id="button" hidden onclick="toggle()"><img src="images/list.png"></img></button>
                <ul id="menu_list">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About me</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
    </body>
</html>

header
{
  margin-bottom: -3px;
   
}
.menu
{
    width: 10%;
    min-width: 200px;
    float: left;
}

/*Notes
  In the content is rarely set height 
*/

/*Links buttons*/
a:link, a:visited {
    background-color: #353839;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: block;
    border: 1px solid #555d50;
    font-size: 1rem;
  }
  
  a:hover, a:active {
    background-color: #006400;
  }
/*Lists*/
ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
 
}
/*Best practice font adding with inherit to others elements*/
body
{
  font-family: Verdana;
}
input, select, textarea, button
{
  font-family: inherit;
}

.hidden
{
  display: none;
}


function toggle()
{
    let x = document.getElementById("menu_list");
    
    if(x.style.display === "none")
    {
        x.style.display = "block";
    }
    else
    {
        x.style.display = "none";
    }
}

//AJAX
function loadFunc() {
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       //document.getElementById("demo").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "script2.js", true);
    xhttp.send();
  }


function hide_show()
{
    let wh = window.innerHeight; 
    let ww = window.innerWidth; 

    re = wh + ww;

    //document.getElementById("messenger").innerHTML = re;

    if(re <= 1200)
    {
        document.getElementById("menu_list").classList.add("hidden");
    }
    if(re <= 1200)
    {
        document.getElementById("button").style.display = "initial";      
    }
}

hide_show();
2

I don’t… know why you’re using AJAX…What’s supposed to be the trigger?

Nothing’s calling loadFunc, so that code never executes.

Nothing seems to be reacting to window size, so that’s not doing anything either.

I dont… see anything that would make your code reload a page.

3

@cfffx0 did you maybe mean to have hide_show() called on every window resize? In this case you need to add an event listener like so:

window.addEventListener('resize', hide_show)

FWIW, if you want to load a script dynamically you can do so by just setting the src of a newly created script element (no need for AJAX here):

const script = document.createElement('script')

script.src = 'script2.js'
document.head.appendChild(script)

… but then again you already included that script in your markup anyway.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.