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 )
        {
madth3
  • 7,275
  • 12
  • 50
  • 74
Jabda
  • 1,752
  • 5
  • 26
  • 54

2 Answers2

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

PSL
  • 123,204
  • 21
  • 253
  • 243
  • 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 Jul 09 '13 at 21:09
  • @Jabda Can you place the strings in data-attribute? if so we can still make it work well... – PSL Jul 09 '13 at 21:11
  • 1
    or i have another solution detecting the Show or Hide words. – PSL Jul 09 '13 at 21:13
  • which ever is simpler, I am trying to avoid having a showhide function for each link – Jabda Jul 09 '13 at 21:18
  • Cool then... here you go: http://jsfiddle.net/x2Ymt/ – PSL Jul 09 '13 at 21:20
  • i have just provided a common class names for them for a better selector, if you dont want just specify them comma separated. – PSL Jul 09 '13 at 21:23
  • brilliant Thank you did not occur to me to use regex and was not aware of data-var – Jabda Jul 09 '13 at 21:27
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

Sushanth --
  • 55,259
  • 9
  • 66
  • 105