3

So i'm trying to make a drawing application in html/javascript, where i want to save the files to mysql/phpmyadmin. My problem is connecting to the database i set up.

What's happening is that the user draws on the canvas, clicks on a save button and i send the lines (saved in an array) and the user name from my javascript file to a php file which sends the information to the database. I've tried looking online for a solution but i can't seem to find anything that helps me. It's probably right in front of me, but i've never tried writing in javascript and php.

Just to be sure there's no confusion: I can't seem to figure out how to send the data from my javascript file to my php file and update the database

Here's what i got so far:

Html:

<button id="saveimage" onclick="saveImage()">Save image</button>

Javascript:

function saveImage()
{
    var position = JSON.stringify(allMousePos);
    author = prompt("Please type your name");

    $.ajax({
        type: 'post',
        url: 'https://localhost/folder/database.php',
        data: {author: author, position: position},
        success: function( data ) {
        console.log( data );
        }
    });
}

Php:

$dbhost = 'localhost';
$dbuser = 'User';
$dbpass = 'pass';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if (!$conn)
{
    die('Could not connect: ' . mysql_error());
}

if (!get_magic_quotes_gpc())
{
    $author = addslashes($_POST['author']);
    $mousepositions = addslashes($_POST['position']);
} else
{
    $author = $_POST['name'];
    $mousepositions = $_POST['position'];
}

var_dump($author);

$sql = "INSERT INTO Images (Author, Image) VALUES ('$author', '$mousepositions')";

mysql_select_db('db_to_use');
$retval = mysql_query($sql, $conn);

if (!$retval)
{
    die('Could not enter data: ' . mysql_error());
}

echo "Entered data successfully\n";
mysql_close($conn);

I'm not getting any output from the console in chrome or firefox when running this, and nothing in the database

I don't know if you need any more info, but let me know if you do. The database only has 3 fields, an id which auto increments, and then author and the positions.

8
  • Why don't you debug in IDE? Did you check the logs? Also, print some message in between lines and see if those are displaying. You will know where it is erring out.
    – Kevin Rave
    Sep 17, 2014 at 16:29
  • You have an event handler nested in a function. Remove this line: $("#saveimage").on( 'click', function () { and the corresponding braces. The click handler is not needed as your function is already triggered by the elements onclick attribute
    – Steve
    Sep 17, 2014 at 16:31
  • did you check response in firebug ? Firefox says "POST localhost/folder/database.php [0ms]" just expand this and click on response tab.
    – Aksh
    Sep 17, 2014 at 17:18
  • 1
    I don't know where you learned to code like this, but please, STOP. This is based on dangerously out of date practices and is full of cargo-cult code that serves no purpose, plus is dangerously insecure as addslashes is not the right way to do this. mysql_query is an obsolete interface and should not be used in new applications and will be removed in future versions of PHP. PDO is not hard to learn. A guide like PHP The Right Way explains best practices.
    – tadman
    Sep 17, 2014 at 17:20
  • I'm not sure where to find the response in firebug? If i click on the line "POST localhost/folder/database.php [0ms]" a new window is opened, but not sure what to look for here..?
    – AggaMax
    Sep 17, 2014 at 17:36

2 Answers 2

0

As per my comment, you have an unnecessary nested click handler within your function, so remove that. Also you are attempting to make a secure connection, but (probably) dont have ssl installed on your machine, so you need to make a regular connection (http not https):

function saveImage()
{
    var position = JSON.stringify(allMousePos);
    author = prompt("Please type your name");

    $.ajax({
        type: 'post',
        url: 'http://localhost/folder/database.php', //<--Note http
        data: {author: author, position: position},
        success: function( data ) {
        console.log( data );
        }
    });
}
1
  • yea i updated my code above as you said. Changing from http to https looks like it does it alright in firefox, as it now says "POST localhost/folder/database.php [HTTP/1.1 200 OK 3ms]", but nothing in the database. With the same changes, in chrome it says "XMLHttpRequest cannot load localhost/folder/database.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. "
    – AggaMax
    Sep 17, 2014 at 17:51
0

Don't forget to decode your datas (previously encoded by JSON.stringify).

Try to add a json_decode() and display all your vars with a var_dump() before trying to deal with your database.

Hope it helps.

2
  • I did as Steve said, which now outputs something to the console. Chrome says "POST localhost/folder/database.php net::ERR_INSECURE_RESPONSE" and Firefox says "POST localhost/folder/database.php [0ms]" . I also did what you said, but var_dump doesn't seem to output anything
    – AggaMax
    Sep 17, 2014 at 17:02
  • Oh, really ... Did you tried with "http" instead of "https" ? Sep 19, 2014 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.