• 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>&nbsp;&nbsp;&nbsp;&nbsp;";
                                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 to regattaAjax.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.

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    If your Ajax handler makes no use of any WP resources or functions, you do not need to use admin-ajax.php. In fact, you really don’t want to do so unless absolutely necessary as admin-ajax.php adds in a lot of WP overhead to the request.

    You can involve other PHP files with the one requested by using require or include statements on the requested file. PHP interprets such statements as though the referred file contents were all copy/pasted to replace the include/require statement.

    Check your web page’s source code to ensure only one main jQuery library reference occurs on the page. WP has its own jQuery version stored locally which will conflict with other sources such as from googleapis.com. Even if you have not referenced the second jQuery, your theme or plugin may have. In case of conflict, or to avoid future potential conflict, you should use the local WP version yourself.

    Reference the local version by enqueuing with wp_enqueue_script('jquery'); called from a callback added to “wp_enqueue_scripts” action. In fact, you ought to also enqueue your own script file in a similar manner, in which case you can enqueue jQuery by simply passing ['jquery'] as the dependency argument when enqueuing your own script file.

    When you use the local version, it runs in “noConflict” mode, so the $ shortcuts are no longer valid. Replace with full jQuery references or wrap your scripts in a “noConflict wrapper” which re-assigns the $ shortcut (or any other character you might like).

    If you’ve verified there is only one jQuery library reference, there can be many other reasons why nothing is appearing. Check your PHP error log and the JS console for possible clues.

Viewing 1 replies (of 1 total)
  • The topic ‘Front-End AJAX Request not working’ is closed to new replies.