hide fields using html div with javascript

Question

I am very much new to Javascript but was hoping someone could advise with the following problem. I have the following div class and a part of the requirement is to hide the entire div and all its sub h2 fields if the {retreat_dates} field is missing, can someone please point me to the right direction?

    <div class="grid_3 retreatextradetails">

        <h2>Retreat dates</h2>
        <p>
        {retreat_dates}{date}<br />{/retreat_dates} 
        </p>
        <div class="hr"></div>
        <h2>Age range</h2>
        <p>{retreat_age}</p>

        <div class="hr"></div>

        <h2>Fitness level</h2>
        <p>{retreat_fitness}</p>

        <div class="hr"></div>

        <h2>No. of places</h2>
        <p>{retreat_places}</p>

        <div class="hr"></div>

        <h2>Retreat Prices</h2>
        <table>
        {retreat_prices}
        <tr>
            <td class="cell_title">{description}</td>
            <td class="price">{price}></td>
        </tr>
        {/retreat_prices}
        </table>
    </div>

This is the corresponding javascript i am using but it does not work:

</script>
$("#filterTextBox").on("keyup", function () {
    var search = this.value;
    $(".grid_3 retreatextradetails").show().filter(function () {
        return $(".retreat_dates", this).text().indexOf(search) < 0;
    }).hide();        
});
<script type="text/javascript">

You can do this server-side as well (as long as you don't need this to be dynamic). What are you using? — Radu
– Radu, Commented Apr 3, 2013 at 13:01
Why do you need to hide the H2's if the entire element is hidden ? — adeneo
– adeneo, Commented Apr 3, 2013 at 13:02
If you hide the entire div, then everything inside it will be hidden, include the h2 and all the child elements! Then whats the point of hidding the sub h2 fields?? — palaѕн
– palaѕн, Commented Apr 3, 2013 at 13:02
What is {retreat_dates}? By "missing" I can only assume that it's populated by some server-side processing. That server-side processing should be where you determine whether or not to emit the div to the client. It has nothing to do with JavaScript. — David
– David, Commented Apr 3, 2013 at 13:02
Helo guys, yes but how do i hide the entire div? I also need to make that conditional check to see if one of the fields is populated... — godzilla
– godzilla, Commented Apr 3, 2013 at 13:05

Ravi Kavaiya · Accepted Answer · 2013-04-03 13:49:20Z

3

you can add function in javascript file after try it .

$('.retreatextradetails').find("h2").each(function() {
    if($(this).next('p').html().trim().indexOf("{retreat_dates}")==-1){
        $(this).hide();
        $(this).next('p').hide();
        $(this).next('div').hide();

    }

});

hope it's help for you .

answered Apr 3, 2013 at 13:49

Ravi Kavaiya

8576 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

godzilla Over a year ago

this is very close to what i require, however rather than do a string comparison, i would like to simply check if that field is populated with anything, can this be done?

Ravi Kavaiya Over a year ago

can you please give me more explanation because i'm confuse what you actual needed ?

godzilla Over a year ago

this {retreat_dates} is a macro and is dynamically replaced with strings, your code above appears to work but rather than do a string comparison for this macro, i simply need to check if that field is populated with anything

godzilla Over a year ago

i think this might be it if($(this).next('p').html().trim().indexOf(search) < 0)

Pete · Accepted Answer · 2013-04-03 13:47:37Z

2

as you can use jquery I would do the following:

give the p holding the dates some sort of classname - eg <p class="rdates">

then you can use the following jquery on document ready

$('.retreatextradetails').each(function() {
    if ($(this).children('.rdates:eq(0)').text().trim() == "") {
       $(this).hide(); 
    }
});

http://jsfiddle.net/UtS6v/

UPDATE

I have changed my answer to match your provided js

$('#filterBox').keyup(function() {
    var search = $(this).val();
    $('.retreatextradetails').hide();
    $('.rdates:contains("' + search + '")').each(function() {
        $(this).parent().show();
    });
});

http://jsfiddle.net/UtS6v/4/

Mixture of the two using the p selector: http://jsfiddle.net/UtS6v/6/

edited Apr 3, 2013 at 13:47

answered Apr 3, 2013 at 13:17

Pete

58.8k31 gold badges132 silver badges187 bronze badges

6 Comments

Ben Felda Over a year ago

Question for OP on this answer, could the {date} be populated when the {retreat_dates} is not?

Pete Over a year ago

I assumed the date was each retreat date

godzilla Over a year ago

the retreat_dates is populated dynamically, so we would need to do a check on this

Travesty3 Over a year ago

I would suggest you use jQuery.trim(). Some browsers don't have a built-in trim() function.

godzilla Over a year ago

this solution is close to what i need but can we do a check against the <p> tag instead?

|

Gabriel Espinoza · Accepted Answer · 2013-04-03 13:37:50Z

1

Lets begin by parts.

To hide a DOM element in jQuery you use .hide(), to show it again .show() so $("yourSelector").hide() should hide all elements found by "yourSelector"
Selectors are the most powerfull tool in jQuery, you should master them
You can use tools like jquery-debugger (a chrome development tool extension which allows you to try your selector in any page with jQuery on it)
Last example seems very similar what you need, if you need something else, ask and I will try to help.

answered Apr 3, 2013 at 13:37

Gabriel Espinoza

4133 silver badges19 bronze badges

1 Comment

Travesty3 Over a year ago

With all due respect, this is not a very useful answer, IMO. 1: He already seems to know about show() and hide(), as he is already using them in his provided code. 2: Doesn't help to answer the question at all. 3: While that extension may be helpful, you don't really need any extensions to try your selector, just use the built-in dev tools of almost any browser (I suggest Chrome) and console.debug(). 4: Not part of an answer.

Collectives™ on Stack Overflow

hide fields using html div with javascript

3 Answers 3

4 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related