Could we back up a bit and have you describe very simply how you want this
page to work? Leave out all of the implementation details like the IDs and
the JavaScript code. Simple HTML is OK if that helps describe what you want.
It looks like you're pretty far off track on the implementation (no offense
intended! We'll help you get back on track), but it would be hard to suggest
a better approach without understanding what this will look like to the
visitor to your site and how they will interact with it.
Thanks,
-Mike
> From: Oli
>
> 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>
>
