changing content of a div with javascript and php include

Question

Hello.

I wish to do something iframe-like with my div i've got going here.

Basically, i've gotten as far as making links change the content of the div like so:

<a href="#self" onClick="document.getElementById('maincontent').innerHTML = '<?php include 'file.php'; ?>';">Open file</a>

This works pretty well, sadly though, if i make another link inside that to change the content back to the first file, the server gets stuck in an infinite loop and crashes.

I really am just trying to find some way to dynamically change content, and to fetch that content from a file using php. If my way of approaching this is completely ludicrious, i do appreciate suggestions.

Answer 1

I think the best and easiest way is to use jQuery:

<script type="text/javascript">
$('#addContent').click(function(){
   $("#maincontent").load("file.php");
   return false;
});
</script>

<a href="#" id="addContent">Open File</a>
<div id="maincontent"></div>

This script will load content of file.php into selected div using ajax call.

Answer 2

This looks like a good place for jQuery's load() function. Just give the div an id, add a click event to the link and have the event load the contents of your php script into the div. Maybe append a class (e.g., 'updated') to the div when you load the new data. That way your click event can check is('.uploaded') on the div and switch it back when the link is clicked again.

Answer 3

Put divs inside #maincontent that hold the different content that you want. Give the divs IDs. When the link is clicked hide/show the appropriate content

This is a similar thread: http://stackoverflow.com/questions/1671667/tabbing-in-php/1671736#1671736

Answer 4

Firstly, I'd suggest not building the event handler like that. For one thing you'll have to be really careful you correctly escape the content. I would do it this way:

<div id="content1">
<?php include 'file1.php'; ?>
</div>
<div id="content2">
<?php include 'file2.php'; ?>
</div>

and then manipulate those with Javascript. You could either set the innerHTML or simply hide/show the relevant divs. So:

<script type="text/javascript">
var content = 1;

function swap_content() {
  document.getElementById('maincontent').innerHTML = document.getElementById('content' + content).innerHTML
  if (content == 1) {
    content = 2;
  } else {
    content = 1;
  }
}
</script>
<a href="#" onclick="swap_content();">Open File</a>

Alternatively you could just hide/show them as appropriate rather than copying content.

Lastly, while not required this is much more trivial to do in a Javascript library like jQuery.

Answer 5

To me it sounds like you should use AJAX. On the clickevent (which you also shouldn't bind with inline code), you would instead load the content with an XHR request.

To make life easier for you I would recommend looking at a JavaScript Library, where my personal favorite would be jQuery (www.jquery.com). To achieve what you are trying to do you would just do:

$('#id_to_the_a_tag').click(function() {
    $("#maincontent").load("file.php");
    return: false;
});