AJAX database issue

Question

I am trying to update a column in a table which i change a boolean from false to true. I am using AJAX to send data to a php file and then the php file does the database update query. so far i have

if (r == true)
{
    mypic.style.visibility = 'hidden';
    leftbox.style.border = '3px solid white';
    //pressed ok DO AJAX STUFF HERE
    var data = true;
    $.post('filetoupdate.php', data, function(data) {
        //Here you can get the output from PHP file which is (data) here
    });
}
else
{
    //return pill to clock
}

and

<?php 
require_once "connect.php";
    echo
   pg_query("UPDATE usermeds SET taken=true WHERE id=21");


?>

The connect script is definitely working. The code doesn't work for some reason not sure why? The action.js:

function doFirst(){
    mypic = document.getElementById('pillpic');
    mypic.addEventListener("dragstart", startDrag, false);
    mypic.addEventListener("dragend", endDrag, false);
    leftbox = document.getElementById('mouth');
    leftbox.addEventListener("dragenter", dragenter, false);
    leftbox.addEventListener("dragleave", dragleave, false);
    leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false);
    leftbox.addEventListener("drop", dropped, false);

}
function endDrag(e){
    mypic = e.target;
    mypic.style.visibility = 'visible';
}
function dragenter(e){
    e.preventDefault();
    leftbox.style.border = '3px solid red';

}
function dragleave(e){
    e.preventDefault();
    leftbox.style.border = '3px solid white';
}
function startDrag(e){
    var code = '<img src="clock/pill.png" alt="pill image" id="pillpic"/>';
    e.dataTransfer.setData('Text', code);
}
function dropped(e){
    e.preventDefault();
    var r=confirm("Are you sure you want to take this pill?");
    if (r == true)
    {
        mypic.style.visibility = 'hidden';
        leftbox.style.border = '3px solid white';
        //pressed ok DO AJAX STUFF HERE
        var data = true;
        $.post('js/filetoupdate.php', data, function(data) {
            //Here you can get the output from PHP file which is (data) here
        });
    }
    else
    {
        //return pill to clock
    }


}
window.addEventListener("load", doFirst, false);
init();
function init(){
var clock = document.getElementById('clock');
var currentdate = new Date();
var datetime = currentdate.getHours();
if(datetime==1||datetime==13){
clock.style.backgroundImage="url(clock/clock1.png)";
}
else if(datetime==2||datetime==14){
clock.style.backgroundImage="url(clock/clock2.png)";
}
else if(datetime==3||datetime==15){
clock.style.backgroundImage="url(clock/clock3.png)";
}
else if(datetime==4||datetime==16){
clock.style.backgroundImage="url(clock/clock4.png)";
}
else if(datetime==5||datetime==17){
clock.style.backgroundImage="url(clock/clock5.png)";
}
else if(datetime==6||datetime==18){
clock.style.backgroundImage="url(clock/clock6.png)";
}
else if(datetime==7||datetime==19){
clock.style.backgroundImage="url(clock/clock7.png)";
}
else if(datetime==8||datetime==20){
clock.style.backgroundImage="url(clock/clock8.png)";
}
else if(datetime==9||datetime==21){
clock.style.backgroundImage="url(clock/clock9.png)";
}
else if(datetime==10||datetime==22){
clock.style.backgroundImage="url(clock/clock10.png)";
}
else if(datetime==11||datetime==23){
clock.style.backgroundImage="url(clock/clock11.png)";
}
else if(datetime==0||datetime==12){
clock.style.backgroundImage="url(clock/clock12.png)";
}
}

The html:

    <title> Homepage </title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <style type="text/css">
    #mouth {
    position: absolute;
    left: 491px;
    top: 551px;
    right: auto;
    bottom: auto;
    width: 214px;
    height: 218px;
}
    #message {
    position: absolute;
    left: 836px;
    top: 321px;
    right: auto;
    bottom: auto;
}
    #message2 {
    position: absolute;
    left: 826px;
    top: 379px;
    right: auto;
    bottom: auto;
}
    #addbutton {
    position: absolute;
    left: 873px;
    top: 197px;
    right: auto;
    bottom: auto;
}
    #clock {
    background-color: #FFF;
    background-image: url(clock/clock1.png);
    height: 398px;
    width: 457px;
    position: absolute;
    left: 781px;
    top: 415px;
    right: auto;
    bottom: auto;
}
    #wrapper #photoslider #appframe #clock img {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 308px;
    top: 154px;
    right: auto;
    bottom: auto;
}
    </style>
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/yail.1.4.js"></script>
    <script type="text/javascript" src="js/action.js"></script>

</head>

<body>
    <div  id="wrapper">
        <div id="header">
            <h1> Medomind </h1>
            <div id="login">
            <form>
            Username: <input type="text/email" name="user"><br>
            Password:  <input type="password" name="password"><br>
            <button name="action" value="send" type="submit">Log In</button> 
            Sign Up? 
            </form>

        </div>
        </div>

        <div id ="testimonials"></div>
        <div id ="photoslider">
        <!--APP CONTENT STARTS HERE-->
        <!--APP CONTENT STARTS HERE-->
        <!--APP CONTENT STARTS HERE-->
        <div id="appframe">
        <div id="addbutton"><a href="http://google.com"><img src="images/addbutton.png" alt="add new medication image"/></a></div>
        <div id="message"><h2>Todays medication</h2></div>
        <div id="message2"><h3>Drag and drop to take medication</h3></div>
        <div id="mouth"><img src="images/mouth.png" alt="mouth image"/></div>
        <div id="clock"><img src="clock/pill.png" alt="pill image" id="pillpic"/></div>
        </div>
        <!--APP CONTENT ENDS HERE-->
        <!--APP CONTENT ENDS HERE-->
        <!--APP CONTENT ENDS HERE-->
        </div>

    </div>
        <div id ="footer">
        Team C CS353
    </div>
</body>


</html>

@VladimirGordienko the code doesnt work and i dont know why? — Ben
– Ben, Commented Dec 11, 2013 at 12:58
what actually does not work? can you do some debug? look at browser console -> xhr, does ajax was send? if yes and it return 200, try to log data variable from ajax callback, then provide you debug result — Vladimir Gordienko
– Vladimir Gordienko, Commented Dec 11, 2013 at 13:01
@VladimirGordienko im new to ajax and java script overall i think i get a 500 internal server error? i will edit and post all the code if you want to try — Ben
– Ben, Commented Dec 11, 2013 at 13:19

ssuperczynski · Accepted Answer · 2014-01-06 20:03:35Z

1

<?php

$connect = pg_connect("host=localhost dbname=postgres user=postgres password=pass");
$query = "UPDATE usermeds SET taken=true WHERE id=21";

$result = pg_query($connect ,$query );

if ($result) {
    echo "Record updated";
}
else {
    echo "Error occured";
}
pg_close($connect);

?>

answered Jan 6, 2014 at 20:03

ssuperczynski

3,4463 gold badges46 silver badges64 bronze badges

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

Collectives™ on Stack Overflow

AJAX database issue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related