CODEWITHSUNDEEP
javascriptjquery
Kim
Kim

Reputation: 2176

.next() function

I have the following html code:

<span class="retrievedValue"><%= f.text_field :DIRECT_LABEL, :class=>"mandatory", :onblur =>"validate_this_textfield(this.value, this.id);" %></span>
<span style="display: none; float: left;"> <img src="../images/green_tick.png" /></span>

I need to display the 'green_tick.png' image when user fills in the field. For this I used the javascript function below:

function validate_this_textfield(field_value, field_id)
{
    if( $j('#' + field_id).val() != "") {

        $j('#' + field_id ).next().show(); // show next element after field
    }
    else{
        $j('#' + field_id ).next().hide();
    }
}

I am using ' .next().show(); ' to show the 'green_tick.png' image, but it does not seem to work.

Any suggestion??

Thanks

Upvotes: 0

Views: 172

Answers (3)

Sushanth --
Sushanth --

Reputation: 55750

You need to go to the span first before using .next() as the span is a sibling of the 

<span class="retrievedValue"> and not the input itself try this..

So add this to your selector.. .closest('.retrievedValue')

function validate_this_textfield(field_value, field_id)
{
    if( $j('#' + field_id).val() != "") {
        $j('#' + field_id ).removeClass('mandatory');
        $j('#' + field_id ).addClass('mandatory_field_completed')
        .closest('.retrievedValue').next().show(); // show next element after field
    }
    else{
        $j('#' + field_id ).removeClass('mandatory_field_completed');
        $j('#' + field_id ).addClass('mandatory')
        .closest('.retrievedValue').next().hide();
    }
}

Upvotes: 0

FishBasketGordo
FishBasketGordo

Reputation: 23142

According to jQuery API docs, the next method:

Gets the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

The <img> tag isn't the sibling of your field. You would have to do something like this:

$('#fieldID').parent().next().show();

Here's a working example: http://jsfiddle.net/wWeyj/

Upvotes: 1

fanfavorite
fanfavorite

Reputation: 5199

Try:

function validate_this_textfield(field_value, field_id)
{
    if( $j('#' + field_id).val() != "") {
        $j('#' + field_id ).removeClass('mandatory');
        $j('#' + field_id ).addClass('mandatory_field_completed')
        .parent().next().show(); // show next element after field
    }
    else{
        $j('#' + field_id ).removeClass('mandatory_field_completed');
        $j('#' + field_id ).addClass('mandatory')
        .parent().next().hide();
    }
}

You want to get the next from the span, not the field inside the span, so you need to go to the parent first.

Upvotes: 2

Related Questions