wordpress ajax - fetch information from a database with AJAX via wordpress

Question

I found the script below at http://www.w3schools.com/php/php_ajax_database.asp. But I find hard to implement this via wordpress, this works perfectly at localhost but failed at wordpress. I've already done searching w/ same process but still unable to figure out. May I ask a step by step process on how to call ajax script via wordpress?

**The My Custom FrontPage**

<?php
/*
Template Name: Custom Template
*/
?>
<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>
<script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
        <div id="primary">
            <div id="content" role="main">

<form>
<select name = "users" onChange = "showUser(this.value)">
                        <?php
                            include 'dbconfig.php';
                            $result=mysql_query("SELECT DISTINCT lastname FROM people ORDER BY lastname ASC;");
                            echo '<option value="">' . 'Select an Agent' . '</option>';

                            while ($row=mysql_fetch_array($result))
                                {
                                echo '<option value="' . $row['lastname'] . '">' . $row['lastname'] . '</option>';
                                }
                        ?>
                        </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

            </div><!-- #content -->
        </div><!-- #primary -->

<?php get_footer(); ?>

The PHP File (getuser.php)

<?php
$q = intval($_GET['q']);

include 'dbconfig.php'; // PHP File to login credentials
$sql="SELECT * FROM people WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

<?php
$q = intval($_GET['q']);

include 'dbconfig.php'; // PHP File to login credentials
$sql="SELECT * FROM people WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['firstname'] . "</td>";
  echo "<td>" . $row['lastname'] . "</td>";
  echo "<td>" . $row['age'] . "</td>";
  echo "<td>" . $row['hometown'] . "</td>";
  echo "<td>" . $row['job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

action taken: converted (getuser.php) as function then add to themes functions.php. then call wp add_action hook.please see below

function getuser(){
  //get the data from ajax() call
  //copied script from getuser.php
    }
  // creating Ajax call for WordPress
   add_action( 'wp_ajax_nopriv_getuser', 'getuser' );
   add_action( 'wp_ajax_getuser', 'getuser' );

Your help is much appreciated.Thank you .

See this answer, it may shed some insight.

Ohgodwhy
– Ohgodwhy

2014-01-25 05:08:39 +00:00
Commented Jan 25, 2014 at 5:08 — Ohgodwhy
– Ohgodwhy, Commented Jan 25, 2014 at 5:08

Andrew Plummer · Accepted Answer · 2014-02-01 01:25:31Z

1

First problem to address:

Those add_action's go in admin-ajax.php, which can then trigger functions in functions.php, it appears as if you have written those in functions.php? This is even for client facing ajax, even though that doesn't necessarily make sense.

A couple other points:

Consider using jquery or an ajax library at least at first to simplify things, on the client side.

Consider using the excellent JSON api here: http://wordpress.org/plugins/json-api/ , I wrote a huge amount of wp ajax functions manually then found that library addressed everything I wanted to do for far less work.

Edit:

Here is an example method from my website using Angular's $http method and the above json-api library. This example gets the latest 3 posts with the custom attribute and values specified, only returning some data (to save bandwidth).

var baseUrl = http://localhost:3000 // Your Site Url Here

$http({
        method:'GET',
        url:baseUrl,
        params:{
            json:'get_posts',
            count:3,
            include:'excerpt,thumbnail,title,slug,date,categories',
            meta_key: 'featured',
            meta_value: 'projects_yes'
        }
    })
        .success(function(data, status, headers, config){
            console.log(data);
        })
        .error(function(data,status,headers,config){
            console.log(data,',\n', status, headers, config);
        });

edited Feb 1, 2014 at 1:25

answered Jan 25, 2014 at 4:34

Andrew Plummer

1,1701 gold badge12 silver badges22 bronze badges

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

2 Comments

AbeDupa Over a year ago

Thank you Adrew for your suggestion, Can you show to me how to do it using ajax library or how to make it works in any method? actually, I am new to php, wordpress just learning how to connect script. More power!

Andrew Plummer Over a year ago

Edited to include example with angular and the above library. I spent days on this and can't stress enough how much it is the easiest way to call wordpress data with ajax.

Collectives™ on Stack Overflow

wordpress ajax - fetch information from a database with AJAX via wordpress

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related