Fetch information from a database with AJAX to use as nav menu

BichenerM · March 11, 2014

I have adapted a script from w3schools to use as a main menu for my site.

It works great in IE, but about 3 or 4 times slower in FireFox, Chrome and Safari!

I have no idea what might be wrong and would appreciate any help.

Many thanks

Mark

<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("hoverbar").innerHTML="";
return;
} 
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("hoverbar").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","menulookuptest.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div class='divcolor1' onmouseover='showUser("1")'>Option 1</div>
<div class='divcolor2' onmouseover='showUser("2")'>Option 2</div>
<div class='divcolor3' onmouseover='showUser("3")'>Option 3</div>
<div class='divcolor4' onmouseover='showUser("4")'>Option 4</div>
<div class='divcolor5' onmouseover='showUser("5")'>Option 5</div>
<div class='divcolor6' onmouseover='showUser("6")'>Option 6</div>
<div class='divcolor7' onmouseover='showUser("7")'>Option 7</div>
<div class='divcolor8' onmouseover='showUser("8")'>Option 8</div>

<div id="hoverbar">Content Goes Here</div>
</body>
</html>

menulookuptest.php

<?php
$q = $_GET['q'];
$con=mysqli_connect("localhost","root","PASS","DBNAME");
mysqli_select_db($con,"ajax_demo");
$sql="SELECT pagetitle, pagedept FROM intranetpage WHERE pagedept = '".$q."'";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result))
{
echo $row['pagetitle'];
echo "<BR>";
}
?>

jakekoekemoer · March 11, 2014

I would suggest you start by looking at AJAX to do that. Something to the effect of:

<script>
    function showUser(str) {
        if (str == "") {
            $("hoverbar").innerHTML = "";
            return;
        }

        var postrequest;

        postrequest = $.post("menulookuptest.php", {q: str}).done(function () {
            $("hoverbar").innerHTML = result;
            return;
        }).fail(function () {
            alert("an error occured");
        })
    }
</script>

as far as the php code goed its a good idea to rather do it like this:

<?php
$q = $_GET['q'] or die('REQUEST NOT HANDLES');

$con = mysqli_connect("localhost", "root", "PASS", "DBNAME") or die('CANNOT CONNECT TO DB');

mysqli_select_db($con, "ajax_demo") or die('DATABASE NOT SELECTED');

$sql = "SELECT pagetitle, pagedept FROM intranetpage WHERE pagedept = '" . addslashes($q) . "'";

$result = mysqli_query($con, $sql);

$finalstring = '';

while ($row = mysqli_fetch_array($result)) {
    $finalstring .= $row['pagetitle'].'<br>';
}
die($finalstring);

?>

As far as the code goes I cant see what could make it take long, make your javascript load async. I would even go as far as using ajax for the hover events of the div using

$("id").hover(function(){
    showUser("id");
})

Sign In

Fetch information from a database with AJAX to use as nav menu

Recommended Posts

BichenerM

Link to comment

Share on other sites

jakekoekemoer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information