1,105,340 Community Members

Tracing through indirect relationship between controls

Member Avatar
avroshk
Newbie Poster
3 posts since Oct 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi! So I have two "tabs" implemented using radio buttons as shown in the code (visibility is controled by CSS). There is one control in each tab contained in the div. I hope the code is clear enough.

Now, I am inside a javascript function where I have the control id (say "txtArea") and I need to find its parent tabid. Is there a way to trace the tabid (I mean the radio id) from the control id?

As I see it they don't have any direct or indirect relationship as per DOM structure but there is a link - the div id.

Let's see if this interests you :)

<input type="radio" id="tabGeneral" name="Tabs" value="tabGeneral" checked="" drive="divContentsGeneral,tabGeneral_selected,tabConstruction_unselected" />

<input type="radio" id="tabConstruction" name="Tabs" value="tabConstruction" drive="divContentsConstruction,tabConstruction_selected,tabGeneral_unselected" />

<!-- other controls -->

<!-- Tab1 contents -->
<div id="divContentsGeneral" style="DISPLAY: none">
    <table border="0">
        <tr>
            <td><input id="txtStreetNumber" name="txtStreetNumber" type="text" /></td>
        </tr>
    </table>
</div>

<!-- Tab2 contents -->
<div id="divContentsConstruction" style="DISPLAY: none">
    <table border="0">
        <tr>
            <td><input id="**txtArea**" name="txtArea" type="text" /></td>
        </tr>
    </table>
</div>
Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

You could just add a custom attribute:

<input id="txtStreetNumber" name="txtStreetNumber" type="text" data-tab="tabGeneral" />

Now you have a relationship, what you do with that relationship is up to you.

example using jQuery:

$(function(){
    $('#txtStreetNumber').click(function(){
        var tabId = $(this).attr('data-tab');

        alert(tabId);

        alert($('#' + tabId).is('checked'));
    });
});
Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
0
 

Are you using pure JavaScript or jQuery as well?

Member Avatar
avroshk
Newbie Poster
3 posts since Oct 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi Ale, I can't use jQuery. Have to depend on Javascript :) If there's no other way I will have to go to my codebehind and do some changes there but before I do that I want to make sure if it's possible in js 'coz it will save a lot of efforts.

Hi stbuchok, your approach definitely solves my problem but I am trying to avoid it because I have a lot of pages that implement tabs and this will mean a whole lot of manual changes in all the controls under tabs. So, I am trying to find a generic way to get the tabname in javascript. What do you think?

I was thinking if I can first trace the parent div from the control then find which tab contains the div in its "drive" attribute. Is it possible through DOM functions?

Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

Why can you use JavaScript and not jQuery?

You should be able to use this as well (just a starting point, not a full solution).

var element = document.getElementById('textboxId');
var tabId = element.getAttribute('data-tab');
tab = document.getElementById(tabId);

basically, it'd probably look something like this (place code at bottom of page in script tags, just above </body>):

var textBox = document.getElementById('textBoxId');

textBox.click = function(){
    var tabId = this.getAttribute('data-tab');
    tab = document.getElementById(tabId);

    //now you do whatever you need to with tab
};

Please remember, not tested in any way shape or form. ;)

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: