Automatically Hide DIV using javascript prototype

Question

Before I begin, I'm using PHP and JS lib Prototype to handle Ajax in my code.

So my problem is the following: I'm using the following function to load a php file into a target DIV

   function ajaxUpdater(id, url)
{
    new Ajax.Updater('targetDiv', 'data.php', {asynchronous: true});
}

using the onClick function within a button, I grab the contents of data.php and display it in a DIV with the id of 'targetDiv'.

the problem is this.

There are certain things within data.php that i want to have hidden and only shown when an event is triggered. I've been trying loads of different solutions, but nothing seems to work. (just to add to the confusion, functions work when data.php is opened individually, but not when data.php is loaded using my ajax function.

Any help or clues or anything will be much appreciated!

Answer 1

Hiroki,

I'd suggest passing some a parameter with your Ajax method and using some logic in data.php to pick and choose what data to send back. Here's an example of how I pass parameters with my prototype calls.

new Ajax.Updater('targetDiv', 'data.php', { parameters: { myParam1: 'hello', myParam2: 'world'} });

The go into your data.php file to create some logic. Note that by default, prototype's method to send params is POST, but you can always change that by declaring method: 'get' in the same Ajax.Updater call, like so:

new Ajax.Updater('targetDiv', 'data.php', { method: 'get', parameters: { myParam1: 'hello', myParam2: 'world'} });

Answer 2

Check out the AJAX section of the Prototype API. In it, it talks about an option you can use called 'evalJS' that you can set to true. When you have this option set, any javascript returned by the updater will be evaluated and ran like normal.

function ajaxUpdater(id, url) {
    new Ajax.Updater('targetDiv', 'data.php', {
      asynchronous: true,
      evalJS: true
    });
}