My jQuery .ajax script doesnt place html in div

Question

I've got problem, when I click ".page" button the content of news.php script doesn't appear in "#newsdiv". Firebug doesn't says there some errors, when I run news.php in my browser it easily gives me data from MySQL so it's js fault and I can't find where I made mistake, can someone help me?

Just wrote some code:

$(document).ready( function() {
        $('a.page').click(function() {
            var value = $(this).text();
            var result = null; 
            var scriptURL = "/ajax.executable.files/news.php?page=" + value; //url for ajax
            $.ajax({
                url: scriptURL,
                type: 'get',
                dataType: 'html',
                async: true,
                success: function(data) {
                        $('#newsdiv').html(data);   
                } 
            });
        });
});

PHP:

<?php
    mysql_connect('xxx', 'xxx', 'xxx');
    mysql_select_db('xxx');
    mysql_query('SET NAMES \'utf8\'');
    mysql_query("SET NAMES utf8");
    mysql_query("SET CHARACTER SET utf8");
    mysql_query("SET collation_connection = utf8_polish_ci");
    
    if(isset($_GET['page'])){
        $page = mysql_real_escape_string($_GET['page']);
    }
    else{
        $page = 1;
    }
    
    $page = $page - 1;
    $ile = 2;
    
    $od = $page * $ile;
    
    $sql = "SELECT * FROM xxx LIMIT $od, $ile";
    $sql = mysql_query($sql) or die(mysql_error());
    
    while($row = mysql_fetch_array($sql)){
        ?>
        <div class="newsholder">
                <div class="newsheader">
                    <h1><?php echo $row['title']; ?></h1>
                    <h2><?php echo $row['subtitle']; ?></h2>
                </div>
                <div class="newscontent">
                    <div class="<?php $result = $id % 2; if($result != 0){ echo("rightsideimg"); } else{ echo("leftsideimg"); } ?>">
                        <img src="<?php echo $row['image']; ?>" />
                    </div>
                    <div class="<?php $result = $id % 2; if($result != 0){ echo("leftsidesontent"); } else{ echo("rightsidecontent"); } ?>">
                        <?php echo $row['content']; ?>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="newsfooter">
                    <div class="newsgooterright">
                        <div class="button">
                            Czytaj wiecej
                        </div>
                    </div>
                    <div class="newsgooterleft">
                        <small>napisal <b><?php echo $row['author']; ?></b> dnia 26-11</small>
                    </div>
                </div>
            </div>
        <?php
    }
    
    
    
    
    

?>

And php for making buttons

<?php
                    $offset = ceil($count / $ile);
                    for($i = 1; $i <= $offset; $i++){
                        echo("<a class=\"page\" href=\"javascript:void(0);\"><div class=\"page\">" . $i . "</div></a>");
                    }
                ?>

All files are placed like:

root/index.php with elements to click

root/ajax.executable.files/news.php with php script

root/jscripts/news.js with js for using news.php

Its all files which script is using

Look at the console in Firebug and it will show you what was sent and received. You'll see POST requests, expand them for details. — Jay Blanchard
– Jay Blanchard, Commented Dec 5, 2012 at 19:02
After you run the Ajax by clicking on the link? If nothing is there then you have another problem somewhere. — Jay Blanchard
– Jay Blanchard, Commented Dec 5, 2012 at 19:04

Anand · Accepted Answer · 2012-12-05 19:36:42Z

2

You have to return false; inside the click event, otherwise the click propagates up the hierarchy and if there is any HREF value (or even if empty), it will end up reloading the page.

So, after $.ajax({...}); do a return false; and things should be fine.

EDIT:

Change the above script to the following and see:

$(document).ready( function() {
    $('a.page').click(function() {
        var value = $(this).text();
        var scriptURL = "/ajax.executable.files/news.php?page=" + encodeURIComponent(value); //url for ajax
        $.ajax({
            url: scriptURL,
            type: 'get',
            dataType: 'html',
            async: true,
            success: function(data) {
                    $('#newsdiv').html(data);   
            } 
        });
        return false;
    });
});

ANOTHER EDIT:

Since you have a <div> inside the a tag, the value = $(this).text() will actually return a value of <div>1</div> instead of 1. So, remove the <div> tag as well and make the last code section as follows:

for($i = 1; $i <= $offset; $i++) {
    echo("<a href=\"\" class=\"page\" onclick=\"return false;\">".$i."</a>");
}

That should make sure the ajax url is ..../news.php?page=$i.

edited Dec 5, 2012 at 19:36

answered Dec 5, 2012 at 19:04

Anand

5413 silver badges9 bronze badges

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

16 Comments

Michał Staniewski Over a year ago

ive made javascript:void(0); it desnt work like return:false?

Anand Over a year ago

No it doesn't. If you have <a href='#' onclick='javascript:void(0);' class='page'>Link</a> then it will try and go to the anchor #.

Michał Staniewski Over a year ago

but it looks like echo("<a class=\"page\" href=\"javascript:void(0);\"><div class=\"page\">" . $i . "</div></a>");

Anand Over a year ago

Change that to echo("<a class=\"page\" href=\"\" onclick=\"return false;\">".$i.</a>");. No need for the "div" inside the a tag.

Michał Staniewski Over a year ago

maybe ill show u website with it? its www.radiolevel.xaa.pl the buttons are right below slider

|

Jay Blanchard · Accepted Answer · 2012-12-05 19:06:55Z

0

Make the following change -

$('a.page').click(function(event) { // pass event to the function
    event.preventDefault(); // prevent the default action of the click
    var value = $(this).text();

Clicking the link is taking you to a new page, that is why there are no results in your console and why the div doesn't gey populated.

answered Dec 5, 2012 at 19:06

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

5 Comments

Michał Staniewski Over a year ago

$(document).ready( function() { $('a.page').click(function() { event.preventDefault(); var value = $(this).text(); and doesnt work var result = null; var scriptURL = "/ajax.executable.files/news.php?page=" + value; //url for ajax $.ajax({ url: scriptURL, type: 'get', dataType: 'html', async: true, success: function(data) { $('#newsdiv').html(data); } }); }); });

Michał Staniewski Over a year ago

maybe ill show u website with it? its www.radiolevel.xaa.pl the buttons are right below slider

Jay Blanchard Over a year ago

You don't understand what changes I want you to make?

Jay Blanchard Over a year ago

I cannot get to your website, it is blocked.

Michał Staniewski Over a year ago

hmmmm it isnt, idk why it says like this

Collectives™ on Stack Overflow

My jQuery .ajax script doesnt place html in div

2 Answers 2

16 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related