Solved

Passing a variable into a div

Posted on 2015-01-30
3
114 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
  • 2
3 Comments
 
LVL 109

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 109

Assisted Solution

by:Ray Paseur
Ray Paseur earned 250 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:
kiranvj earned 250 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

Ransomware: The New Cyber Threat & How to Stop It

This infographic explains ransomware, type of malware that blocks access to your files or your systems and holds them hostage until a ransom is paid. It also examines the different types of ransomware and explains what you can do to thwart this sinister online threat.  

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.

809 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