Solved

Passing a variable into a div

Posted on 2015-01-30
3
121 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 110

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 110

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:
Kiran Paul VJ 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

617 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