/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Onclick help

Copy linkTweet thisAlerts:
Jan 11.2010

I have a php script that connects to a database and makes a list or titles for games. now i want it to allow you to click one and it pull an summary from the database and hook display it.

[code=php]
<?php

$con = mysql_connect(//You don’t need to see this.//);
$id = 0;
if (!$con)
{
die(‘Could not connect: ‘ .mysql_error());
}

mysql_select_db(“main”, $con);

$result = mysql_query(“SELECT * FROM main.games”);

while($row = mysql_fetch_array($result))
{
$id + 1;
echo “<div class=title onclick=#sum” . $id . “style=display: block;>”;
echo “<div id=sum”;
echo $id;
echo ” style=display: none;>”;
echo $row[‘Summary’];
echo “</div>”;
echo $row[‘Name’];
echo “</div>”;
echo “<br>”;
}
mysql_close($con)

?>

[/code]

I don’t think this will work but here it is.

to post a comment
PHP

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@YelgnidrocJan 12.2010 — I would create a list of hyperlinks in your while loop that will then pick up the full details from the database.

If you want to use Javascripts onclick() you could use that in cinjunction with and AJAX call.
Copy linkTweet thisAlerts:
@dk_zero-coolJan 12.2010 — This might work better.

[code=php]echo "<div class='title' onclick='document.getElementById("sum".$id."").style.display="block"'>"; [/code]

And it is a vary bad habit NOT to rap HTML in " or '

For the summary, you could make a new request to the server where you parse an ID on the game selected.
Copy linkTweet thisAlerts:
@JerailJan 12.2010 — The thing is that unless you use AJAX, you can't dynamically read from a MySQL database. I think if you really want to maintain the look, the easiest way would be to load the contents of the database into a JavaScript array, a deal with it from there. JavaScript certainly allows you to update the page dynamically.

Unless you have a lot of data to load, I'm not sure the extra effort with AJAX would be all that much worth it. If you want to use the onclick="" event handler, then you have to use some kind of JavaScript, but just plain non-AJAX script should work fine for your purposes.

Maybe something like this (assume we've already loaded the table into $result):

[code=php]
<script type="text/javascript">
var row_array = [<?php
while($row = mysql_fetch_array($result)) {
echo "'$row', ";
}
?>''];
</script>
[/code]
Copy linkTweet thisAlerts:
@Not_to_mentionauthorJan 12.2010 — Good idea, dont tell my boss, but [SIZE="1"]this is the first website ive used sql on...[/SIZE]
Copy linkTweet thisAlerts:
@Not_to_mentionauthorJan 12.2010 — now its only working for the first one, i think i did something wrong with the $id variable, because both links point to the first one.
Copy linkTweet thisAlerts:
@JerailJan 12.2010 — now its only working for the first one, i think i did something wrong with the $id variable, because both links point to the first one.[/QUOTE]

I notice that you use "$id + 1;". Did you mean to do "$id++", which increments $id by one? "$id=0; echo $id+1; echo $id;" would output "10", whereas "$id=0; echo $id++; echo $id;" would output "01". That's because "$id+1" simply returns the value of $id plus 1 and takes no further action, whereas $id++ first returns the value of $id, and then performs the operation "$id = $id+1".
Copy linkTweet thisAlerts:
@Not_to_mentionauthorJan 12.2010 — That worked great thx.
Copy linkTweet thisAlerts:
@Not_to_mentionauthorJan 12.2010 — Now i need it to select all divs that start with sum, like getelementbyid, but just as long as it starts with sum, so that i can set them all to display: none; when the user clicks another one.
Copy linkTweet thisAlerts:
@JerailJan 12.2010 — Not totally sure how to use wildcards in JavaScript, but I found somebody with a similar problem who seems to have gotten lots of advice: http://bytes.com/topic/javascript/answers/91974-wildcard-getelementbyid
Copy linkTweet thisAlerts:
@dk_zero-coolJan 12.2010 — [CODE]function changeView(id) {
var elements = document.getElementsByTagName("div");
for(var i=0; i<elements.length; i++) {
if(elements.id.substring(0, 3) == "sum" && elements.id != "sum"+id) {
elements.style.display = "none";

}else if(elements.id == "sum"+id) {
elements.style.display = "block";
}
}
}[/CODE]
Copy linkTweet thisAlerts:
@Not_to_mentionauthorJan 12.2010 — Man. This is getting fun. Zero cool, your code did not work, mut im only assuming i used it right.

[code=php]
<?php

$con = mysql_connect( "localhost", "brian", "");
$id = 0;
if (!$con)
{
die('Could not connect: ' .mysql_error());
}

mysql_select_db("main", $con);

$result = mysql_query("SELECT * FROM main.games");

while($row = mysql_fetch_array($result))
{
$id++;
echo "<div class='title' onclick='changeView(".$id.")'>";
echo $row['Name'];
echo "<div id=sum".$id." style=display:none>";
echo $row['Summary'];
echo "</div>";
echo "</div>";
echo "<br>";
}
mysql_close($con);

?>

<script type=text/javascript>
function changeView(id) {
var elements = document.getElementsByTagName("div");
for(var i=0; i<elements.length; i++) {
if(elements.id.substring(0, 3) == "sum" && elements.id != "sum"+id) {
elements.style.display = "none";

}else if(elements.id == "sum"+id) {
elements.style.display = "block";
}
}
}
</script>
[/code]
Copy linkTweet thisAlerts:
@dk_zero-coolJan 12.2010 — First of, please put ' in your HTML ?
[code=php]echo "<div id='sum".$id."' style='display:none'>"; [/code]

Second, I have made an error. All "elements", accept the declaration line "var elements", needs an array key.

[CODE]function changeView(id) {
var elements = document.getElementsByTagName("div");
for(var i=0; i<elements.length; i++) {
if(elements[i].id.substring(0, 3) == "sum" && elements[i].id != "sum"+id) {
elements[i].style.display = "none";

}else if(elements[i].id == "sum"+id) {
elements[i].style.display = "block";
}
}
}[/CODE]

Third, it's not a demand, but JavaScript functions belongs in the head section of your document.

In the future, open Firefox and go to "Tools->Error Console".

Error messages often tells a lot about the problem, or at least where to look and what to look for. A great tool when working with JavaScript.
Copy linkTweet thisAlerts:
@Not_to_mentionauthorJan 12.2010 — what would i need to do to hide it when the user clicks it a second time?
Copy linkTweet thisAlerts:
@dk_zero-coolJan 13.2010 — [CODE]function changeView(id) {
var elements = document.getElementsByTagName("div");
for(var i=0; i<elements.length; i++) {
if(elements[i].id.substring(0, 3) == "sum" && elements[i].id != "sum"+id) {
elements[i].style.display = "none";

}else if(elements[i].id == "sum"+id) {
if(elements[i].style.display == "none") {
elements[i].style.display = "block";
}else {
elements[i].style.display = "none";
}
}
}
}[/CODE]

You just add one more condition to the code
×

Success!

Help @Not_to_mention spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...