Loading Content using Ajax with PHP Include

Question

I have a PHP page which has a div, the div has a PHP includes which includes this file:

<?php   
    include('mySql.php');
    include('Classes.php');

    $targetPage = "blogOutput.php";
    $noOfPosts = getNumberOfPosts();
    $adjacents = 3;
?>
<link rel="stylesheet" type="text/css" href="Styles/Miniblog.css" />
<script src="Scripts/jQuery.js"></script>
<script type="text/javascript">
    var page = 1;
    $(".Button").click(onClick());
    $(document).ready(onClick());

    function onClick() {
        alert('called');
        $("#posts").load("miniBlog.php", function(response, status, xhr) {
            if (status == "error") {
                var msg = "Error!: ";
                alert(msg);
            }
        });
        page++;
    }

</script>
<div class="PostTitle">
    <h2>What's New!?</h2>
</div>
<div id="posts">
</div>
<a class="BlogButton" href="">Next</a>

I need the function "onclick" to be called without refreshing the page and resetting the "page" variable in javascript. So far, all I've been able to do is make it run the script once. I think that's wrong too, because it's not loading any content. Here's the page:

<?php
    echo "I'm here!";
    if (isset($_POST['offset'])) {
        $offset = $_POST['offset'];

        $posts = getPosts($offset);
    }
?>

<div class="BlogPost">
    <h3><?php echo $posts[0]->Title; ?></h3>
    <p><?php echo $posts[0]->Body; ?></p>
    <p class="Date"><?php echo $posts[0]->Date; ?></p>
</div>
<div id="divider"></div>
<div class="BlogPost">
    <h3><?php echo $posts[1]->Title; ?></h3>
    <p><?php echo $posts[1]->Body; ?></p>
    <p class="Date"><?php echo $posts[1]->Date; ?></p>
</div>

So, to clarify: I'm not sure why my ajax call isn't working, and I don't know how to load just the div content and not refresh the entire page. Thanks!

Atif · Accepted Answer · 2012-10-29 08:39:50Z

1

You are not able to see content loaded by AJAX because the page is reloading as soon as you click the anchor. Disable the anchor event by using preventDefault() and this should fix it.

<script type="text/javascript">
    var page = 1;
    $(document).on('click','.BlogButton',function(e){

        // stop page from reloading
        e.preventDefault();

        $("#posts").load("miniBlog.php", function(response, status, xhr) {
            if (status == "error") {
                var msg = "Error!: ";
                alert(msg);
            }
        });
        page++;
    });
</script>

edited Oct 29, 2012 at 8:39

answered Oct 29, 2012 at 8:34

Atif

10.9k22 gold badges68 silver badges97 bronze badges

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

Comments

Pigueiras · Accepted Answer · 2012-10-29 08:22:28Z

0

Don't call the function in the click method parameter. You have to put the reference to the handler function.

var handler = function onClick () {...}

$("whatever").click(handler);

answered Oct 29, 2012 at 8:22

Pigueiras

19.5k10 gold badges67 silver badges87 bronze badges

Comments

Yograj Gupta · Accepted Answer · 2012-10-29 08:24:21Z

0

Change your code to

var page = 1;

$(document).ready(function(){
     $(".Button").click(onClick);
     onClick();
};

answered Oct 29, 2012 at 8:24

Yograj Gupta

9,8673 gold badges31 silver badges50 bronze badges

Comments

Mihai Matei · Accepted Answer · 2012-10-29 08:25:21Z

0

Use this instead of your code

var page = 1;
$(document).on('click','.Button',function(){

    $("#posts").load("miniBlog.php", function(response, status, xhr) {
        if (status == "error") {
            var msg = "Error!: ";
            alert(msg);
        }
    });
    page++;
});

answered Oct 29, 2012 at 8:25

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Comments

Johnny · Accepted Answer · 2012-10-29 08:27:02Z

0

Content dose not look too huge.Can't you just hide div (with content already present in it)& show it onclick.

answered Oct 29, 2012 at 8:27

Johnny

1752 silver badges10 bronze badges

Collectives™ on Stack Overflow

Loading Content using Ajax with PHP Include

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related