refresh dynamic php div using jquery

Question

I print mysql result into div using php/while loops. now i need to refresh this result after click any link, button using jquery plugin or code . better design after click link, user see any loading message ( please wait ) and jquery/php print new result ( refresh div ). Is this possible? There is a way to do this?

My div is :

<a class="click" href="#"> Link TO refresh Div </a>
<div class="messagelist">
<?PHP $result=mysql_query("select * from messages where id<'$lastmsg' order by id desc limit 20");
$count=mysql_num_rows($result);
<div class="commentbox">
while($row=mysql_fetch_assoc($result))
{?>
<li>
<?php echo $row['id'] . ' #' . $row['date'] . ' / ' . $row['comment']; ?>
</li>
<?PHP } ?>
</div>
</div>

NOTE : I dont need To Load From Jquery External File Methods . thanks

Actually, in fact i dont have idea. im amateur in jquery. thanks for What have you tried ! — BBKing
– BBKing, Commented Apr 7, 2012 at 12:52

Alex · Accepted Answer · 2012-04-07 13:13:41Z

2

Your script can't work. You are mixing PHP and HTML:

$count=mysql_num_rows($result);
<div class="commentbox"> /*THIS IS WRONG*/
while($row=mysql_fetch_assoc($result))

I think this is what you want:

Create a new PHP file which only outputs your list. Call it, for example, list.php.

Content of main file:

<a class="click" href="#"> Link TO refresh Div </a>
<div class="messagelist">
<div class="commentbox">
<ul>
<?PHP $result=mysql_query("select * from messages where id<'$lastmsg' order by id desc limit 20");
$count=mysql_num_rows($result);
while($row=mysql_fetch_assoc($result))
{?>
<li>
<?php echo $row['id'] . ' #' . $row['date'] . ' / ' . $row['comment']; ?>
</li>
<?PHP } ?>
</ul>
</div>
</div>

Content of list.php:

<?PHP $result=mysql_query("select * from messages where id<'$lastmsg' order by id desc limit 20");
$count=mysql_num_rows($result);
while($row=mysql_fetch_assoc($result))
{?>
<li>
<?php echo $row['id'] . ' #' . $row['date'] . ' / ' . $row['comment']; ?>
</li>
<?PHP } ?>

Add this to the <head> part of the main file:

<script type="text/javascript">
$(function(){
    $('.click').on('click', function(e){
        e.preventDefault();
        $('.messagelist').text('Please wait...');
        $('.messagelist').load('list.php');
    });
});
</script>

to load the content.

edited Apr 7, 2012 at 13:13

answered Apr 7, 2012 at 12:55

Alex

6,4362 gold badges22 silver badges26 bronze badges

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

2 Comments

BBKing Over a year ago

i dont need to this method : loading external pages. using same page. but thanks for answer.

Alex Over a year ago

it's not possible without a second file.

Mihai Iorga · Accepted Answer · 2012-08-28 22:26:45Z

2

Add an onclick to your element:

<a onclick="loadPhp();">Reload php function</a>

create the javascript function:

function loadPhp(){
    //set a variable for the php function
    var func = <?php yourphpfunction();?>;
    //append the php function results to a div using jquery
    $(element).html(func); 
}

edited Aug 28, 2012 at 22:26

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

answered Aug 28, 2012 at 22:19

energy

211 bronze badge

Comments

T. Junghans · Accepted Answer · 2012-04-07 13:11:49Z

0

To do what you want you'll need to use Ajax.

1.Create a separate PHP-file that contains your mysql result, the html-snippet that is created below.

Contents of messages.php:

<?PHP $result=mysql_query("select * from messages where id<'$lastmsg' order by id desc limit 20");
$count=mysql_num_rows($result);
<div class="commentbox">
<ul>
while($row=mysql_fetch_assoc($result))
{?>
<li>
<?php echo $row['id'] . ' #' . $row['date'] . ' / ' . $row['comment']; ?>
</li>
</ul>
</div>
<?PHP } ?>

2.If you're using jQuery the ajax-request is pretty simple. Add the following to your current page (leave your current page otherwise as it is):

$(document).ready(function () {
    $('.click').on('click', function (e) {
        e.preventDefault();
        $('.messagelist').html('Please wait...');
        $.ajax({
            type : 'GET',
            url : 'messages.php',
            dataType : 'html',
            success : function (response) {
                $('.messagelist').html(response);    
            }
        });
    });
});

I haven't tested the code above but it should work.

edited Apr 7, 2012 at 13:11

answered Apr 7, 2012 at 12:54

T. Junghans

11.7k8 gold badges55 silver badges78 bronze badges

4 Comments

BBKing Over a year ago

using jquery external load/document is ready my jquery library and other code not work with external page when load in my page.

T. Junghans Over a year ago

I don't fully understand what you're trying to say. Is ajax not an option for you? All you're doing is adding some javascript to your main file and creating a separate php file.

Alex Over a year ago

There is a mistake in the PHP code. Take a look at my answer.

T. Junghans Over a year ago

@Alex: You mean the missing </div>? The <ul>s were also missing.

Collectives™ on Stack Overflow

refresh dynamic php div using jquery

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related