Question

I have the following code which sends an AJAX POST to a php file on my server to add a row into a MySQL table. This function gets run when a user marks an item as their favorite:

$.ajax({
    type: 'POST',
    data: 'school='+school+'&token='+token,
    url: 'http://www.codekraken.com/testing/snowday/database9.php',
    success: function(data){
    console.log(data);
    },
    error: function(){
    console.log(data);
    }
 });

I also have a similar function that runs when they delete the favorite:

data: 'school=&token='+token,

This works, but not consistently. The PHP code is below:

<?php
$server = "localhost";
$username = "";
$password = "";
$database = "";
$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());

mysql_select_db($database, $con);

$token = $_POST["token"];
$school = $_POST["school"];

if (strlen($token) == 0){
    die('Incorrect token');
}

if (strlen($school) == 0){
    die('Invalid school name');
}

$sql = "INSERT INTO Snow (Token, School, Skip) ";
$sql .= "VALUES ('$token', '$school', '0') ON DUPLICATE KEY UPDATE School='$school'";

if (!mysql_query($sql, $con)) {
    die('Error: ' . mysql_error());
} else {
    echo "$token, $school = Success";
}

mysql_close($con);
?>

What I mean by it not working consistently is that if I mark one item as the favorite, it will create a row. If I unmark it, it will change $school to nothing. If I then mark a different item, it will change to that item. IF, however, I try marking the first item as a favorite, it won’t update, but will retain the last change.

So, it seems that it’s only updating the row each time something new happens, but not if the value has already been present even though it’s not CURRENTLY present.

NOTE: Column Token is indexed as a UNIQUE PRIMARY

The JS code that pertains to var school:

function setFavorite() {
    var threshold = {
        x: 30,
        y: 10
    };
    var originalCoord = {
        x: 0,
        y: 0
    };
    var finalCoord = {
        x: 0,
        y: 0
    };

    function touchMove() {
        finalCoord.x = event.targetTouches[0].pageX;
        changeX = originalCoord.x - finalCoord.x;
        var changeY = originalCoord.y - finalCoord.y;
        if (changeY < threshold.y && changeY > (threshold.y * -1)) {
            changeX = originalCoord.x - finalCoord.x;
            if (changeX > threshold.x) {
                window.removeEventListener('touchmove', touchMove, false);
                $(document).off("touchmove", ".row");
                if ($(event.target).attr("class") === "row-inside") {
                    var element = $(event.target);
                }
                if ($(event.target).attr("class") === "row-l") {
                    var element = $(event.target).parent();
                }
                if ($(event.target).attr("class") === "row-r") {
                    var element = $(event.target).parent();
                }
                var text = $(element).find(".row-l").text();

                var token = window.deviceToken;
                var school = $(element).find(".row-l").text();

                var favstatus = $(element).find(".row-r").text();
                var thisStar = $(element).parent().find(".star-inside");
                $(element).css("margin-left", "-75px");
                if ($(thisStar).hasClass("favorite")) {
                    $.ajax({
                        type: 'POST',
                        data: 'school=&token=' + token,
                        url: 'http://www.codekraken.com/testing/snowday/database10.php',
                        success: function (data) {
                            console.log(data);
                        },
                        error: function () {
                            console.log(data);
                        }
                    });
                    $(".clear span").text("");
                    $(thisStar).removeClass("favorite");
                    localStorage.removeItem("favorite");
                    localStorage.removeItem("favorite-status");
                } else {
                    $.ajax({
                        type: 'POST',
                        data: 'school=' + school + '&token=' + token,
                        url: 'http://www.codekraken.com/testing/snowday/database10.php',
                        success: function (data) {
                            console.log(data);
                        },
                        error: function () {
                            console.log(data);
                        }
                    });
                    $(".clear span").text("\"" + text + "\"");
                    localStorage.setItem("favorite", text);
                    localStorage.setItem("favorite-status", favstatus);
                    $(".star-inside").not(thisStar).removeClass("favorite");
                    $(thisStar).addClass("favorite");
                }
                setTimeout(function () {
                    $(element).css("margin-left", "0px");
                }, 500);
                setTimeout(function () {
                    $(document).on("touchmove", ".row", function () {
                        touchMove();
                    });
                }, 800);
            }
        }
    }

    function touchStart() {
        originalCoord.x = event.targetTouches[0].pageX;
        finalCoord.x = originalCoord.x;
    }
    $(document).on("touchmove", ".row", function () {
        touchMove();
    });
    $(document).on("touchstart", ".row", function () {
        touchStart();
    });
}

MySQL Output:

CREATE TABLE `Snow` (
 `Token` varchar(64) COLLATE utf8_unicode_ci NOT NULL,
 `School` text COLLATE utf8_unicode_ci NOT NULL,
 `Skip` int(1) NOT NULL,
 PRIMARY KEY (`Token`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicod

Answer 1

I figured it out.

The problem seemed to be with Phonegap caching the AJAX request. I then thought if I added cache: false, to the AJAX request, it would solve it, but once again, no dice.

I then googled around a bit, and found the piece of code that made it work:

beforeSend: function(xhr) { xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("pragma", "no-cache"); },

You put that within your AJAX request, so it would look something like:

$.ajax({
    cache: false,
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.setRequestHeader("pragma", "no-cache");
    },
    type: 'POST',
    ...
});

---

I’m not entirely sure if it can work without also setting cache: false, but I don’t feel like rocking the boat. I also specified within my PHP code these headers:

header("Expires: Tue, 01 Jul 2001 06:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Turns out the immediate above is not nescesary, but I’ll leave it here in case it helps someone else.