How to “refresh” a pages content using Ajax and PHP

Question

I am currently working at a project and I think I don't quite understand how ajax works understand.

So here is what I want to do.

I have a page(list.php) where by default a list of members (with pictures, etc. so it's a bit HTML heavy) is rendered.

I also have a filter so when I click the filter button I want to change the content using that filter in a db query.

I know I can use jQuery $.ajax to send the filter value to an EXTERNAL (updatelist.php) file, run the query and get the content back as json and then use $.each to render the new pages content.

My question is: Isn't there any other method to do this? Maybe run the php function at page load by including the file(updatelist.php) into the main page(list.php) and then when I click the filter button to send and ajax request to the same(list.php) with only the php function name?

I tried this but the php code simply is not running, so i guess I have a vague understanding on how php works.

My guess is that php loaded into one page is executing only on page load and I can not run it again so I have to have a EXTERNAL file that renders the content.

Can someone clear all of this out?

Just so you knwo I did search an answer but all said the same thing, that I need ajax but none answer my question completely.

Thank you for your time.

Code:

$('.test').click(function() {
var data = [];
data.push({name: 'functionName', value: "functionName"});

$.ajax({ 
  type: 'POST', 
  url: '/list.php',
  data: data,
  dataType: 'text',
  success: function(html) { 

  }, error : function(e){
    alert("ajax error");
  }

}).done(function(done) {
});
});

HTML/PHP:

<a class="test">test</a>
<?php
   include ( $_SERVER['DOCUMENT_ROOT'] . "/updatelist.php");
?>

updatelist.php content

if ( isset($_POST["functionName"]) ) {
    functionName();
}

Answer 1

My guess is that php loaded into one page is executing only on page load and I can not run it again so I have to have a EXTERNAL file that renders the content.

That's completely right. PHP runs on the server-side . For example: A user requests list.php

• The Webserver receives the request from the client
• The Webserver takes the .php file and parses all the content between <?php ?> and writes the output in the file (of course, not the original, this example is just to give you a basic understanding how it works)
• Then, the webserver sends the parsed Document to the Client, without any PHP-Code in there, just raw HTML and JavaScript

You may ask why the PHP-Code does not also get sent. There's any easy explanation for that: Since PHP does the server-side stuff, it also does things like connecting to your database, etc. Now image if the database connection would also be sent to the client. He would just have to save the file to his harddrive, open it with a text editor and he could see your whole database connection details including password.

What AJAX now does is that a second request gets sent to the server, where it can process the requested information (maybe again connect to the database) and send it back to the client (in JSON format). On the client-side the JSON-Data gets parsed by JavaScript again and shown on the page.

Is there a specific reason why you do not like to use AJAX? It's very powerful and you can create a highly dynamic page with it. Maybe give us more details what you excatly want to do, I'm sure there is a solution to it, maybe even with AJAX ;)

Answer 2

You could probably link to the same file, but why would you want to do that? Isn't it much nicer to have the json in a different file?

To do so; you could use a $_GET[] variable, say $_GET['json'] . At the top of your list.php file, add:

if(isset($_GET['json'])){
  //show JSON results from 'updatelist.php'

  exit;
}

then in your AJAX call link to 'list.php?json=true' and it should work.

Answer 3

Yes there is another way, Though i strongly recomend to parse the Json and build up the content, since you'll have much more control, you can bind events etc. If what you want is to update a div you can just fetch for the a php file with just the div on it and replace the content.

Say you have a div #myDiv you can use jquery load

$("#myDiv").load("/phpWithJustDivOnIt.php?someQueryParamIfYouneed");

that wil put the content of the processed php file inside the div