Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Passing a variable into a div

Posted on 2015-01-30
3
Medium Priority
?
123 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 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
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…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

916 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