jQuery check if div is empty after templating

jQuery check if div is empty after templating - javascript

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"> <!-- different content --> </div>
<div class="highlights">
{if $highlights}
{/if}
</div>
<i class="fa fa-plus"></i> Add Highlight <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> <i class="fa fa-plus"></i> Remove Highlight </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);
});

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

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;
}

Related

show /hide complete div

I have 2 div's, in that i want show only one div at a time and hide the second div ex. div 1 is visible then div 2 should be hidden. so far i tried up to this demo
Its working as expected other than on page load both div's were visible. I want to hide div 1 and div 2 should be visible at first. May i know how to hide div 1 at first?
<div class="container">
<div class="row">
<div class="col-6 card-body targetDiv" id="div1">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<a class="btn btn-secondary showSingle" target="2" title="Add Reference"><i class="fas fa-ellipsis-v"></i></a>
</div>
<div class="col-6 card-body targetDiv" id="div2">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<a class="btn btn-secondary showSingle" target="1" title="Add Reference"><i class="fas fa-file"></i></a>
</div>
</div>

Just simply add style block on your "div1" component;
Something like this:
<div class="col-6 card-body targetDiv" id="div1" style="display:none;">

Copy div, change and output to the view

I'm a little overtaxed right now. I want to copy the last div with the class .recipe-options-line and paste it behind the last div with the class .recipe-options-line. That works so far.
I have to make some changes to the element before inserting the div. How can I do that?
i want to delete any entries in the textarea that are present in the copied element.
i want to replace in the copied element the number in the textarea (name="recipeOptions[0][number]") by the content of the variable RecipeOptionNumber.
i want to replace in the copied element the last number of the data-limit-target="unique-10-1" and of the span id="unique-10-1" in the last div with the content of the variable RecipeOptionNumber, too.
Is that possible? Or do I have to look for another solution? Can someone help me?
HTML:
<div class="col-md-12" id="recipe-options-div">
<div class="recipe-options-line">
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
<textarea class="hide" name="recipeOptions[0][number]" rows="1"></textarea>
<i class="fa fa-dot-circle-o"><!-- icon --></i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
<textarea class="hide" name="recipeOptions[0][unit]" rows="1"></textarea>
<i class="fa fa-dot-circle-o"><!-- icon --></i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-6">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
<textarea class="hide" name="recipeOptions[0][name]" rows="1"></textarea>
<textarea data-limit-target="unique-10-1" class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
<i class="fa fa-comment"><!-- icon --></i>
<span id="unique-10-1" class="maximum-limit"></span>
</div>
</div>
</div>
</div>
<div class="text-center mb-15">
<a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption"><i class="glyphicon glyphicon-plus"></i>option</a>
</div>
JS:
var RecipeOptionNumber = 2;
$(document).on("click", "#addRecipeOption", function () {
$(".recipe-options-line:last").clone().insertAfter("div.recipe-options-line:last");
RecipeOptionNumber ++;
});

