ajax post within jquery onclick

Question

I have a button which calls a modal box to fade into the screen saying a value posted from the button then fade off, this works fine using jquery, but I also want on the same click for value sent from the button to be posted to a php function, that to run and the modal box to still fade in and out.

I only have this to let my site know what js to use:

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

I'm still new so sorry for a rookie question, but will that allow ajax to run, or is it only for jquery?

The current script I'm trying is: (Edited to be correctly formed, based on replies, but now nothing happens at all)

<script>
$('button').click(function() 
{

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

    $.ajax
    ({ 
        url: 'reservebook.php',
        data: "book_id="+book_id,
        type: 'post',
        success: function()
        {
            $('.modal-box').text(result).fadeIn(700, function() 
            {
                setTimeout(function() 
                {
                    $('.modal-box').fadeOut();
                }, 2000);
            });
        }
    });
});
</script>

Though with this the modal box doesn't even happen.

The php is, resersebook.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);
    }

?>

and to be thorough, the button is:

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

I'm new to this and I've looked at dozens of other similar questions on here, which is how I got my current script, but it just doesn't work.

Not sure if it matters, but the script with just the modal box that works has to be at the bottom of the html body to work, not sure if for some reason ajax needs to be at the top, but then the modal box wouldn't work, just a thought.

Danger: You are using an obsolete database API and should use a modern replacement. You are also vulnerable to SQL injection attacks that a modern API would make it easier to defend yourself from. — Quentin
– Quentin, Commented Dec 12, 2013 at 12:47
ah thank you, I keep being told this, and I keep meaning to read up on it and migrate over. — Vereonix
– Vereonix, Commented Dec 12, 2013 at 12:57
Are you serious not using mysql_real_escape_string(), htmlspecialchars() and filter_input()?! SQL Injection is only one problem. <?php echo $bookID;?> causes XSS as well. — mgutt
– mgutt, Commented Mar 15, 2015 at 23:17

Minoru · Accepted Answer · 2013-12-12 15:06:05Z

20

Try this. Edited to the final answer.

button:

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

script:

<script>
$('.reserve-button').click(function(){

    var book_id = $(this).parent().data('id');

    $.ajax
    ({ 
        url: 'reservebook.php',
        data: {"bookID": book_id},
        type: 'post',
        success: function(result)
        {
            $('.modal-box').text(result).fadeIn(700, function() 
            {
                setTimeout(function() 
                {
                    $('.modal-box').fadeOut();
                }, 2000);
            });
        }
    });
});
</script>

reservebook.php:

<?php
session_start();

$conn = mysql_connect('localhost', 'root', '');
mysql_select_db('library', $conn);

if(isset($_POST['bookID']))
{
    $bookID = $_POST['bookID'];

    $result = mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES ('".$_SESSION['userID']."', '".$bookID."', '3')", $conn);

    if ($result)
        echo "Book #" + $bookId + " has been reserved.";
    else
        echo "An error message!";
}
?>

PS#1: The change to mysqli is minimal to your code, but strongly recommended.

PS#2: The success on Ajax call doesn't mean the query was successful. Only means that the Ajax transaction went correctly and got a satisfatory response. That means, it sent to the url the correct data, but not always the url did the correct thing.

edited Dec 12, 2013 at 15:06

answered Dec 12, 2013 at 13:03

Minoru

1,7303 gold badges21 silver badges45 bronze badges

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

10 Comments

Vereonix Over a year ago

Still nothing, happens at all. This is my first time using ajax, and its not going well. I understand all the code but it just doesn't work. The fact the modal works on its own, but with the introduction of the ajax it doesn't, is there anything that could simply stop ajax from running? Also not sure my eyes are playing up but is there a missing close bracket on your script? well I closed in case, still nothing :/

Minoru Over a year ago

@Tom Does it insert anything in the database? Or it simply doesn't do anything?

Minoru Over a year ago

@Tom Try again with the edited code. Just change the data field on the Ajax call.

Vereonix Over a year ago

Simply nothing, even though the modal doesn't come up every time I still check the db, and it hasn't had anything inserted, I can't tell if the php just isn't running, or the ajax isn't.

Minoru Over a year ago

let us continue this discussion in chat

|

floriangosse · Accepted Answer · 2013-12-12 12:39:19Z

1

You have an error in your ajax definitions. It should be:

$.ajax
({ 
    url: 'reserbook.php',
    data: "book_id="+book_id,
    type: 'post',
    success: function()
    {
        $('.modal-box').text(result).fadeIn(700, function() 
        {
            setTimeout(function() 
            {
                $('.modal-box').fadeOut();
            }, 2000);
        });
    }
});

answered Dec 12, 2013 at 12:39

floriangosse

1,1331 gold badge10 silver badges22 bronze badges

Comments

Wilfredo P · Accepted Answer · 2013-12-12 13:13:18Z

1

You Ajax is bad formed, you need the sucsses event. With that when you invoke the ajax and it's success it will show the response.

$.ajax
        ({ 
            url: 'reserbook.php',
            data: {"book_id":book_id},
            type: 'post',
            success: function(data) {
                $('.modal-box').text(result).fadeIn(700, function() 
                {
                   setTimeout(function() 
                    {
                    $('.modal-box').fadeOut();
                    }, 2000);
                });
              }
             }

Edit:

Another important point is data: "book_id="+book_id, that should be data: {"book_id":book_id},

edited Dec 12, 2013 at 13:13

answered Dec 12, 2013 at 12:37

Wilfredo P

4,07430 silver badges46 bronze badges

3 Comments

dbf Over a year ago

, missing after type: 'post'.

Vereonix Over a year ago

I've changed my ajax to this, but now nothing happens, I've updated my posted to show my full script, probably messed it up. Thought though, and you might face palm, in my reservebook.php do I need to have: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> or will it be able to get the variable regardless, also that script will allow this ajax to work right, its not just for jquery? :S

Wilfredo P Over a year ago

@Tom if you copied and pasted I update the answer becouse I was missing a , but the Jquery library Is not the problem.

Abhisek Mishra · Accepted Answer · 2013-12-12 14:12:49Z

0

$.ajax
({ 
    url: 'reservebook.php',
    data: {
    jqbookID : book_id,
    },
    type: 'post',
    success: function()
    {
        $('.modal-box').text(result).fadeIn(700, function() 
        {
            setTimeout(function() 
            {
                $('.modal-box').fadeOut();
            }, 2000);
        });
    }
});

});

Try this

answered Dec 12, 2013 at 14:12

Abhisek Mishra

2693 silver badges15 bronze badges

Collectives™ on Stack Overflow

ajax post within jquery onclick

4 Answers 4

10 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related