AJAX

Pass id of anchor to use in function: JQUERY

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2009

Posts: 20

Reputation: cjay175 is an unknown quantity at this point

Solved Threads: 0

cjay175

Offline

Newbie Poster

Pass id of anchor to use in function: JQUERY

Jun 24th, 2009

Hey,

I was wondering if someone could help me with this.

I want to, when an anchor link is clicked, the id of the link is grabbed by jquery then passed to a function. The id is would be the same as the id of the div that is used for the function (highlight).

If someone could tell me or point me in the right direction.

Here is what I have right now.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type="text/javascript">
 
$(function(){
	$('#mainq a').click(function(){
	var id = this.id();
	$('this.id').highlightFade({speed:2000});
	});
	});
 
</script>
<script type="text/javascript">

$(function(){
	$('#mainq a').click(function(){
	var id = this.id();
	$('this.id').highlightFade({speed:2000});
	});
	});

</script>

The HTML is like this (its for FAQ section):

QUESTIONS SECTION:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<div id="mainq" style="padding:10px;" class="mainq"><a name="top"></a>
 
<h3>Payment and Billing.</h3><br />
<a href="#aq1" id="qa1" onclick="javascript: getID(this)">What is water?</a><br />
<a href="#aq2" id="qa2" onclick="javascript: getID(this)">What is copper?</a><br />
</div>
 
<h3>Payment and Billing.</h3><br />
<a href="#aq1" id="qa1" onclick="javascript: getID(this)">What is water?</a><br />
<a href="#aq2" id="qa2" onclick="javascript: getID(this)">What is copper?</a><br />
</div>
<div id="mainq" style="padding:10px;" class="mainq"><a name="top"></a>

<h3>Payment and Billing.</h3><br />
<a href="#aq1" id="qa1" onclick="javascript<b></b>: getID(this)">What is water?</a><br />
<a href="#aq2" id="qa2" onclick="javascript<b></b>: getID(this)">What is copper?</a><br />
</div>

<h3>Payment and Billing.</h3><br />
<a href="#aq1" id="qa1" onclick="javascript<b></b>: getID(this)">What is water?</a><br />
<a href="#aq2" id="qa2" onclick="javascript<b></b>: getID(this)">What is copper?</a><br />
</div>

ANSWERS HERE:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<div id="maina">
<hr /><div id="qa1" class="answertext"><a name="aq1"></a><h3>What is Water?</h3>
Water is H2O.<br /><a href="#top"><img src="images/top_arrow.jpg" border="0"/></a></div>
 
<hr /><div id="qa2" class="answertext"><a name="aq2"></a><h3>What is Copper?</h3>
Copper is cu.<br /><a href="#top"><img src="images/top_arrow.jpg" border="0"/></a></div>
</div>
<div id="maina">
<hr /><div id="qa1" class="answertext"><a name="aq1"></a><h3>What is Water?</h3>
Water is H2O.<br /><a href="#top"><img src="images/top_arrow.jpg" border="0"/></a></div>
    
<hr /><div id="qa2" class="answertext"><a name="aq2"></a><h3>What is Copper?</h3>
Copper is cu.<br /><a href="#top"><img src="images/top_arrow.jpg" border="0"/></a></div>
</div>

The code is a little messy but I am just testing right now.

So if someone clicks on #aq1 link the id "aq1" is grabbed and used for the highlightFade function. It would highlight the div with id "aq1".

Thanks so much for any help

•

Join Date: Apr 2007

Posts: 439

Reputation: Fungus1487 is on a distinguished road

Solved Threads: 50

Fungus1487 Fungus1487 is offline

Offline

Posting Pro in Training

Re: Pass id of anchor to use in function: JQUERY

Jun 24th, 2009

1. Don't use ID like you do. ID's are meant to be unique but your first section use "qa1" and "qa2" twice in both anchors and is then used in the divs as part of the second section.

2. You dont need the "OnClick" attribute if using jQuery (it is not recommended practice)

3. The easiest way would be to change your anchors id to different attributes (perhaps your own) or seeing as you are using the id in the href attribute use that instead e.g.

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<div id="mainq" style="padding:10px;" class="mainq"><a name="top"></a>
    <h3>Payment and Billing.</h3><br />
    <a href="#aq1">What is water?</a><br />
    <a href="#aq2">What is copper?</a><br />
    <h3>Payment and Billing.</h3><br />
    <a href="#aq1">What is water?</a><br />
    <a href="#aq2">What is copper?</a><br />
</div>
<div id="mainq" style="padding:10px;" class="mainq"><a name="top"></a>
    <h3>Payment and Billing.</h3><br />
    <a href="#aq1">What is water?</a><br />
    <a href="#aq2">What is copper?</a><br />
    <h3>Payment and Billing.</h3><br />
    <a href="#aq1">What is water?</a><br />
    <a href="#aq2">What is copper?</a><br />
</div>

And then change your JavaScript to read...

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
    $(function() {
        $('#mainq a').click(function() {
            var id = $(this).attr('href');
            $(id).highlightFade({speed:2000});
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $('#mainq a').click(function() {
            var id = $(this).attr('href');
            $(id).highlightFade({speed:2000});
        });
    });
</script>

With the above code you then seperate the actual javascript from the page view. I have changed your id variable to get the href attribute which would be '#qa1' or '#qa2' and then it finds this element using another jQuery selector $(id).

Hope this helps

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: May 2009

Posts: 20

Reputation: cjay175 is an unknown quantity at this point

Solved Threads: 0

cjay175

Offline

Newbie Poster

Re: Pass id of anchor to use in function: JQUERY

Jun 25th, 2009

Hey Fungus,

Sorry for the late reply I was out in the mountains yesterday.

Thanks a lot for the help it is working perfect.

Like I mentioned the code is messy just because I kept adding more and more stuff to it trying to get it to work. I am just starting to learn javascript and jquery.

thanks again for the help.