CODEWITHSUNDEEP
phpjavascriptjqueryajax
Jack
Jack

Reputation: 950

Loading Content using Ajax with PHP Include

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!

Upvotes: 0

Views: 2804

Answers (5)

Atif
Atif

Reputation: 10880

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>

Upvotes: 1

Johnny
Johnny

Reputation: 175

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

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

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

Upvotes: 0

Yograj Gupta
Yograj Gupta

Reputation: 9869

Change your code to

var page = 1;

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

Upvotes: 0

Pigueiras
Pigueiras

Reputation: 19356

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

Upvotes: 0

Related Questions