jQuery check if div is empty after templating

Question

I am looking to if a div is empty and my code works if the div looks like this with no white space, but I am using Smarty and want to show data if it is available. If the highlights class is empty then I want to show the no_highlights well.

If it helps the only content that will appear inside the highlights is <div class="form-group">  </div>

<div class="highlights">
    {if $highlights}
    {/if}
</div>
<a href="#" class="pull-right showhouse-text" id="add_highlight"><i class="fa fa-plus"></i> Add Highlight</a> <br>
<div class="well no_highlights">
    <h4>No highlights found</h4>
    <p>You have not yet added any highlights to this property</p>
    <p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>

var highlight = '<div class="form-group">       <label for="highlight" class="col-sm-3 col-lg-2 control-label">Highlight:</label>       <div class="col-sm-9 col-lg-3 controls">            <input type="text" name="highlight_name[]" data-rule-required="true" class="form-control" placeholder="Highlight Name">     </div>      <div class="col-sm-9 col-lg-7 controls">            <textarea name="highlight_description[]" class="form-control" rows="3" placeholder="Description for highlight"></textarea>          <a href="#" class="pull-right showhouse-text remove_highlight"><i class="fa fa-plus"></i> Remove Highlight</a>      </div>  </div>';
if(('.highlights')){
    $('#add_highlight').hide();
    $('#order_highlights').hide();
}else{
    $('.no_highlights').hide();
}

$('.first_highlight').click(function(){
    $('.no_highlights').hide();
    $('#add_highlight').show();
    $('#order_highlights').show();  
    $('.highlights').append(highlight);
});

$('#add_highlight').click(function(){
    $('.highlights').append(highlight);
});

I need the div outside the if statement so I can append the form fields. Added it in an edit — Pierce McGeough, Jan 03 '14 at 13:11

score 0 · Answer 1 · edited May 23 '17 at 12:19

0

Try this,

Template

{if $highlights}
    <div class="highlights">

    </div>
{/if}

Jquery

if(! $('.highlights').length){
    $('#add_highlight').hide();
    $('#order_highlights').hide();
}else{
    $('.no_highlights').hide();
}

Else you can choose any one from How to check if div element is empty

edited May 23 '17 at 12:19

Community

1
1

answered Jan 03 '14 at 13:06

Rohan Kumar

40,431
11
76
106

I need the div outside the if statement so I can append the form fields. – Pierce McGeough Jan 03 '14 at 13:09

score 0 · Answer 2 · edited May 23 '17 at 10:32

To check if a div element is empty refer here

Alternatively you should put a check in the template itself

<div class="highlights">
  {if $highlights}
  {/if}
</div>
<a href="#" class="pull-right showhouse-text {if $highlights}{else}hidden{/if}" id="add_highlight">
  <i class="fa fa-plus"></i>Add Highlight
</a> <br>
<div class="well no_highlights {if $highlights}hidden{/if}">
  <h4>No highlights found</h4>
  <p>You have not yet added any highlights to this property</p>
  <p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>

CSS:

.hidden{
 display: none;
}

jQuery check if div is empty after templating

2 Answers2