Reload div with JavaScript containing PHP content

Question

I have a PHP page with this structure:

<?php
include 'header.php';
include 'content.php';
include 'footer.php';
?>

In the header.php, I have a function that counts some rows in a database.

$show =$mysql->count('someparam', $foo['bar']);
   if ($show > 0) {
       echo $show;
   }

That's all good. Now, in the content.php file, the user can do operations that changes this $show value in the header, but I need to reload the page to see the updated $show number.

I want to solved this with JavaScript, but can't figure out how to do it.

I tried solving it with a JavaScript reload on timer, like this:

<script>
function render (){
    $('.customer-database').html(.customer-database)
}
window.setInterval(render, 500);
</script>

the $show counter is inside the div class costumer-database. This is not working because I need to put the HTML code in after the HTML, but I don’t want to put HTML code in. I simply want to reload it. Is this possible?

I am open to any suggestions in both JavaScript and PHP.

You can't do it this way. A php file must be processed on the server side. What you could use is ajax: you make a call (in javascript) to a URL which will return you the processed html code with the updated values. — maxdec
– maxdec, Commented Oct 1, 2012 at 12:51
I see.. say I change the counter part to AJAX, how would I reload the div with javascript? — Bolli
– Bolli, Commented Oct 1, 2012 at 12:54

Armel Larcier · Accepted Answer · 2012-10-01 13:02:51Z

1

this should work:

function render (){
    $('.customer-database').parent().load('myscript.php .customer-database');
    ^                              ^ ^     ^          ^ ^                ^ ^
    |   select the container in    | |     |   url    | | select content | |
    |   which to reload content    | |     | to your  | |  to put in the | |
    |______________________________| |     |   page   | |    container   | |
                                     |     |__________| |________________| |
                                     | send ajax call and replace content  |
                                     |_____________________________________|
}

edited Oct 1, 2012 at 13:02

answered Oct 1, 2012 at 12:55

Armel Larcier

16k7 gold badges70 silver badges89 bronze badges

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

Comments

Oritm · Accepted Answer · 2012-10-01 12:52:33Z

1

What you can do is a AJAX request to a separate PHP file. The separate PHP file has the code that returns a number like your code:

$show =$mysql->count('someparam', $foo['bar']);
   if ($show > 0) {
       echo $show;
   }

See http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ for help when creating AJAX calls with jQuery.

answered Oct 1, 2012 at 12:52

Oritm

2,1202 gold badges25 silver badges41 bronze badges

Comments

kristopher · Accepted Answer · 2012-10-01 12:54:44Z

1

if you know what the name/id of the content area you want to replace is it is fairly simple to insert a jquery ajax request to reload only a portion of your page. Assuming you already have your jquery library included you can just use this javascript chunk

path = "/path/to/my/action/"
$.ajax({
    url : path,
    success : function(response) {
        $('.customer-database').replaceWith(response);
    },
    error : function(xhr) {
        alert('Error!  Status = ' + xhr.status);
    }
});

then you could write an Action that basically only gave you your count, and reload that Action into your element - the action responds with whatever count+html you like

answered Oct 1, 2012 at 12:54

kristopher

1567 bronze badges

Comments

Hank · Accepted Answer · 2012-10-01 13:02:05Z

0

As the others have described, you want to use ajax. And jQuery is very good at this. With jQuery it would be as easy as

//whatever you do to change the $show value as a trigger, maybe a click?
$(".show_value_button").click(function(){
  $("#header_div_id").load("header.php");
});

answered Oct 1, 2012 at 13:02

Hank

7316 silver badges10 bronze badges

Collectives™ on Stack Overflow

Reload div with JavaScript containing PHP content

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related