Dimitris kk Dimitris kk - 5 months ago 28
jQuery Question

Passing variable from javascript to php with ajax post method

I'm trying to pass a JavaScript variable to PHP with AJAX. It's not working and I cannot understand what I am doing wrong. I am always getting the following errors:


1) Notice: Undefined variable: id in ...\movies.php on line 174

2) Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in ...\movies.php on line 176.


I use chrome dev tools and I can see that the AJAX call is successful.

<?php
session_start();
include_once 'dbconnect.php';

if(isset($_POST['id'])){
$id = $_POST["id"];
echo $id;
}
?>

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" >
<!--Insert sidebar CSS-->
<link rel="stylesheet" href="css/sidebar.css" type="text/css" />
<!--Insert Custom CSS-->
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>

<!-- Start of navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"></a>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['usr_id'])) { ?>
<li><h4 class="navbar-text"></h4></li>
<li><a href="store.php">Store</a></li>
<li><a href="settings.php"><i class="fa fa-cog" aria-hidden="true"></i>
Account</a></li>
<li><a href="logout.php"><i class="fa fa-power-off"></i> Log Out</a></li>
<?php } else { ?>
<li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<?php } ?>
</ul>
</div>
</div>
</nav>


<div id="wrapper">

<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Welcome <?php echo $_SESSION['usr_name'];?>!
</a>
</li>

<li>
<a href="store.php" class="active">Edit Movies</a>
</li>
<li>
<a href="users.php" class="active">Edit Users</a>
</li>

<li>
<a href="movies.php">Movies Gallery</a>
</li>
<li>
<a href="#">My Rents</a>
</li>
<li>
<a href="#">All Rents</a>
</li>
<li>
<a href="#">Account</a>
</li>
<li>
<a href="#">Contact</a>
<li>
<a href="#">Log out</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->

<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid" id="movie-catalog">
<div class="row">

<?php
$result = mysqli_query($con, "SELECT * FROM movies");

while($row = mysqli_fetch_array($result)){
echo '
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive img-center cover" src='.$row['cover_path'].' style="width:150px;height:200px;" alt="">
</a>
<h3 class="text text-center">
<a href="#">'.$row['title'].'</a>
</h3>
<div class="centered">
<input class="btn btn-info text-center info-button" type="submit" data-id="'.$row['id'].'" data-toggle="modal" name="id" value="Info" />
<button type="button" class="btn btn-warning center">Rent</button>
</div><br>
</div>';
}

?>

</div>
<!-- /.row -->

<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
<a href="#">&laquo;</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">&raquo;</a>
</li>
</ul>
</div>
</div>
<!-- /.row -->

</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Movie Info</h4>
</div>

<div class="modal-body">
<div class="row">
<p class="modal-text"></p>
<?php


$movie = mysqli_query($con, "SELECT * FROM movies WHERE id=".$id);

$row = mysqli_fetch_array($movie);

echo '
<div class="col-md-4">
<div class="info-image">
<img class="img-responsive" src="'.$row['cover_path'].'" style="width:150px;height:200px;">
</div>
</div>

<div class="col-md-4">
<h4>Title: '.$row['title'].'</h4>
<h4>Director: '.$row['director'].'</h4>
<h4>Year: '.$row['d'].'</h4>
<h4>Description: '.$row['description'].'</h4>
<a href=""><img class="imdb-img" src="images/IMDb-Icon.png" style="width:80px;height:80px;"></a>
<a href=""><img class="imdb-img" src="images/youtube_logo.png" style="width:60px;height:40px;"></a>
</div>
'; ?>
</div>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

</div>
</div>
</div>

<!-- Modal end -->

</body>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>

<!-- Menu Toggle Script -->
<script>
$(document).on("click", ".info-button", function () {

var myBookId = $(this).data('id');
$(".modal-body .modal-text").text(myBookId);

var id = myBookId.toString();
//alert(variableToSend);

$.ajax({
url : "movies.php",
type: "POST",
data : {"id" : id},
success: function(data)
{
//data - response from server
alert(data);
$('#myModal').modal('show');
}

});


});
</script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!-- Insert Font-Awesome -->
<script src="https://use.fontawesome.com/2ce34ad1b9.js"></script>

</html>

Answer

You have to create another php file to call with ajax.
This file will only produce your #myModal div's inner content.
This div should be empty here : <div class="modal fade" id="myModal" role="dialog"></div>

// This retreives the data-id
var myBookId = $(this).attr('data-id');

$.ajax({
    url : "movies-modal.php",   // The other php filename here
    type: "POST",
    data : {"id" : myBookId},
    success: function(html)
    {
        $('#myModal').html(html);
        $('#myModal').modal('show');
    }
});
Comments