CODEWITHSUNDEEP
jquery-uijquery
NealR
NealR

Reputation: 10669

jQuery .show() not working on <span> tag

This seems like it would be pretty straightforward. I have a text box and I want a link to display based on whether or not there is content in there. In my document.ready I have the code set to 

    $(document).ready(function () {
        $('#searchValue').change(function () {
            if ($('#searchValue').val().length > 0) {
                $('#home').show();
            } else {
                $('#home').hide();
            }
    });

and here is the section from my ASP MVC view with the links I'm referring to. I want everything outside the span to display when the page loads, everytime. Anything in the span, only when there is information in the text box. 

    @Html.ActionLink("Create New", "Create") |
    @Html.ActionLink("Export to Spreadsheet", "ExportToCsv") 
    <span class="home" style="display:none;">
    | @Html.ActionLink("Back to Index", "Index")       
    </span>

I've tried this with and without the style="display:none;" attribute and I cannot get the .show() or .hide() to fire. I have stepped through the code and can see that the condition in the doucment.ready is working, however, and that part of the code is being reached.

Upvotes: 1

Views: 1549

Answers (3)

Adil
Adil

Reputation: 148110

You need class selector instead of id selector, You have home as class of span not the id either you assign home to id or use class selector.

Change

 $('#home')

To

$('.home')

You code would be

$(document).ready(function () {
    $('#searchValue').change(function () {
        if ($('#searchValue').val().length > 0) {
            $('.home').show();
        } else {
            $('.home').hide();
        }
});

Upvotes: 5

palaѕн
palaѕн

Reputation: 73896

Simple enough:

$('#searchValue').change(function () {
    if ($(this).val().length > 0) $('.home').show();
    else $('.home').hide();
});

Upvotes: 1

Christopher Marshall
Christopher Marshall

Reputation: 10736

You're calling span id of home and it actually is the class.

Change to $('.home')

Upvotes: 4

Related Questions