Having trouble with PHP-Ajax query to sql server

Question

I am having a bit of trouble getting a search function working using ajax to bring up results as the user types in a name. This is the site in question (you can click view all to see what is searchable) http://ra-yon.com/beta/Test_sites/HFE/admin/contact.php The query in action http://ra-yon.com/beta/Test_sites/HFE/include/queryc.php?query=ra-yon&clause=email

The code in question

<html>
    <head>

<style type="text/css">
body
{
background:black;
color:black;
width:100%;

}
#center
{
width:90%;
height:110%;
background:white;
margin:0 auto;
text-align:center;
color:black;
}
#insert{
background:navy; color:white; font-family:impact; font-size:18px;width:170px; height:170px; border-radius:50%;
margin:0 auto;
float: left; margin-left: 100px;
top:200px;
position: relative;
}
#insert:hover

{
background:white;
color:navy;
}
label
{width:150px;}
td
{
    border:solid 2px black;
    max-width: 250px;
    text-align: center;
}
</style>
<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(x,y){

    var ajaxRequest;  // The variable that makes Ajax possible!

    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;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.getElementById('table').innerHTML = ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("GET", "../include/queryc.php?query=" + x + "&clause="+ y, true);
    ajaxRequest.send(null);

}

//-->
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></head>

<body>
   <a href="index.php"> <h4 style="float:right; color:blue; position: relative; left:-100px;" id="goback"> Go back? </h4></a>
    <div id="center">
<div id="queryform1" >
    <a href="#" onclick="$('#table2').css('display','block');">View All?</a>
    <span style="color:black;">search</span> <input type='text' onKeyUp="ajaxFunction(this.value,sel.options[sel.selectedIndex].value); " name='searchname' id="searchname" />

<span style="color:black;">search by</span> <select onChange="ajaxFunction(this.value,sel.options[sel.selectedIndex].value);" name="searchclause" id="searchclause">
        <option ></option>
    <option value="name">Name</option>
    <option value="email">Email Address</option>
    <option value="subject">Subject</option>
    <option value="date">Date</option>

</select>
<a href="../include/downloadcontact.php">Download file?</a>

<div id="table2" style="display: none; margin: 0 auto; position: relative; top:40px; max-width:700px;">
    <div id="viewall">
        <?php
        include '../include/include.php';
        $sql = 'select * from contactus' ;



//print_r($sql);
$result=mysql_query($sql);

        ?>
        <table>
<tbody>
<th>Name</th><th>Email</th><th>Subject</th><th style="width:200px;">Message</th><th>Date</th>
<tr>
<?php
while ($client = mysql_fetch_array($result, MYSQL_ASSOC)){
echo "
<tr>

<td >".$client[name]."</td>
<td >".$client[email]."</td>
<td >".$client[subject]."</td>
<td >".$client[message]."</td>
<td >".$client[date]."</td>




</tr>";
} ?>
</tbody></table>
</div></div><div id="table">TestTestTest</div>


</div></div>

</body>
</html>

Its a bit messy right now, I am planning on cleaning it up after I get it working. Thank you all so much!

Oh XMLHttpRequest.. we meet again. PS: matture please use $.ajax() - link given by @Reflic — Sherzod
– Sherzod, Commented Mar 17, 2013 at 22:30

Reflic · Accepted Answer · 2013-03-18 14:31:02Z

1

Why don't you make your AJAX Request also with jQuery? jQuery provides a simple $.ajax() function which makes it very easy to send AJAX Requests. http://api.jquery.com/jQuery.ajax/

Also with the jQuery Function your code would be not so messy. - Kevin

Edit: Example jQuery Function with callback.

$.ajax({
        url: 'test',
        type: 'POST',
        data: 'data=foo',
        success: function(text){
            $('.content').html(text);
        }
    });

The Response Text of the Request is in the variable text.

edited Mar 18, 2013 at 14:31

answered Mar 17, 2013 at 22:26

Reflic

1,42115 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

matture Over a year ago

Ive used ajax to post values to a database, but i havent used it to query and show results. How would i be able to replicate this call ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ document.getElementById('table').innerHTML = ajaxRequest.responseText; Thank you!

Reflic Over a year ago

I have added an example with an Callback function in the Answer.

matture Over a year ago

hey so ive got this so far but its not yielding any results function sendPHP(){ $('#table,#table2').css('display','none'); var query = $('#searchname').attr('value'); var clause = $('#searchclause').attr('value'); $.ajax({ url: '../include/queryc.php?, type: 'POST', data: "query="+query+"&clause="+clause, dataType: 'html', success: function(data) { $(data).appendTo('#table'); } }); return false; }

matture Over a year ago

i really appreciate the help

Reflic Over a year ago

Change ´$(data).appendTo('#table');´ to $('#table').html(data). This should work. Also please accept my answer as a right soulution.

Collectives™ on Stack Overflow

Having trouble with PHP-Ajax query to sql server

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related