Loading PHP Response with Jquery Ajax POST

Question

I have a php script that loops over the results of a database query and prints them out. I am trying to load them into an Admin Interface Panel with AJAX, but to no avail. My job requires me to write mostly backend code, so I haven't gotten around to learning much JS/Jquery. Anyways, I have a page "insert.php" that has a button I want to click and have it call the results from the "posts.php" page. Here are my files

insert.php

                            <a href="#" class="button expand" id="ajaxbtn">Load Posts</a>

                        </div>
                    </div>

                    <div class="row main">
                        <div class="small-8 columns" id="posts">
                        </div>
                    </div>
                </div>

posts.php

<?php

require_once 'connect.php';

$user = 'admin';

$sql = "SELECT * FROM posts WHERE author = ?";

$stmt = $db->prepare($sql);
$stmt->bindParam(1, $user);
$stmt->execute();

$data = $stmt->fetchAll();

foreach ($data as $row)
{   
    $id = $row['id'];
    $title = $row['title'];
    $author = $row['author'];
    $date = $row['date'];
    $smalltext = $row['smalltext'];
    $bodytext = $row['bodytext'];
    $images = $row['images'];
    $imagelist = split(' ', $images);

    $shorttext = str_replace(
        array("\r\n", "\n"), 
        array("</p><p>", "</p><p>"), 
        $smalltext);

    echo 
    "
    <div class='row main'>
        <h1 class='padding-top-12 bottom-rule-green'>$title</h1>
        <div class='small-2 columns'>
            <p class='text-justify small-text'>
                Post MetaData goes here
            </p>
        </div>

        <div class='small-10 columns bottom-rule-red text-justify'>
            <p>
                $shorttext

                ";

                foreach ($imagelist as $key => $value)
                {
                    echo "<img src='users/$author/img/$value'>";
                }
    echo 
                "
            </p>
        </div>
    </div>

    <div class='row main small-text padding-top-1'>
        <div class='small-2 small-oofset-2 columns'>
            <a href='posts/$author/$id'>Edit Post</a>
        </div>

        <div class='small-4 columns'>
            Timestamp: $date
        </div>

        <div class='small-4 columns'>
            Author: <a href='users/$user'>$user</a>
        </div>
    </div>
    ";
}



?>

postAjax.js

$.ajaxSetup ({
    cache: false
});

var loadUrl = "../../includes/posts.php";

$(function(){
  $('#ajaxbtn').on('click', function(e){
    e.preventDefault();
    $('#ajaxbtn').fadeOut(300);

    $.post(loadUrl, {language: "php", version: 5},
        function(res){
            $("posts").html(res)
        }, "html");


    });
});

This is the file that loads my scripts into the page

<!--Foundation Framework Necessities-->
<script type="text/javascript" src="../../assets/js/vendor/jquery.js"></script>
<script type="text/javascript" src="../../assets/js/foundation/foundation.min.js"></script>
<script type="text/javascript" src="../../assets/js/postAjax.js"></script>
<script type="text/javascript">
    $(document).foundation();
</script>

When I click the #ajaxbtn button, it fades out so I know the JS is being called to that element onclick, but it doesn't post the results of posts.php. I think this may just be my misunderstanding of how Ajax works; if you would please tell me what I did wrong.

Open the browser's dev tools and watch the AJAX request / response. The answer will likely be there. — Jay Blanchard
– Jay Blanchard, Commented Oct 28, 2014 at 18:33
first of all post only the relevant code related to your problem and second use the larger structure of ajax youll run into lesser problems — Dev Man
– Dev Man, Commented Oct 28, 2014 at 18:33
I am getting the correct response in the dev tools, but I'm not sure why it isn't showing up inside the DOM. I snipped my insert.php, but I believe the rest of the code is relevant. I also tried the larger structure of ajax first, but to no avail, which is why I was trying post. — James
– James, Commented Oct 28, 2014 at 18:57
what happens when you fix selector to proper id selector $("#posts")? ALso easy to check if success callback is firing or not by logging to console or using alert — charlietfl
– charlietfl, Commented Oct 28, 2014 at 20:09

Sampath Liyanage · Accepted Answer · 2014-10-28 19:15:06Z

1

Try changing,

$("posts").html(res)

to

 $("#posts").html(res)

Also I see some mistakes in your code in posts.php You are not embedding php variables in strings properly.

edited Oct 28, 2014 at 19:15

answered Oct 28, 2014 at 18:48

Sampath Liyanage

4,8962 gold badges32 silver badges42 bronze badges

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

2 Comments

James Over a year ago

I'm aware of that. They'll be fixed when I move into production, but could something like this be why my AJAX response is failing?

James Over a year ago

It's always the simple things that get me. Ugh, thank you, this was the answer. I actually did fix the id selector to the proper one, but that was when I was trying $.ajax() and I must have broken something else. After reverting back to the posted code above, this worked. Thank you.

Duck of Death · Accepted Answer · 2014-11-04 17:11:33Z

0

I believe you need to use a delegated event. Change your code from:

$('#ajaxbtn').on('click', function(e)

to:

$('#ajaxbtn').on('click', 'a', function(e)

This way event handlers will fire as expected even if the contents of that parent element change. I had the same issue and this solved it. Good luck.

answered Nov 4, 2014 at 17:11

Duck of Death

171 silver badge5 bronze badges

Collectives™ on Stack Overflow

Loading PHP Response with Jquery Ajax POST

insert.php

posts.php

postAjax.js

This is the file that loads my scripts into the page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

insert.php

posts.php

postAjax.js

This is the file that loads my scripts into the page

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related