Is that possible? Or do I have to look for another solution? Can someone help me?
Yes, of course it's possible! A good solution here would be to create a blank template for recipe options and a re-usable function to add them programmatically. See example below with comments:
$(function() {
var recipeOptionsDiv = $("#recipe-options-div");
var RecipeOptionNumber = 0;
// Re-usable function to add recipe options
function addRecipeOption() {
// A blank recipe <div>
var newRecipe = $("#recipe-template-wrapper .recipe-options-line").clone();
// Iterate through each [data-recipe] element and set its [name] attribute accordingly
newRecipe.find("[data-recipe]").each(function() {
var recipeOption = $(this).attr("data-recipe");
$(this).attr("name", "recipeOptions[" + RecipeOptionNumber + "][" + recipeOption + "]");
});
// Set [data-limit-target] to RecipeOptionNumber + 1
newRecipe.find("[data-limit-target]").attr("data-limit-target", "unique-10-" + (RecipeOptionNumber + 1));
// Insert the new HTML
recipeOptionsDiv.append(newRecipe);
// Increment recipe counter
RecipeOptionNumber++;
}
// Add click event listener for Add Option button
$("#addRecipeOption").click(addRecipeOption);
// Add the first recipe option on page load
addRecipeOption();
});
#addRecipeOption {
background-color: tomato;
cursor: pointer;
display: table;
margin-bottom: 5px;
margin-top: 10px;
min-width: 100px;
padding: 10px;
text-align: center;
}
#recipe-template-wrapper {
display: none;
}
.recipe-options-line {
border-bottom: 1px solid;
margin-bottom: 15px;
padding-bottom: 10px;
}
<!-- Add option button -->
<div class="text-center mb-15">
<a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption">
<i class="glyphicon glyphicon-plus"></i>option
</a>
</div>
<!-- Recipe option divs will be appended here -->
<div class="col-md-12" id="recipe-options-div"></div>
<!--
Hidden recipe option template HTML
Elements' custom data-* attributes will be used to set their name attributes
-->
<div id="recipe-template-wrapper">
<div class="recipe-options-line">
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
<textarea class="hide" data-recipe="number" rows="1"></textarea>
<i class="fa fa-dot-circle-o">
<!-- icon -->
</i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
<textarea class="hide" data-recipe="unit" rows="1"></textarea>
<i class="fa fa-dot-circle-o">
<!-- icon -->
</i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-6">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
<textarea class="hide" data-recipe="name" rows="1"></textarea>
<textarea data-limit-target class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
<i class="fa fa-comment">
<!-- icon -->
</i>
<span id="unique-10-1" class="maximum-limit"></span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Well your are missunderstanding th concept och memory.
When you clon the items. make change to it before insertit
Example.
$("button").click(function(){
var inputCloned = $("input").last().clone();
// make changes
inputCloned.val("input nr " + $("input").length)
// add the cloned input to the body
$("body").append(inputCloned)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Clone last item</button>
<input type="text" />

colorpicker inside jquery repeater not work when add new row

I'm using a third party plugin for the color picker compatible with bootstrap, this picker field added in a repeater so I can add rows and remove as I can
I initiate the plugin like the following
$('.color-picker').minicolors();
$(".mt-repeater").repeater();
but the color picker field not work for the added rows, it only works for the first row.
check the demo on codepen try to click on add row button then on the color picker https://codepen.io/anon/pen/ZexeYj
how can I deal with this issue? when I try to call the minicolors again after adding new row something went wrong.

but the color picker field not work for the added rows, it only works for the first row.
That happens because the color picker is partially initialized on next rows....
According to jquery.repeater documentation you must handle the show option callback:
$(".mt-repeater").repeater({
show: function () {
$(this).find('.color-picker').minicolors('destroy').minicolors();
$(this).show(); // or $(this).slideDown();
}
});
In this method you can destroy the current minicolors and initialize a new one.
Working snippet:
$('.color-picker').minicolors();
$(".mt-repeater").repeater({
show: function () {
$(this).find('.color-picker').minicolors('destroy').minicolors();
$(this).show();
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div class="form-group mt-repeater">
<div class="col-sm-4">
<div data-repeater-list="group-c">
<div data-repeater-item class="mt-repeater-item">
<div class="row mt-repeater-row">
<div class="col-md-5">
<input type="text" placeholder="" class="form-control"/>
</div>
<div class="col-md-2">
<input type="hidden" class="form-control color-picker" value="#db913d">
</div>
<div class="col-md-3">
<input type="text" class="form-control icons-picker">
</div>
<div class="col-md-2">
<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete">X
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
<a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add">
<i class="fa fa-plus fa-fw fa-lg"></i> Add row</a>
</div>
</div>
Another approach is setting initEmpty option to true:
start with an empty list of repeaters. Set your first (and only)
"data-repeater-item" with style="display:none;" and pass the
following configuration flag
The snippet:
$(".mt-repeater").repeater({
initEmpty: true,
show: function () {
$(this).find('.color-picker').minicolors();
$(this).slideDown();
}
});
// create the first group
$('[data-repeater-create]').trigger('click');
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div class="form-group mt-repeater">
<div class="col-sm-4">
<div data-repeater-list="group-c">
<div data-repeater-item class="mt-repeater-item" style="display:none;">
<div class="row mt-repeater-row">
<div class="col-md-5">
<input type="text" placeholder="" class="form-control"/>
</div>
<div class="col-md-2">
<input type="hidden" class="form-control color-picker" value="#db913d">
</div>
<div class="col-md-3">
<input type="text" class="form-control icons-picker">
</div>
<div class="col-md-2">
<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete">X
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
<a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add">
<i class="fa fa-plus fa-fw fa-lg"></i> Add row</a>
</div>
</div>

HTML - Show/Hide Buttons on Bootstrap Panel collapse/expand

I'm using a Bootstrap collapsible panel.
Here's the Fidle for it
I'm trying to do the following :
I want to move both the buttons on the Panel header(at the extreme
right end) i.e. exactly opposite to the text "Panel"
But I only want the buttons to be visible when the panel is expanded. And
when the panel is hidden the buttons should be hidden too.
How can I achieve this. What would be the JS for it?
I tried to do the following in JS:
$(document).ready(function () {
$("#btnSearch").hide();
$(".panel-title").click(function () {
$("#btnSearch").show();
});
});
But with this the buttons won't hide when the panel is made to hide.

Try this. I moved your buttons to panel-heading itself and positioned them using position:absolute;.
It is very similar to this bootsnipp
$(".panel-success").on('show.bs.collapse', function() {
$('.buttonCon').addClass('vis');
}).on('hide.bs.collapse', function() {
$('.buttonCon').removeClass('vis');
})
.panel{
position:relative;
}
.buttonCon{
position:absolute;
top:5px;
right:10px;
display:none;
}
.buttonCon.vis{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-success">
<div class="buttonCon">
<button type="button" class="btn btn-primary" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
<button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2">
Buttonn2
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
<div class="form-group row" style="margin-left:auto;margin-right:auto;">
<div class="col-md-2 col-md-offset-5">
</div>
</div>
</div>
</div>
</div>

You can use bootstrap collapse events to achieve it.
$('#accordion').on('shown.bs.collapse', function() {
$(".buttons").show();
})
$('#accordion').on('hidden.bs.collapse', function() {
$(".buttons").hide();
})
Check this fiddle.

The following JsFiddle is another option compared to the answers already given.
Mainly, it prevents the use of position: absolute which can result in a mish-mash of bad things happening. The following jQuery (which is readily available since you are using bootstrap) will work:
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
Take note that there are events to track whether a panel is currently opening or closing (plus two others), which can be found here.
I would also suggest that you take the time to read some of the documentation/examples found on the bootstrap webpage, only because a lot of your css/html is pretty rough/unnecessarily complex.

Got it working by combining the answers provided by #kittyCat (the updated solution) and #BuddhistBeast .
Here's the Fiddle.
HTML code :
<div class="container">
<div class="panel panel-success" id="js-panel">
<div class="panelButtons">
<button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;">
Button2
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
</div>
</div>
</div>
JS Code :
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})

Toggle Disabled to Unable Text Fields in Sections

I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!

You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/

Develop Reference

JavaScript is the programming language of the Web.

jQuery check if div is empty after templating - javascript

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

Related

show /hide complete div

Copy div, change and output to the view

colorpicker inside jquery repeater not work when add new row

HTML - Show/Hide Buttons on Bootstrap Panel collapse/expand

Toggle Disabled to Unable Text Fields in Sections

Categories

Resources