Building my own site: AJAX/JS/PHP help please

Discussion in 'Programming' started by brotherxaos, Apr 13, 2016.

0
  1. #1
    Hi there,

    I'm trying to learn PHP/AJAX/Javascript in order to build my own webpage.

    I've created a DB and a PHP script that pulls from it.
    I have it set up to receive a query and it returns the data properly.

    I even appear to have the javascript set up to create the XMLHTTPRequest object and it returns the data from PHP as it should.

    But once it does, the page refreshes and goes back to the initial loaded page.

    I have no idea why it is doing this. Please help!

    You can see the page and what it's doing (click the menu buttons to see it) at ne.fario.us/jonelle/main2.php

    The HTML
    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="./css/nef_main.css">
        <script src="./js/getWindowSize.js"></script>
        <script src="./js/fetchArticles.js"></script>
        <script language = "javascript" type = "text/javascript">
            <!--
                function fetchArticles(categoryID) {
                    var ajaxRequest;
                    try {
                        // Opera 8.0+, Firefox, Safari
                        ajaxRequest = new XMLHttpRequest();
                    }catch (e) {
                        // Internet Explorer Browsers
                        try {
                            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                        }catch (e) {
                            try{
                                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                            }catch (e){
                                // Something went wrong
                                alert("Your browser broke!");
                                return false;
                            }
                        }
                    }  
          
                    ajaxRequest.onreadystatechange = function() {
                        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                            var ajaxDisplay = document.getElementById('page_content');
                            ajaxDisplay.innerHTML = ajaxRequest.responseText;
                        }
                    }
                  
                    var queryString = "?categoryID=" + categoryID;
                    ajaxRequest.open("GET", "http://ne.fario.us/jonelle/db/fetchArticles2.php" + queryString, true );
                    ajaxRequest.send(null);
                }
            //-->
        </script>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <title>Nefarious Games</title>
    </head>
    <body id="body" onLoad="getWindowSize(); fetchArticles(0);">
        <div id="clouds">.</div>
        <header id="header">
            <div id="wrap">
                <div class="cut1"></div>
                <div class="cut2"></div>
                <div id="content">
                    <div id="logo1"></div>
                    <div id="logo2"></div>
                </div>
            </div>
        </header>
        <nav id="nav">
            <div id="menu_buttons">
                <ul id="navigation">
                    <a href="" onClick="fetchArticles(1)"><li class="button_nav">bio</li></a>
                    <a href="" onClick="fetchArticles(2)"><li class="button_nav">resume</li></a>
                    <a href="" onClick="fetchArticles(3)"><li class="button_nav">game design</li></a>
                    <a href="" onClick="fetchArticles(4)"><li class="button_nav">coding</li></a>
                    <a href="" onClick="fetchArticles(5)"><li class="button_nav">blog</li></a>
                </ul>
            </div>
        </nav>
        <section id="page_titles">
            <div class="lightbar">
                <hr id="lightbar">
            </div>
            <div id="pagetitle">
                Biography
            </div>
            <div id="nef_games">
                <a href="" onClick="fetchArticles(2)">Nefarious Designs</a>
            </div>
        </section>
        <section id="articles">
            <div id="page_content">

            </div>
            <div class="lightbar">
                <hr id="lightbar">
            </div>
        </section>
        <footer id="footer">
            <ul id="information_panel">
                <li id="social_media">
                    <ul id="social_media_buttons">
                        <li class="button_sm"><a href="http://www.twitter.com/brotherxaos"><img id="button_twitter" src="./images/icons/button_twitter_normal2.jpg" alt="Brotherxaos on Twitter"></a></li>
                        <li class="button_sm"><a href="http://www.facebook.com/brotherxaos"><img id="button_facebook" src="./images/icons/button_facebook_normal2.jpg" alt="Brotherxaos on Facebook"></a></li>
                        <li class="button_sm"><a href="https://www.linkedin.com/in/rwdavisca"><img id="button_linkedin" src="./images/icons/button_linkedin_normal2.jpg" alt="Brotherxaos on LinkedIn"></a></li>
                        <li class="button_sm"><a href="http://www.pintrest.com/brotherxaos"><img id="button_pintrest" src="./images/icons/button_pintrest_normal2.jpg" alt="Brotherxaos on Pintrest"></a></li>
                        <li class="button_sm"><a href="https://plus.google.com/108250113925645640859/posts"><img id="button_google+" src="./images/icons/button_googleplus_normal2.jpg" alt="Brotherxaos on Google+"></a></li>
                        <li class="button_sm"><a href=""><img id="button_gmail" src="./images/icons/button_gmail_normal.png" alt="Brotherxaos on Gmail"></a></li>
                    </ul>
                </li>
                <li id="copyright">
                    <ul>
                        <li class="text_c">ne.fario.us, Nefarious Designs; all rights reserved</li>
                        <li class="text_c">© 2010 - 2016 Richard Davis</li>
                        <li class="text_c"><a class="extLink" href="http://missjoneru.deviantart.com/">Graphic Design by: Jonelle Prideaux</a></li>
                    </ul>
                </li>
            </ul>
        </footer>
    </body>  
