Question

Could someone point me in the right direction here?
Basically, I’ve got this jQuery code snippet:

$('.bggallery_images').click(function () {
    var newBG = "url('" + $(this).attr('src');
    var fullpath = $(this).attr('src');
    var filename = fullpath.replace('img/Bakgrunner/', '');

    $('#wrapper').css('background-image', newBG);

    // Lagre til SQL
    $.ajax({
        url: "save_to_db.php",
        // The url to your function to handle saving to the db
        data: filename,
        dataType: 'Text',
        type: 'POST',
        // Could also use GET if you prefer
        success: function (data) {
            // Just for testing purposes.
            alert('Background changed to: ' + data);
        }

    });

});

This is being run when I click a certain button. So it’s actually within a click handler.

If I understand this correctly, this snippet takes the source if the image I just clicked and strips it so I end up with only the filename. If I do an alert(filename), I get the filename only. So this is working ok.

But then, it does an ajax call to a php file called “save_to_db.php” and sends data: filename. This is correct right? Then, it does a callback which does an alert + data.

Does this seem correct so far?

Cause my php file looks like this:

<?php
require("dbconnect2.php");
$uploadstring = $_POST['filename'];
$sessionid = $_SESSION['id'];
echo ($sessionid);
mysql_query("UPDATE brukere SET brukerBakgrunn = '$uploadstring' WHERE brukerID=" .$_SESSION['id']);
mysql_close(); 
?>

When I click the image, the jQuery snippet fires and I get the results of this php file as output for the alert box. I think that the variables somehow are empty.
Because notice the echo($sessionid); which is a variable I’ve created just to test what the session ID is. And it returns nothing. What could be the issue here?

Edit: I just tried to echo out the $uploadstring variable as well and it also returns nothing. It’s like the jQuery snippet doesn’t even pass the variable on to the php file?

Answer 1

You’re trying to send just the filename, but you’re retrieving a named form field in your PHP code. So you need to send a named form field:

Change your ajax call like this:

$.ajax({
    url: "save_to_db.php",
    // The url to your function to handle saving to the db
    data: {filename: filename}, // <= Change #1 (give jQuery a simple object)
    dataType: 'text',           // <= Change #2 ('text', not 'Text')
    type: 'POST',
    // Could also use GET if you prefer
    success: function (data) {
        // Just for testing purposes.
        alert('Background changed to: ' + data);
    }

});

Your PHP script will now receive a POST varible called filename whose value comes from your filename Javascript variable. (You can also use $.post to do this, but it’s just a wrapper for ajax anyway…)

Passing a simple object into the ajax call is the easiest way to send fields to the server. jQuery will take the object and create the URL-encoded form data (doing all of the escaping for you) by using the object’s keys and field names. So for instance, if you give it this object:

data: {a: 1, b: "testing one two three", c: 3}

…it sends this URL-encoded data:

a=1&b=testing+one+two+three&c=3

(Note how it encodes it for us.) More in the ajax docs (but beware, at present what the docs say about array handling is wrong; see this bug report for details).