Solved

Passing a variable into a div

Posted on 2015-01-30
3
112 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 108

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 108

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
These days socially coordinated efforts have turned into a critical requirement for enterprises.
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now