Passing variable from javascript to php with ajax post method

Question

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>

The element targetted by var myBookId = $(this).data('id'); on line 110 has no id. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jun 27, 2016 at 20:23
From this code block if(isset($_POST['id'])){...} it seems like you're doing AJAX call and processing, all, in the same page. Do the AJAX call in one page and process it in a different page. — Rajdeep Paul
– Rajdeep Paul, Commented Jun 27, 2016 at 20:27

Louys Patrice Bessette · Accepted Answer · 2016-06-27 22:10:58Z

1

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');
    }
});

edited Jun 27, 2016 at 22:10

answered Jun 27, 2016 at 20:26

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

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

3 Comments

CoffeeAddiKt Over a year ago

how i can pass the $id variable to the movies.php file after that?

CoffeeAddiKt Over a year ago

i should move the modal's code to movies-modal.php?

CoffeeAddiKt Over a year ago

you solved my problem. you are the best. i owe you beer :)

Community · Accepted Answer · 2017-05-23 11:58:51Z

0

It's telling you what's wrong:

mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given

you're passing the result (which is either true or false) and it wants mysqli_fetch_array ( mysqli_result $result [, int $resulttype = MYSQLI_BOTH ] )

mysqli_fetch_array()

So your code should look something like this:

//returns names and index numbers
while($row = mysqli_fetch_array($result, MYSQLI_BOTH)){
    echo $row[1];
    echo $row['title'];
}

//or if you just want to use the associative names
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    echo $row['title'];
}

Also, you should be consistent with single or double quotes in php, as they do mean different things. See: What is the difference between single-quoted and double-quoted strings in PHP?

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jun 27, 2016 at 20:26

Xander Luciano

3,9037 gold badges35 silver badges56 bronze badges

2 Comments

vp_arth Over a year ago

square brackets in the specs mean optional. You are still use false $result if query failed.

Xander Luciano Over a year ago

Right! Too used to just using PDO and prepared statements. Seems like his query is failing then, looks like someone else answered anyways!

Collectives™ on Stack Overflow

Passing variable from javascript to php with ajax post method

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related