ajax to post data and run php sql query on click

Question

I'm trying to get it so when a button is pressed it runs a PHP function without reloading the page.

I have this button:

<div class= "obutton feature2" data-id="<?php echo $bookID;?>">
    <button>Reserve Book</button>
</div>

Which I want to run:

<script>
    $('button').click(function() 
    {
        var book_id = $(this).parent().data('id'),
        result = "Book #" + book_id + " has been reserved.";
        $.post('reserbook.php', 'book_id');    
        $('.modal-box').text(result).fadeIn(700, function() 
        {
            setTimeout(function() 
            {
        $('.modal-box').fadeOut();
            }, 2000);
        });
    });
</script>

The PHP file is, reservebook.php:

<?php
session_start();
$conn = mysql_connect('localhost', 'root', '');
mysql_select_db('library', $conn);
if(isset($_POST['jqbookID']))
{
    $bookID = $_POST['jqbookID'];
    mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES
    ('".$_SESSION['userID']."', '".$bookID."', '3')", $conn);
}
?>

The js runs fine and makes the modal box fade then out displaying the variable passed to it, I just don't know how to get the post working.

I've been trying to udnerstand looking at other answers on questions such as calling php function from jquery? and How to pass jQuery variables to PHP variable?

I'm also not sure if I need a ajax specific script to be called at the start as right now all I have is

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

for my jquery.

It is probably something very simply, a rookie mistake, so all help is appreciated.

Parixit · Answer 1 · 2013-12-12T11:42:35.173

0

<script>
    //called when button is clicked
    $('button').click(function() 
    {

        var book_id = $(this).parent().data('id'),
        result = "Book #" + book_id + " has been reserved.";

       //set parameter which you want to pass, url to be requested
        $.ajax({ url: 'reserbook.php',
             data: "book_id="+book_id,
             type: 'post',
             success: function(result) {
                  //after success it will be here and server have to send some data to be handled
                          alert(result);
                 $('.modal-box').text(result).fadeIn(700, function() 
                {
                   setTimeout(function() 
                {
                $('.modal-box').fadeOut();
                }, 2000);
                });
             }
        });
    });
</script>

edited Dec 12 '13 at 11:42

answered Dec 12 '13 at 11:36

Parixit

3,829
3
37
61

So, does that go with in my current script in place of where I have $.post? because on its own it doesn't know to run on click or what data to send. A lil' explanation with answers would be great. – Vereonix Dec 12 '13 at 11:40
@Tom Please check my update with comments. Ask me if you still have doubts – Parixit Dec 12 '13 at 11:45
Thank you for the update, sorry if I came across kinda dickish. Using the script you posted nothing happens now :/ – Vereonix Dec 12 '13 at 11:55
@Tom Please go through [jquery documentation](http://api.jquery.com/jQuery.ajax/) – Parixit Dec 12 '13 at 11:59

fxbt · Answer 2 · 2013-12-12T13:07:48.703

0

You have to add a parameter to the post function to get the postdata in your php

{ jqbookID: book_id }

Try this :

$('button').click(function() 
{

    var book_id = $(this).parent().data('id'),
    result = "Book #" + book_id + " has been reserved.";

    $.post('reservebook.php', { jqbookID: book_id  }, function() {

        $('.modal-box').text(result).fadeIn(700, function() 
        {
            setTimeout(function() 
            {
        $('.modal-box').fadeOut();
            }, 2000);
        });
    });
});

edited Dec 12 '13 at 13:07

answered Dec 12 '13 at 11:41

fxbt

2,556
19
19

hmmmm, now nothing happens :/ – Vereonix Dec 12 '13 at 11:53
Nothing still happens, could the script be made so it just posts the data and doesn't do the modal box, to try and trouble shoot whats up. Though its clearly something to do with ajax not working for me I think. – Vereonix Dec 12 '13 at 12:59
I used the php file `reserbook.php` just like in your script but i just saw that the real name of the file is `reservebook.php`. Change it in the post function. – fxbt Dec 12 '13 at 13:07
Yeah I noticed you missed spelled it :), but still nothing :/, I feel it must be something outside of the script and php, something just stopping the ajax from working. I have the script at the bottom of my body as the script with just the modal box wouldn't work elsewhere, could that affect it? – Vereonix Dec 12 '13 at 13:12
Try to call the post function without any callback to see if it works. `$.post('reservebook.php', { jqbookID: book_id });` – fxbt Dec 12 '13 at 13:17
Same result. Its probably something silly, that is interfering somehow, but I dunno what possibly could. – Vereonix Dec 12 '13 at 13:22

score 0 · Answer 3 · answered Dec 12 '13 at 11:46

0

What are you posting to reservebook.php? book_id is a string.You should send data in json or xml format to the server or using a query like key1=value1&key2=value2. $.post is a shortcut function i think it's better to use $.ajax and specify the type attribute POST.

answered Dec 12 '13 at 11:46

Morteza Edalati

95
1
8

So essentially what parixit posted, though when I try it, nothing happens, not even the modal box anymore. – Vereonix Dec 12 '13 at 12:03

ajax to post data and run php sql query on click

3 Answers3