Front-End AJAX Request not working
-
I’m building a plugin where a script makes an AJAX call to a separate PHP file, as such:
function regattaTable(yearID) { var yearID = $("#yearID").val(); console.log(yearID); $.ajax({ url: "../wp-content/plugins/regatta/regattaAjax.php", method: "GET", data: { action: "regattaList", yearID: yearID }, type: 'POST', dataType: 'JSON', success: function(data) { console.log(data); var regattaList = data.regattaList; var greenFleet, hkNat; var html = ""; html += "<input type='hidden' id='yearID' value='" + yearID + "' />"; html += "<p><a href='#' class='editRegatta' data-id='0'>" + add + "</a></p>"; html += "<table class='myTable'>"; html += "<tr>"; html += "<th>Name</th>"; html += "<th>Short Name</th>"; html += "<th>Date</th>"; html += "<th>Venue</th>"; html += "<th>Green</th>"; html += "<th>Nat</th>"; html += "<th>Action</th>"; html += "</tr>"; $.each(regattaList, function(i, row) { greenFleet = (row.greenFleet == 1) ? tick : ""; hkodaNat = (row.hkodaNat == 1) ? tick : ""; html += "<tr>"; html += "<td>" + row.regattaName + "</td>"; html += "<td>" + row.regattaNameShort + "</td>"; html += "<td class='center'>" + row.regattaDate + "</td>"; html += "<td class='center'>" + row.regattaVenue + "</td>"; html += "<td class='center'>" + greenFleet + "</td>"; html += "<td class='center'>" + hkodaNat +"</td>"; html += "<td class='center'>"; html += "<a href='#' class='editRegatta' data-id='" + row.regattaID + "'>" + edit + "</a> "; html += "<a href='#' class='delRegatta' data-id='" + row.regattaID + "' data-name='" + row.regattaName + "'>" + del +"</a>"; html += "</td>"; html += "<tr>"; }); html += "</table>"; $("#regattaTable").html(html); $(".editRegatta").on("touch click", function() { var regattaID = $(this).attr("data-id"); regattaForm(regattaID); }); $(".delRegatta").on("touch click", function() { var regattaID = $(this).attr("data-id"); var dataName = $(this).attr("data-name"); if ((confirm("Delete " + dataName))) { regattaDelete(regattaID) } }); } }); }
This successfully retrieves the Ajax file (Status 200 in Network Console), but nothing is happening. From what I’ve read, I understand that I should be making reference to
/wp-admin/admin-ajax.php
, but I don’t know how to do that as well as make reference toregattaAjax.php
file, the contents of which are as follows:<?php include "./connect.php"; include "./function.php"; $action = $_POST["action"]; switch($action) { case "regattaList": $yearID = $_POST["yearID"]; $rs = readRegattaList($dbh, $yearID); $regattaList = $rs->fetchAll(PDO::FETCH_ASSOC); $res = array( "regattaList" => $regattaList ); echo json_encode($res); break; case "regattaDetail": $regattaID = $_POST["regattaID"]; $rs = regattaDetail($dbh, $regattaID); $regattaDetail = $rs->fetchAll(PDO::FETCH_ASSOC); $res = array( "regattaDetail" => $regattaDetail ); echo json_encode($res); break; case "regattaSave": saveRegatta($dbh); break; case "regattaDelete": $regattaID = $_POST["regattaID"]; deleteRegatta($dbh, $regattaID); break; } function saveRegatta($dbh) { // save regatta data $regattaID = isset($_POST["regattaID"]) ? $_POST["regattaID"] : ""; $regattaName = isset($_POST["regattaName"]) ? $_POST["regattaName"] : ""; $regattaNameShort = isset($_POST["regattaNameShort"]) ? $_POST["regattaNameShort"] : ""; $regattaDate = isset($_POST["regattaDate"]) ? $_POST["regattaDate"] : ""; $regattaVenue = isset($_POST["regattaVenue"]) ? $_POST["regattaVenue"] : ""; $greenFleet = isset($_POST["greenFleet"]) ? $_POST["greenFleet"] : ""; $hkodaNat = isset($_POST["hkodaNat"]) ? $_POST["hkodaNat"] : ""; $yearID = isset($_POST["yearID"]) ? $_POST["yearID"] : ""; if ($regattaID != "") { $set = "regattaName = :regattaName, regattaNameShort = :regattaNameShort, regattaDate = :regattaDate, regattaVenue = :regattaVenue, greenFleet = :greenFleet, hkodaNat = :hkodaNat, regattaYear = :yearID"; $data = array( "regattaName" => $regattaName, "regattaNameShort" => $regattaNameShort, "regattaDate" => $regattaDate, "regattaVenue" => $regattaVenue, "greenFleet" => $greenFleet, "hkodaNat" => $hkodaNat, "yearID" => $yearID ); if ($regattaID == 0) { $sql = "INSERT INTO regatta SET $set"; } else { $data["regattaID"] = $regattaID; $sql = "UPDATE regatta SET $set WHERE regattaID = :regattaID"; } $rs = $dbh->prepare($sql); $rs->execute($data); } } function deleteRegatta($dbh, $regattaID) { $data = array( "regattaID" => $regattaID ); $sql = "DELETE FROM regatta WHERE regattaID = :regattaID"; $rs = $dbh->prepare($sql); echo $rs->execute($data); }
All this is coming from a standalone non-WP PHP app that queries a database and displays certain data pulled from tables according to a selection from a dropdown that the user makes. I’m attempting to turn that PHP app into a plugin.
Other possible sticking points are the inclusions to connect.php and function.php within the regattaAjax.php file. As a standalone PHP app, connect.php connected to a database to draw the data; currently, I haven’t touched this and left it as a separate database to the main WP database. The contents are as follows:
connect.php
<?php $hostname = "localhost"; $database = "sailing"; $user_name = "root"; $password = "root"; /* $hostname = "localhost"; $database = "rapid1_alone"; $user_name = "rapid1_alone"; $password = "BagelBun26"; * */ // now connect try { $dbh = new PDO("mysql:host=$hostname; dbname=$database; charset=utf8", $user_name, $password ); $dbh->setAttribute(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY, true); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::NULL_EMPTY_STRING); } catch (PDOException $e) { print "Error!: " . $e->getMessage() . "<br/>"; die(); }
function.php
<?php // shared functions for HKODA regatta application $yearID = 2018; $maxComplete = 6; $tick = "<img src='./img/iconTick.png' height='20' />"; $edit = "<img src='./img/iconEdit.png' height='20' />"; $delete = "<img src='./img/iconCross.png' height='20' />"; $add = "<img src='./img/iconAdd.png' height='20' />"; /////////////////////////////////////////////////////////////////// function readRegattaList($dbh, $yearID) { // list of regattas for selected year $data = array( "yearID" => $yearID ); $sql = "SELECT regattaID, regattaYear, regattaName, regattaNameShort, regattaDate, regattaVenue, greenFleet, hkodaNat FROM regatta WHERE regatta.regattaYear = :yearID ORDER BY regattaDate"; $rs = $dbh->prepare($sql); $rs->execute($data); return $rs; } /////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////// function regattaDetail($dbh, $regattaID) { $data = array( "regattaID" => $regattaID ); $sql = "SELECT * FROM regatta where regattaID = :regattaID"; $rs = $dbh->prepare($sql); $rs->execute($data); return $rs; } ///////////////////////////////////////////////////////////////////
I know this is a very loaded request for help / direction, but any advice at all would be very very much appreciated.
- The topic ‘Front-End AJAX Request not working’ is closed to new replies.