web-dev-qa-db-fra.com

poste ajax dans jquery onclick

J'ai un bouton qui appelle une boîte modale à afficher en fondu à l'écran en indiquant une valeur affichée à partir du bouton, puis en fondu, cela fonctionne très bien avec jQuery, mais je souhaite également que le même clic pour la valeur envoyée par le bouton soit envoyé à un Fonction php, que d’exécuter et la boîte modale d’être toujours en fondu. 

Je n'ai que ceci pour que mon site sache ce que js utiliser:

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

Je suis toujours nouveau alors désolé pour une question de recrue, mais cela permettra-t-il à ajax de fonctionner, ou est-ce seulement pour jQuery?

Le script actuel que j'essaie est le suivant: (Modifié pour être correctement formé, basé sur les réponses, mais rien ne se passe du tout)

<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>

Bien qu'avec cela la boîte modale ne se produise même pas.

Le php est, 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);
    }

?>

et pour être complet, le bouton est:

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

Je suis novice dans ce domaine et j'ai examiné des dizaines d'autres questions similaires ici. C'est ainsi que j'ai obtenu mon script actuel, mais cela ne fonctionne tout simplement pas.

Je ne suis pas sûr que cela compte, mais le script contenant uniquement la boîte modale qui fonctionne doit être placé au bas du corps html pour fonctionner, ne sais pas si, pour une raison quelconque, ajax doit être placé en haut, mais la boîte modale ne fonctionnerait pas. t fonctionne, juste une pensée.

phpjqueryhtmlajax
13
Vereonix

Essaye ça. Edité à la réponse finale.

bouton :

<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 : La modification de mysqli est minimale dans votre code, mais vivement recommandée.

PS # 2 : L'appel success sur Ajax ne signifie pas que query a réussi. Cela signifie seulement que la transaction Ajax s'est déroulée correctement et a obtenu une réponse satisfaisante. Cela signifie qu’elle a envoyé à la url les données correctes, mais pas toujours la url a fait le bon choix.

11
Minoru

Vous Ajax est mal formé, vous avez besoin de l'événement sucsses. Avec cela, lorsque vous invoquez le ajax et que son succès est affiché, la réponse apparaît.

$.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);
                });
              }
             }

Modifier:

Un autre point important est data: "book_id="+book_id, qui devrait être data: {"book_id":book_id},

1
Wilfredo P

Vous avez une erreur dans vos définitions ajax. CA devrait etre:

$.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);
        });
    }
});
1
floriangosse
$.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);
        });
    }
});

});

Essaye ça

0
Abhisek