</html>
    Code (markup):
    The Javascript
    <script language = "javascript" type = "text/javascript">
            <!--
                function fetchArticles(categoryID) {
                    var ajaxRequest;
                    try {
                        // Opera 8.0+, Firefox, Safari
                        ajaxRequest = new XMLHttpRequest();
                    }catch (e) {
                        // Internet Explorer Browsers
                        try {
                            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                        }catch (e) {
                            try{
                                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                            }catch (e){
                                // Something went wrong
                                alert("Your browser broke!");
                                return false;
                            }
                        }
                    }  
          
                    ajaxRequest.onreadystatechange = function() {
                        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                            var ajaxDisplay = document.getElementById('page_content');
                            ajaxDisplay.innerHTML = ajaxRequest.responseText;
                        }
                    }
                  
                    var queryString = "?categoryID=" + categoryID;
                    ajaxRequest.open("GET", "http://ne.fario.us/jonelle/db/fetchArticles2.php" + queryString, true );
                    ajaxRequest.send(null);
                }
            //-->
        </script>
    Code (JavaScript):

    The PHP
    
<?php
  
    $categoryID = "\"" . $_GET['categoryID'] . "\"";  
  
    include 'dblogin.php';
    $sql = "SELECT Authors.AuthorName, Articles.PostingDate, Categories.CategoryName, Articles.Title, Articles.Content, Articles.upVotes, Articles.downVotes
        FROM Articles
        INNER JOIN Authors on Articles.AuthorID = Authors.AuthorID
        INNER JOIN Categories on Articles.CategoryID = Categories.CategoryID
        WHERE Categories.CategoryID = $categoryID
        ORDER BY Articles.ArticleID DESC;";
    $result = $conn->query($sql);
  

    if ($result->num_rows > 0)
    {
        // output data of each row
        while($row = $result->fetch_assoc())
        {
            $score = $row[upVotes] - $row[downVotes];
            echo
                "<article><div class='article_header'>". $row["Title"].
                "</div><div class='article_datetime'>by: " . $row["AuthorName"].
                " on: " . $row["PostingDate"].
                " in:  " . $row["CategoryName"].       
                "</div><div class='article_content'>" . $row["Content"].
                "</div><div class='article_footer'>Vote: +1 / -1   score: " . $score. "</div></article>";
        }
    }
    else
    {
        $sql = "SELECT Categories.CategoryName
                    FROM Categories
                    WHERE CategoryID = $categoryID;";
        $result =$conn->query($sql);
      
        if($result->num_rows > 0)
        {
            while ($row = $result->fetch_assoc())
            {
                echo "0 results in the " . $row["CategoryName"] . " category.";
            }
        }      
    }
    $conn->close();
?>
    PHP:
    Troubleshooting steps taken

    • I can visit the php file directly and pass it the categoryID to return the proper values. categoryID 0 has some Lorem Ipsum, all other numbers 1-5 have nothing, but return a statement indicating such.
    • http://ne.fario.us/jonelle/db/fetchArticles2.php?categoryID=0
    • http://ne.fario.us/jonelle/db/fetchArticles2.php?categoryID=1
    • I disabled both onLoad statements in my HTML just in case they were activating another page refresh.
    • I removed both references to the external javascript files in the HTML header.
    • Googled for whatever you would call this, but results have not been helpful.
    Even with all of those changes in place, the PHP still returns the data, and the page overwrites it afterward.



    Thanks in advance for your time looking at this, and especially if you can help fix it.[/QUOTE]
     
    brotherxaos, Apr 13, 2016 IP
  2. brotherxaos

    brotherxaos Greenhorn

    Messages:
    2
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    11
    #2
    HA! I fixed it!
    My anchor was reloading the page. I updated it to <a href="#" onClick="fetchArticles(1)"><li class="button_nav">bio</li></a>
    And now it doesn't trigger the page to reload.

    Sometimes all you need to do to find the solution is to talk to someone else about it...
     
    brotherxaos, Apr 13, 2016 IP
    sarahk likes this.