Send variables from MySQLi to jquery triggered div

Hi there!

On my page I show results that are stored in a database. These results are called using the mysqli_fetch_array function. Every result contains a button which can be pressed to gain more information about the specific result. If this button is pressed, a DIV will fade in, using javascript. At the corner of this DIV the user’s able to press a close button in order to make the DIV fade out. I need all the data that belongs to the corresponding button inside this DIV. It’s only one DIV. If the user clicks the 4th result (so let’s say ID=4), I want all details from ID 4 be displayed in the DIV. But when the button of the 9th result’s clicked (ID=9), I want all the details from ID 4 to be replaced by the details from ID 9, so inside this very same DIV.

How can I achieve this? The DIV and Array part is working, I just can’t get the details inside this DIV.

I personally would use Ajax. How are you going about receiving the data?

I don’t have experience with AJAX. How would I do this? I don’t have anything yet. I just have the basics:

  • A button to trigger the script
  • A script to make the DIV fadein
  • A DIV that should hold the details.

This all works. The only thing need to be created is a script that gets the data and put it all on the right place.

Well, AJAX is the way to go as it loads data from a php file and can be placed into a DIV. Basically you need
three parts. The DIV and button, some AJAX code which is JQuery and the page that loads your data. Here
is how this is done, very loosely to give you a place to start with…

Some HTML code:

The JQuery/AJAX code to load the secondary page... [php][/php] Then, your page1.php would include your code to pull the data from the database. You will need to figure out how to handle the indexing for your pages. Should not be hard... If your page1.php file contained just this: <?php echo "This is the sample data to be printed for request from AJAX"; ?> Then, the "content" DIV would show that line in the DIV once you pressed the button. Perhaps you should play around with this and then post a sample page so we can help further. Good luck...

Here is the theory on how it works:

Each button created has a unique identifier as the value in the button.
That id is sent to the ajax function.
the ajax function calls a php function that takes the id as a parameter.
The php script then runs the query against the database.
the php script then echos out the results, preferably in json or xml format.
the ajax function takes the results and outputs it to the browser.

Sponsor our Newsletter | Privacy Policy | Terms of Service