Good practice for ajax site loading with dynamic php content

Question

I'm a bit swamped here. I got a project with rather dynamic content, so it's written in php. Depending on the user input, different files get loaded. So far no problem, but I also want to use ajax (jquery) to load the content (if user has js on) and that's where I'm stuck a little.

For my php site structure I have something like this:

switch ($input) {
    case 'foo': require 'foo.php';
    break;

    case 'bar': require 'bar.php';
    break;
}

and in the actual content area some functions like

<div id="content"><php echo content_function(); ?></div>
<div id="sidebar"><php echo sidebar_function(); ?></div>

Those functions are defined both in bar.php and foo.php. That way I don't have to struggle with different switch/if-else statements in the middle of my html and the whole file-handling is done in the switch statement.

When loading with jquery now I apparently can't re-instantiate the functions in content and sidebar without reloading the page which would make the ajax load useless. So I added some extra code to foo.php and bar.php to be able to instantiate each function seperatly into the appropriate divs (after emptying them beforehand for sure). Eg

if(isset($_POST) && $_POST['load_content_func']) { echo content_function(); }
if(isset($_POST) && $_POST['load_sidebar_func']) { echo sidebar_function(); }

Then I just take the output of each ajax request and load it into content and sidebar:

var foo_or_bar; //depending on user input either foo or bar
if (foo_or_bar == 'foo') {

    $.ajax({  
      type: "POST",  
      url: "foo.php",  
      data: load_content_func,  
      success: function(html) {  
        $('#content').html(html);

    $.ajax({  
      type: "POST",  
      url: "foo.php",  
      data: load_sidebar_func,  
      success: function(html) {  
        $('#content').html(html);
}

Note: All of the code is just an example and written out of my head, doesn't matter if somethings wrong as long as you get the idea what I want to do!

Somehow it doesn't feel right, but being the odd perfectionist, I'm never really happy, so it might be just me. Is there a good practice for doing something like this and how do you usually solve this ? All suggestions welcome!

Answer 1

Here's the thing, and I hope it's not aggravating due to it being a generalized response and posing more questions than answers:

The way you propose is that there is the potential for new content to be loaded depending on user interaction, and when that new content is loaded, a new sidebar is also loaded. I have some thoughts on this, and a caveat which is: I'm not the world's most experienced PHP developer. That said, here are my initial thoughts (they do not all relate to one-another):

A) The reasons people use Ajax vary: to minimize the data being retrieved, to avoid the visual "flash" from reloading a whole page, and I'm sure there are other reasons. To decide if Ajax is even the tool for the job, you need to decide "why" you are using it.

B) If you ALWAYS retrieve a "foo" sidebar to go with "foo" content, why not just fetch them at once? No matter what your PHP logic is on the server side, it can return with one request:

<div id="content">.. all my content...</div>
<div id="sidebar">.. my sidebar ...</div>

There are very few well-structured pages out there that will have any markup separating the content from the sidebar. Yours might be one, though; I don't know that for sure.

C) If you ALWAYS retrieve "foo" sidebar to go with "foo" content, and you CAN'T return them in ordered markup (as above suggestion) you can still just ask for foo.php once, and in the success function you can parse html and send it to your two separate areas.

D) If you tightly couple your "foo" sidebars and content like that, you will probably need to re-engineer it later. What if you decide that both "foo" and "bar" content areas can actually share "baz" sidebar? Your proposed way will mean that you'll need to have logic checking for "baz" content to go with "baz" sidebar.

E) If you don't like my suggestion to just get both content and sidebar at once, I see nothing terribly wrong with doing two separate and distinct Ajax calls, though. Some people will come up with clever ways to do it with an iterator so that you only need to specify "foo.php" once (even though two calls are being made) and it will automagically grab both. But meh. Why make code esoteric and hard to read when two separate and distinct calls make it very clear what the intended purpose is.