Search code examples
javascriptjqueryjquery-selectors

Switch span text using JQuery in a table

I have a table generated from a program, listing info from a database. You can see it here:

http://www.homeducate.me/cgi-bin/browseTutors.cgi?Lui=en&countryCode=MO

For one piece of text, if it's long, I'm listing a shortened version of the text. Now I'd like to switch it to the longer version when the user clicks on the row to expand some other rows below.

My table has a set of repeating sections like this:

<tr class="header">
 //some stuff
<script>
  var approachTxt1 = "Shortened version of the text...";
  var approachFullTxt1 = "Full length version of the text to be displayed.";
</script>

<td><img src="an_image.png"><span id="approach1">Shortened version of the text...</span><img src="another_image.png"></td>

//some more stuff
</tr>
<tr>Some more rows of stuff</tr>

Then I use the following script to (1) initially collapse all the rows up under each header row, (2) toggle them to display again when a header row is clicked (3) redirect to a url if the user clicks on the un-hidden rows and (4) change the pointer to a mouse when over the table. It all works nicely.

<script>

    $('#listTutors .header').each(function () {
        $(this).nextUntil('tr.header').toggle();
    });

   $('.header').click(function () {
    var $this = $(this);
      $(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
      });
 
    });
  
    $("tr:not('.header')").click(function () {
      top.window.location.href="http://www.homeducate.me/cgi-bin/createAccountForm.cgi?Lui=en";
    });

    $('html,table').css('cursor','pointer');

</script>

Now what I wanna do is switch the shortened version of the text to the full text when the user clicks to expand that section, and then switch it back to the shortened form once again when the user clicks again to hide that section. I've been trying:

     $(this).next('span').html($(this).next('span').html() == approachTxt1 ? approachFullTxt1 : approachTxt1);

But I'm getting "undefined is not a function" and "unexpected string" errors. Its clearly not picking up the span after the current header.

Plus I'm struggling to think how can I actuate this change for each set of my table rows (eg. switch the appropriate strings out according to which header row the user picks). I've been scratching my head on this for too long :( and would really appreciate any guidance.

Solution

  • Ok, finally worked out how to do it. Posting here just in case it might help someone else in the future....

    First, I set a unique id for each section of my table:

    <tr class="header" id="$nnn">

    where $nnn is driven from my Perl program and is simply 1,2,3 etc.

    Then for each section of the table, I put the short and long text strings into elements of an array:

    <script>
   approachTxt[$nnn] = "short version of the text";
   approachFullTxt[$nnn] = "long version of the text which will be switched in and out";
</script>

    Then my script becomes:

    <script>

    $('#listTutors .header').each(function () {
        $(this).nextUntil('tr.header').toggle();
    });

    $('.header').click(function () {
    var $this = $(this);
      $(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
      });

     $('#span' + this.id).html($('#span' + this.id).html() == approachTxt[this.id] ? approachFullTxt[this.id] : approachTxt[this.id]);

    });

    $("tr:not('.header')").click(function () {
      top.window.location.href="http://www.homeducate.me/cgi-bin/createAccountForm.cgi?Lui=en";
    });

    $('html,table').css('cursor','pointer');    

</script>

    Now it all works beautifully. And I can sleep better tonight :)