-1

I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.

<div class="btn-group ewButtonGroup open">
    <button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
    <ul class="dropdown-menu ewMenu">
        <li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&amp;TeamID=1">View</a></li>
        <li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
        <li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
        </li>
    </ul>
</div>

I have tried the following code which deosnt work.

<script>
$(document).ready(function() {
     var Week_Check = $('#ewRowLink ewView span').text();
     if ( Week_Check > 10) {
         $('.ewRowLink ewView').hide();
     } 
 });
 </script>
0

3 Answers 3

2

You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:

$('.ewRowLink.ewView').hide();

By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.

6
  • Thanks, it now working but hides in all rows. Is there a way to hide that specific row. I have many rows in the table. Thanks Commented Apr 8, 2014 at 18:12
  • Well I'm not quite sure what you mean. Try to clarify what's the actual problem. I only noticed that your selector wasn't working but now I see there's not enough info to fully understand what's wrong.
    – MaGnetas
    Commented Apr 8, 2014 at 18:15
  • I have many rows like this. I will check certain data in each row and if it meets a condition, the hide is activated. Commented Apr 8, 2014 at 18:18
  • Well you gonna have to somehow identify what needs to be hidden. Assigning IDs to the rows itself might help. If you have similar constructions in every row you might achieve this using a selector $('#yourRowId .ewRowLink.ewView').hide();
    – MaGnetas
    Commented Apr 8, 2014 at 18:26
  • Final; $('#r1_teams .ewEdit, #r1_teams .ewCopy').hide(); Commented Apr 8, 2014 at 18:39
1

You can use .off() to unbind the event:

$('.ewEdit, .ewCopy').off('click');

or if you want to hide:

$('.ewEdit, .ewCopy').hide();

Yet you need to mention on what condition you want to do this.

4
  • oh! yeah i got this now, actually it seems you have not bound any click event to it that's why .off() is not working.
    – Jai
    Commented Apr 8, 2014 at 18:11
  • Is there a way i can hide for that particular row. It hides in all rows. Thanks anyway. Commented Apr 8, 2014 at 18:14
  • yes that is possible but you need to have some kind of identification or anything specific to that row on that basis we can hide the links.
    – Jai
    Commented Apr 8, 2014 at 18:16
  • Each row has an id. Examples id="r1_teams" id="r2_teams" etc, they are dynamically created as data is entered. Commented Apr 8, 2014 at 18:29
1
<script>
$(document).ready(function() {
     var Week_Check = $('#ewRowLink, #ewView').find('span').html();
     if ( Week_Check > 10) {
         $('.ewRowLink, .ewView').hide();
     } 
 });
 </script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.