Simplest jQuery, PHP, AJAX, and sqlite example?

Question

I'm having a really difficult time understanding how this all works together. I've fiddled for a few days with this and have been unable to come up with any results. I'm trying to fill in a text field in a form, and when the form is submitted, I want to add the text to my sqlite db using ajax.

I understand that you need a $.get call in jquery which is triggered on the form's submit. That seems to work fine as I can trigger js alert boxes from there. However, when I pass the address of the php script which has lines to add to the sqlite db using PDO, nothing is added to the db. However, when I run this php script from using php cli, something will get added to the db.

I seems to be mission some essential step in between here, I would really appreciate it if someone could bridge this gap for me!

Edit: As requested by Martin here's some code:

My php generates some list like this with a form in the middle:

<ul>
<li>
    hello
</li>
<li id="formItem">
<form action="" method="post">
    <input type=text name="content"/>
</form>
</li>
<li>
    world
</li>
</ul>

Then my jquery code looks to add whatever is in the textbox right above it on the list does an ajax call. This is inside a $(document).ready(function(){.

 $("form").submit(function() {

    var inputText = $("input").val();

    $.ajax({

    type: "POST",
    url: "add.php",
    data: inputText,
    success: function() {

        $('#formItem').prev().after(
            "<li>" + inputText + "</li>"
        )
    }
    });

});

My add.php file looks like this and it will insert something into my db if I execute the php script on the cli:

<?php $base = new PDO('sqlite:todo.db');
$sql = $base->prepare("INSERT INTO ThisTable (content, priority) VALUES ('lolololol', 1);");
$sql->execute();
$base = null; ?>

Thanks in advance!

Answer 1

Do not forget that HTTP is a stateless protocol. Each HTTP request you make to your webserver is treated the same. This stands for whether the HTTP request was made using AJAX or not.

What I'm trying to say is that AJAX is a client side implementation. All AJAX means is that you can interact with your webserver without having to reload your page. Implementing an AJAX request for the first time in JavaScript is often a brain bender, because the requirement of callbacks and the general asynchronous nature of the interaction makes it difficult to grasp.

On the server however, there should be nothing to worry about. An AJAX request is still an HTTP request, so whether you navigate to http://www.yourwebsite.com/ajax/interact.php?a=1&b=2 in your browser, or make a HTTP GET request using AJAX, your PHP script will still behave exactly the same. If you var_dump($_GET); in either situation, you will get an array whose a and b members equal 1 and 2 respectively.

If you can emulate the AJAX request in your browser successfully by navigating to the URL manually, that's the server work done.

Having established that, your JavaScript should look something like this:

$('#yourForm').bind('submit', function (event) {
    jQuery.get('/ajax/interact.php', 'a=1&b=2', function (response) {
        alert("AJAX request succeeded, response from the server was: " + response);
    });

    event.preventDefault();
});

Once you're confident using jQuery's AJAX methods, you might want to look at methods such as serialize() to help you out, and you can develop your jQuery code to something as follows:

$('form.ajax').live('submit', function (event) {
    var self = $(this);

    jQuery[(self.attr('method') || 'get').toLowerCase()](self.attr('action'), self.serialize(), function (response) {
        alert("AJAX request succeeded, response from the server was: " + response);
    });

    event.preventDefault();
});

Hope this helps :)

Answer 2

Your submit function should return false;