0

I have a JQuery function that toggles a column in the database (as per datatables.net) 

<a href="javascript:void(0);" onclick="fnShowHide([1]);" id="name">Show Name</a>

clicking on Show Name will hide the column but I also want to change the link now to Hide Name.

There are multiple links to hide/show columns such as Show Address, Show Company etc and they all goto the same fnShowHide function.

JQuery toggle does not work embedded inside a click. (this).text does not work either. a seperate toggle function outside of fnShowHide sets the link to display:none

function fnShowHide( iCol )
        {
Improve this question
2
  • Is the link with 'Show name' inside the column you want to show/hide? Commented Jul 9, 2013 at 20:28
  • no its not its just a link above the table that toggles columns Commented Jul 9, 2013 at 21:12

2 Answers 2

Reset to default
2

Try this way:

Markup

<a href="javascript:void(0);" onclick="fnShowHide.call(this, [1]);" id="name">Show Name</a>

JS

function fnShowHide( iCol ) {
 //Your code
    $(this).text(function(_, text) { //now this refers to the element clicked
        return text === 'Show Name' ? 'Hide Name' : 'Show Name';
   });
}

Fiddle

or use jquery for event registration and get rid of inline onclick attribute on the element, use data-* attribute to specify the relative data for the element and use jquery data api to get it :

Makup

 <a href="javascript:void(0);" data-icol="[1]" id="name">Show Name</a>

JS

$(function(){
     $('#name').click(fnShowHide);
});

function fnShowHide()
{
     var iCol = $(this).data('icol'); //will give [1]
         //Your code
     $(this).text(function(_, text) { //now this refers to the element clicked
        return text === 'Show Name' ? 'Hide Name' : 'Show Name';
     });
}

Demo

Update

Based on the comment support for multiple fields.

$(function () {
    $('.fields').click(fnShowHide);
});

var showregex = /^Show/i; //matches starting Show word
var hideregex = /^Hide/i; //matches starting Hide word

function fnShowHide() {

    var iCol = $(this).data('icol'); //will give [1]
    console.log(iCol);
    //Your code
    $(this).text(function (_, text) { //now this refers to the element clicked

    return showregex.test(text) ? //test if it Show
                 text.replace(showregex, 'Hide') : //replace it with hide
                 text.replace(hideregex, 'Show'); // else replace it with show

    });
}

Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

as in the question there will be multiple links (show Name, Show Address)for the same function (fnShowHide) so the first answer wont work
@Jabda Can you place the strings in data-attribute? if so we can still make it work well...
or i have another solution detecting the Show or Hide words.
which ever is simpler, I am trying to avoid having a showhide function for each link
Cool then... here you go: jsfiddle.net/x2Ymt
|
1

You can use the jQuery text method to show the required text

function fnShowHide( iCol ) {

    $(this).text(function(i, txt) {
        return txt === 'Show Name' ? 'Hide Name' : 'Show Name';
   });
}

Also it is a better idea to remove inline events and assign them in the javascript files instead..

HTML

<a href="javascript:void(0);" data-id="[1]" id="name">Show Name</a>

And use data-* attributes to hold the number if any..

Javascript

$('a').on('click', fnShowHide);

function fnShowHide() {
    var $this = $(this);
        iCol = $this.data('id');
    $this.text(function (i, txt) {
        return txt === 'Show Name' ? 'Hide Name' : 'Show Name';
    });
}

Check Fiddle

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.