?
Solved

Passing a variable into a div

Posted on 2015-01-30
3
Medium Priority
?
122 Views
Last Modified: 2015-02-04
Hi,
    I have some code, which looks something like this:

<a href="#" onclick="showHide('hidden_div2'); return false;">click here</a>

When this is clicked, a hidden div loads at the bottom of the page.  The trouble is this link is generated from a mysql dataset, so it appears on every row.  What i need to do is pass the $id variable, so the hidden div can be pre-populated with that rows data.

I suspect the link will need to contain something along the lines of <a href="mypage?ID=$row['ID'];"> - but how do I then get my hidden div to show?

Thanks in advance.
0
Comment
Question by:damianb123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40580886
You may be able to do this in JavaScript by using jQuery.  jQuery can hide and show sections of the web page, and it can communicate with the server via AJAX.  And, of course, the server can communicate with MySQL and return the results of a query.  I have a fairly basic jQuery / AJAX example here in this article.  Please read it over, then post back if you still need help with the specifics.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 1000 total points
ID: 40581545
Here's a little more on-target answer with a code sample.  You can see this in action on my server, here:
http://iconoun.com/demo/temp_damianb123_client.php

First the server-side action script.  It expects to receive input in the q= URL argument.  It filters the input, accepting only known good values, and it provides a response that goes back to the client, where it's interpreted by jQuery.  You can test this script via your browser with these links:
http://iconoun.com/demo/temp_damianb123_server.php?q=2 // WORKS, RETURNS RESPONSE
http://iconoun.com/demo/temp_damianb123_server.php?q=4 // FAILS, RETURNS NOTHING
<?php //demo/temp_damianb123_server.php
error_reporting(E_ALL);

// IDENTIFY THE ALLOWABLE INPUTS
$k = [1,2,3];

// IDENTIFY THE ACTUAL INPUT WITH A DEFAULT VALUE OF ZERO
$q = !empty($_GET['q']) ? $_GET['q'] : '0';

// FILTER THE INPUT, IGNORING ANYTHING THAT IS NOT ALLOWABLE
if (!in_array($q, $k)) die();

// RETURN THE RESPONSE
$r = "You clicked on $q";
die($r);

Open in new window

Next, the client-side script.  It presents three buttons.  When you click a button inside the clickable div, the script captures the value of the target element and makes an AJAX request to the server-side script, sending the value in the q= argument.  When the server responds, it replaces the contents of the target paragraph in the output div.
<!-- demp/temp_damianb123_client.php -->
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>Ajax Example Using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$(document).ready(function(){
    $("#clickable").click(function(e){
        var id = e.target.value;
        $.get("temp_damianb123_server.php", {q:id}, function(response){
            $("#output p#target").html(response);
        });
    });
});
</script>

</head>
<body>

<div id="clickable">
<input type="button" value="1" /> One <br>
<input type="button" value="2" /> Two <br>
<input type="button" value="3" /> Tre <br>
</div>

<div id="output">
   <p  id="target"><!-- This element awaits the AJAX response --></p>
</div>


</body>
</html>

Open in new window

HTH, and please post back if you still have any questions. ~Ray
0
 
LVL 16

Accepted Solution

by:
Kiran Paul VJ earned 1000 total points
ID: 40582891
You can pass the ID to the function like this.


<a href="#" onclick="showHide('hidden_div2', '<?php echo($row['ID']);?>'); return false;">click here</a>

Open in new window



So that your html will look like this

<a href="#" onclick="showHide('hidden_div2', '1'); return false;">click here</a>
<a href="#" onclick="showHide('hidden_div2', '2'); return false;">click here</a>
<a href="#" onclick="showHide('hidden_div2', '3'); return false;">click here</a>
<a href="#" onclick="showHide('hidden_div2', '4'); return false;">click here</a>

Open in new window



Handle the id in JavaScript function like this

function showHide(divName, id) {
   alert(id); // do whatever here.
}

Open in new window



hope these helps,
kiranvj
0

Featured Post

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Containers like Docker and Rocket are getting more popular every day. In my conversations with customers, they consistently ask what containers are and how they can use them in their environment. If you’re as curious as most people, read on. . .
In this series, we will discuss common questions received as a database Solutions Engineer at Percona. In this role, we speak with a wide array of MySQL and MongoDB users responsible for both extremely large and complex environments to smaller singl…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
Suggested Courses

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question