[jQuery] how to use another javascript funtion (and outside variables) inside jquery model

[jQuery] how to use another javascript funtion (and outside variables) inside jquery model


Hi guys,
I am really excited about what I can do with JQuery, I just managed to
finish one simple demo which basically allows a new css div to slide
open when people click on a link. The initially technique was all fine
except everything there is static. I then tried something dynamic
where I got myself stuck.
Let me explain a bit more, for each of the following hyperlinks I'd
like to load the id from the database. So, they will look as follows:
<a href="#" id="123" onclick="setID(123)">How to ride a bike</a>
<a href="#" id="124" onclick="setID(124)">How to play football</a>
Now, obviously the content for each different link will be different.
So, I thought of using a javascript function called setID() that takes
the id from the link and pass it on to the jquery functinons. So
rather than having to check for each and every links like this:
$("#link1").click(..............
$("#link2").click(............
$("#link3").click(.............
and so forth and so on, this little trick will do the job where one
funtion will take care of all the links and their values and hence no
repeat.
$((i)).click( -----
where i is the global variable that stores the link ID.
It works to some extent but not entirely right. I used an alert(i);
call to check the value and this is what I am finding difficult to
comprehend.
say, i click on first link whose id is 123, a popup window shows #123.
it then slides open the show div.
if i want to close it I can just hit the hide me button and it hides
the div, no problem.
all fine uptil here.
Now, the interesting and the difficult bit that I dont have any clue
whatsoever is when I click on any part of the web page and find the
div slides open automatically. I printed the ID and it occured to me
because I didnot initialise the global variable after hiding the div
first time, the next click event is using the old value. So, I created
a fucntion called init(), all it does it set the global variable i to
null.
But it doesnot resolve my problem. I would also like to use php and
database in order to populate content for show div. Any idea how
passing javascript variable to php script will work in this context?
Here is my code:
<script type="text/javascript">
var i = "";
function setID(x){
i = "#"+x;
}
function init(){
i = "";
}
$(document).ready(
function(){
$("#showResource").hide();
$((i)).click(
function(){
alert(i);
init();
$("#showResource").slideDown(800);
return false;
}
);
$("#hideMe").click(
function(){
$("#showResource").slideUp(800);
return false;
}
);
}
);
</script>
<style type="text/css">
#show{border:1px #cfdfef solid; width:96%; background:url(images/
hide_me.gif); background-position:right bottom; background-repeat:no-
repeat; margin-bottom:10px; color:#333333; font-family:Arial,
Helvetica, sans-serif; font-size:11px; padding:10px; display:inline;
background:#ddf8ff;}
</style>
<div id="show"> show this content <button id="hideMe">hide me</
button></div> <!-- show div ends-->
<!--
Next job to use php script instead of static text
<div id="show">
<?php
$sql = SELECT * from test where id = i (javascript variable); // any
idea how to achieve this? did anyone try?
?>
<button id="hideMe">hide me</button></div> <!-- show div ends-->
</div>
-->
<a href="#" id="123" onclick="setID(123)">How to write an Abstract</a>
<a href="#" id="124" onclick="setID(124)">How to write an Abstract</
a>