CODEWITHSUNDEEP
javascriptjqueryhtml-table
Yunowork
Yunowork

Reputation: 345

Text not changing in jQuery

I seem to be doing something wrong in the following code: http://jsfiddle.net/yunowork/qKj6b/1/

When you click next, the text within the span .hiddentext should be displayed in the span .showtext on top and correspond to the right Race (Rn). For example when R3 is highlighted the content of that .hiddentext "Race 3
Oregon 14:30" should be displayed within the span .showtext.

This is the line where I make a mistake:

$('.showtext').text($('.hiddentext').first('td:first').text());

What am I doing wrong here?

Upvotes: 0

Views: 114

Answers (5)

balexandre
balexandre

Reputation: 75103

Let's start simple:

Your problem:

$('.showtext').text($('.hiddentext').first('td:first').text());

you are saing, that, grab all .hiddentext, choose the first that has a td ... witch is not what you have in code, you have, td that contains hiddentext... so, the other way around.

enter image description here

What you want to do is simply get the current NEXT td and grab the hiddentext, so, just change to:

$('.showtext').text($nextCol.find('.hiddentext').text());

Now, can you see that the <br/> is not correctly rendered? That's because you are setting the text property, and you should set the html property.

enter image description here

the final code should be something like:

$('.showtext').html($nextCol.find('.hiddentext').html());

live example: http://jsfiddle.net/qKj6b/8/

enter image description here

Your code:

every time you need to have placeholders to provide some data to a context, please, DO NOT USE HTML TAGS to hold such values and hide them... make the use of the data- attribute, witch is a HTML5 complience, and works very well in any browser even if it does not have not HTML5 support, like IE6.

your table definition (td) that currently is:

<td class="visible" id="r2">
    <span class="hiddentext">Race 2<br />Santa Fe 12:00</span>
    <strong><a href="#" title="Race number 1">R2</a></strong>
</td>

should be something like:

<td class="visible" id="r2" data-text="Race 2<br />Santa Fe 12:00">
    <a href="#" title="Race number 1">R2</a>
</td>

witch is way easier to read, and from your javascript code, you can easily get this as:

var hiddenText = $nextCol.data("text");

Your code (part 2):

This one is quite simple to know

Every time you are repeating yourself, you're doing it wrong

You have the methods for Next and Prev almost exactly as each other, so, you are repeating everything, for this, you should refactor your code and just use one simple method, this way, any future change only happens in one place, and one place only.

$(".next").click(function(e){
    e.preventDefault();
    var $nextCol = $('.highlighted').next('td');
    MoveCursor($nextCol, 'next');
});

$(".previous").click(function(e){
    e.preventDefault();
    var $prevCol = $('.highlighted').prev('td');
    MoveCursor($prevCol, 'prev');
});

function MoveCursor(col, side) {

    var maxCol = 8;

    if((side === 'next' && col.length != 0) || 
       (side == 'prev' && col.length != 0 && col.index() >= maxCol)) {

        $('.highlighted').removeClass("highlighted");
        col.addClass("highlighted");

        // show current title
        $('.showtext').html(col.data('text'));

        if (col.hasClass("invisible")) {
            col.removeClass("invisible");        
            col.addClass("visible");

            var $toRem;

            if(side == 'prev')
                $toRem = col.next('td').next('td').next('td').next('td').next('td').next('td');
            else
                $toRem = $nextCol.prev('td').prev('td').prev('td').prev('td').prev('td').prev('td');

            $toRem.removeClass("visible");
            $toRem.addClass("invisible");
        }
    }
}

Live Example: http://jsfiddle.net/qKj6b/22/

Upvotes: 2

Thorsten
Thorsten

Reputation: 5644

It should be

$('.showtext').html($('.highlighted .hiddentext').html());

Similar for the prev link...

or even better, thanks to @balexandre:

$('.showtext').html($nextCol.find('.hiddentext').html());
$('.showtext').html($prevCol.find('.hiddentext').html());

Fiddle

Update to match @balexandre hint: Fiddle 2

Upvotes: 1

The Alpha
The Alpha

Reputation: 146239

Try this (Same for both)

$('.showtext').html($currCol.find('span.hiddentext').html());

Working Example.

Upvotes: 0

Samyam A
Samyam A

Reputation: 176

.hiddentext class selects all the spans and the first() will always return you the first td. Just make sure you select .hiddentext from the currently highlighted column and you are good to go.

$('.showtext').text($('.highlighted .hiddentext').first('td:first').text());

Upvotes: 0

ffffff01
ffffff01

Reputation: 5238

Do the following:

    var $currCol = $('.highlighted'); //to get the current column
    $('.race strong').text($currCol.closest('.highlighted').first('td:first').text());

Upvotes: 1

Related Questions