Problem
I've created a click function to show and hide advanced search options.
When I click the Click to show advanced options button the select fields are visible when the div slides up, but the outer container has already been set to a fixed height and as a result this transition looks feels very abrupt.
Looking for a better way to set the two heights so I don't need have
to rely on a fixed number, height: 100% didn't seem to work
JSFiddle: https://jsfiddle.net/69jg5a4d/
scripts.js
$(".feature__text--search").on("click", function(){
$(".advanced__wrapper").toggleClass("is-open");
if ($(".advanced__wrapper").hasClass("is-open")) {
$(".header__search.search--home").css({"height": "384px", "max-height": "none"});
$(".advanced__wrapper").slideToggle();
} else {
$(".advanced__wrapper").slideToggle();
$(".header__search.search--home").css({"height": "110px", "max-height": "110px"});
}
index.html
<div class="header__search search--home">
<div class="header__search--simple">
<i class="fa fa-search fa-search-home" aria-hidden="true"></i>
<input type="text" name="" placeholder="Enter a school name" class="input--address">
<button class="btn btn--submit">Submit</button>
</div>
<div class="feature__teaser--search">
<p class="feature__text--search">Click to <span>show</span> advanced options</p>
<div class="advanced__wrapper advanced__wrapper--home">
<!-- <p class="advanced__text">Advanced options</p> -->
<div class="advanced advanced--home">
<div class="advanced__third">
<select class="select--type type--results">
<option>All schools types</option>
<option>Elementary School</option>
<option>Middle School</option>
<option>High School</option>
<option>Technical School</option>
<option>Alternative School</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
</div>
<div class="advanced__third">
<select class="select--counties counties--results">
<option>All counties</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
</div>
<div class="advanced__third">
<select class="select--distance distance--results">
<option>Short drive ( < 5 miles)</option>
<option>Walking distance ( < 1 mile )</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
</div>
<div class="advanced__address">
<input type="text" name="" placeholder="Enter an address or ZIP code" class="input--address--extra">
</div>
<div class="checkbox__group">
<div class="checkbox__inner">
<input type="checkbox" name="">
<label class="label--checkbox">Show schools in the St. Louis metro area</label>
</div>
</div>
</div> <!-- .advanced -->
</div> <!-- .advanced__wrapper -->
</div>
<div class="header__search--advanced">
<input type="text" name="" placeholder="Enter your address" class="input--address">
<div class="checkbox__group">
<i class="fa fa-times" aria-hidden="true"></i>
<input type="checkbox" name="">
<label class="label--checkbox">Show schools in the St. Louis metro area</label>
</div>
<select class="select--type type--home">
<option>All school types</option>
<option>Elementary School</option>
<option>Middle School</option>
<option>High School</option>
<option>Technical School</option>
<option>Alternative School</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
<select class="select--counties">
<option>All counties</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
<select class="select--distance">
<option>Short drive ( < 5 miles)</option>
<option>Walking distance ( < 1 mile )</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
</div>
</div>
I've modified your fiddle, please let me know if this is what you are looking for: https://jsfiddle.net/69jg5a4d/4/
Changes to CSS
.search--home {
overflow: auto;
max-height: 100vh;
}
/* modified .feature__teaser--search */
.feature__teaser--search {
/* removed height */
}
/* modified the height of .header__search */
.header__search {
/* removed max-height */
height: auto;
}
Change to JS
// commented these 2 lines
// $(".header__search.search--home").css({"height": "40vh", "max-height": "100vh"});
// $(".header__search.search--home").css({"height": "12vh", "max-height": "100vh"});
Why don't you set the height before calling slideToggle()?
Related
I have a semantic ui dropdown when I select 'select categories' option it should load another dropdown(select category). If I do not select anything then it should not load this other dropdown. I tried using hide and show but I am not getting correct output. Please suggest how this can be done.
HTML code:-
<div class="ui icon top left pointing dropdown button blue" id="dropdown1">
<i class="sort content descending icon"></i>
<span class="text">Advance Filter</span>
<div class="menu">
<div class="header">All Categories</div>
<div class="item">Select Categories</div>
</div>
</div>
<select id="category" name="activity-filter" multiple="" class="ui dropdown" style="display:none;">
<i class="filter icon"></i>
<option value="">Select Category</option>
<option class="header">--All--</option>
<option value="0">rst</option>
<option value="1">lmn</option>
<option value="2">abc</option>
<option value="3">pqr</option>
<option value="12">Other</option>
</select>
<button class="ui primary button">
Submit
</button>
<button class="ui button show-all">
Clear
</button>
<br>
<br>
jquery:-
<script>
$('#dropdown1').dropdown(
{
onChange: function(val) {
if(val=='select categories')
{
$('#category').show();
}
else
{
$('#category').hide();
}
}
}
);
</script>
I pasted your code in as you provided above - it seems to function correctly?
$('#dropdown1').dropdown(
{
onChange: function(val) {
if(val=='select categories')
{
$('#category').show();
}
else
{
$('#category').hide();
}
}
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<div class="ui icon top left pointing dropdown button blue" id="dropdown1">
<i class="sort content descending icon"></i>
<span class="text">Advance Filter</span>
<div class="menu">
<div class="header">All Categories</div>
<div class="item">Select Categories</div>
</div>
</div>
<select id="category" name="activity-filter" multiple="" class="ui dropdown" style="display:none;">
<i class="filter icon"></i>
<option value="">Select Category</option>
<option class="header">--All--</option>
<option value="0">rst</option>
<option value="1">lmn</option>
<option value="2">abc</option>
<option value="3">pqr</option>
<option value="12">Other</option>
</select>
<button class="ui primary button">
Submit
</button>
<button class="ui button show-all">
Clear
</button>
<br>
<br>
I created a grid using AngularJS Datatables and added two more buttons "edit" and "delete" in the last column.
How does the grid/table is rendered?
HTML
<!-- Required CSS and JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/plugins/bootstrap/datatables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<!-- AnglarJS, AngularJS Datatables and related plugins -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/angular-datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/plugins/bootstrap/angular-datatables.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/plugins/buttons/angular-datatables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/plugins/columnfilter/angular-datatables.columnfilter.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<!-- Table/grid -->
<table datatable dt-options="concessoes.standardOptions" dt-columns="concessoes.standardColumns" dt-instance="concessoes.dtInstance" class="table table-condensed table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">ID</th>
<th data-class="expand"> Processo</th>
<th data-class="expand"> Objeto</th>
<th data-hide="phone"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> UF</th>
<th>Região</th>
<th data-hide="phone,tablet"> Macrossegmento</th>
<th data-hide="expand"> </th>
</tr>
</thead>
</table>
JavaScript/ "ConcessoesCtrl"
var vm = this;
vm.dtInstance = {};
vm.standardOptions = DTOptionsBuilder
// This is from where the data is coming
.fromSource('/api/BasesDados/Concessoes/concessoes.php')
.withOption('scrollX', '100%')
.withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
.withBootstrap()
.withButtons([
{extend: 'colvis', text: 'Vizualização'},
{extend: 'copy', text: 'Copiar'},
{extend: 'print', text: 'Imprimir'},
{extend: 'excel', text: 'MS Excel'},
{
text: 'Incluir projeto',
key: '1',
action: function (e, dt, node, config) {
// This is the function to add a project
$scope.adicionarProjeto();
}
}
]);
// Conlunas que serão mostradas
vm.standardColumns = [
DTColumnBuilder.newColumn('id').notVisible(),
DTColumnBuilder.newColumn('processo'),
DTColumnBuilder.newColumn('objeto'),
DTColumnBuilder.newColumn('uf'),
DTColumnBuilder.newColumn('regiao'),
DTColumnBuilder.newColumn('macro'),
DTColumnBuilder.newColumn(null).withTitle('Ações').notSortable().renderWith(botoesDeAcao)
];
// Action buttons: edit and delete buttons
function botoesDeAcao(data, type, full, meta) {
vm.projeto[data.id] = data;
return '<button class="btn btn-info btn-xs" ng-click="editarProjeto(' + data.id + ')">' +
' <i class="fa fa-edit"></i>' +
'</button> ' +
'<button class="btn btn-danger btn-xs" ng-click="excluirProjeto(' + data.id + ')">' +
' <i class="fa fa-trash-o"></i>' +
'</button>';
}
// This is the function to edit the data
$scope.editarProjeto = function (projetoId) {
// It calls a directive which renders the edititng form
var formularioDeEdicao = $compile("<div formulario-do-projeto></div>")($scope);
$("article#render-form").html(formularioDeEdicao);
// TODO: Editar os dados, chamar o servidor para fazer as alterações, então, dar um refresh na tabela
vm.dtInstance.reloadData();
};
How does the grid look like?
When I click the edit button (in blue) a directive is called and then a form for editing the data is opened.
HTML Template
<form id="order-form" class="smart-form" novalidate="novalidate" enctype="multipart/form-data">
<header>
<button type="submit" class="btn btn-default btn-lg">
<i class='fa fa-arrow-circle-left'></i>
</button>
<b class="text-warning">Concessão & PPPs</b>
</header>
<fieldset>
<legend><strong>Projeto</strong></legend>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-circle"></i>
<input type="text" name="NomeDoPrograma" placeholder="Nome do programa" ng-model="NomeDoPrograma">
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-bars"></i>
<input type="text" name="NomeDoProcesso" placeholder="Nome do processo" ng-model="NomeDoProcesso">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-bullseye"></i>
<input type="text" name="Objeto" placeholder="Objeto" ng-model="Objeto">
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-usd"></i>
<input type="text" name="InvestimentoEstimado" placeholder="Investimento estimado" ng-model="InvestimentoEstimado">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-tree"></i>
<select type="text" name="Natureza" placeholder="Natureza" ng-model="Natureza">
<option value="">Natureza</option>
<option value="Concessão">Concessão</option>
<option value="PMI">PMI</option>
<option value="PPP">PPP</option>
</select>
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-circle-o"></i>
<select type="text" name="Esfera" placeholder="Esfera" ng-model="Esfera">
<option value="">Esfera</option>
<option valur="Estadual">Estadual</option>
<option value="Federal">Federal</option>
<option value="Municipal">Municipal</option>
</select>
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-map-marker"></i>
<select name="Uf" ng-model="Uf">
<option value="">Estado</option>
<option ng-repeat="estado in estados" value="{{estado}}">{{estado}}<option>
</select>
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-map-o"></i>
<select name="Regiao" placeholder="Região" ng-model="Regiao">
<option value="">Região</option>
<option value="Centro-oeste">Centro-oeste</option>
<option value="Nordeste">Nordeste</option>
<option value="Norte">Norte</option>
<option value="Sudeste">Sudeste</option>
<option value="Sul">Sul</option>
</select>
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-industry"></i>
<select name="Macrossegmento" placeholder="Macrossegmento" ng-model="Macrossegmento">
<option value="">Macrossegmento</option>
<option value="Saneamento básico">Saneamento básico</option>
<option value="Infraestrutura urbana">Infraestrutura urbana</option>
<option value="Energia">Energia</option>
<option value="Multissetorial">Multissetorial</option>
<option value="Mobilidade urbana">Mobilidade urbana</option>
<option value="Logística">Logística</option>
<option value="Construção naval">Construção naval</option>
</select>
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-life-ring"></i>
<input type="text" name="Modalidade" placeholder="Modalidade" ng-model="Modalidade">
</label>
</section>
</div>
</fieldset>
<fieldset>
<legend><strong>Edital & licitação</strong></legend>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-trophy"></i>
<input type="text" name="VencedorDaLicitacao" placeholder="Vencedor da licitação" ng-model="VencedorDaLicitacao">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-calendar"></i>
<input type="text" name="PrevisaoDoEdital" placeholder="Previsão do edital" ng-model="PrevisaoDoEdital">
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-calendar-minus-o"></i>
<input type="text" name="PublicacaoDoEdital" placeholder="Publicação do edital" ng-model="PublicacaoDoEdital">
</label>
</section>
</div>
</fieldset>
<fieldset>
<legend><strong>Controle</strong></legend>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-link"></i>
<input type="text" name="LinkDoProcesso" placeholder="Link do processo" ng-model="LinkDoProcesso">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-compass"></i>
<input type="text" name="FonteDaConsulta" placeholder="Fonte da consulta" ng-model="FonteDaConsulta">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-user-circle"></i>
<input type="text" name="Validador" placeholder="Validador" ng-model="Validador">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-list-ul"></i>
<input type="text" name="SituacaoDoProcesso" placeholder="Situação do processo" ng-model="SituacaoDoProcesso">
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-certificate"></i>
<input type="text" name="StatusDaOperacao" placeholder="Status da operação" ng-model="StatusDaOperacao">
</label>
</section>
</div>
<section>
<label class="checkbox">
<input type="checkbox" name="Validacao" ng-model="Validacao">
<i></i>Validar as informações acima</label>
</section>
</fieldset>
<fieldset>
<legend><strong>Anexos</strong></legend>
<section>
<div class="input input-file">
<span class="button">
<input type="file" name="Arquivo" onchange="this.parentNode.nextSibling.value = this.value" ng-model="Arquivo">Procurar arquivos
</span>
<input type="text" placeholder="Incluir arquivos" readonly="">
</div>
</section>
</fieldset>
<fieldset>
<legend>
<strong>Histórico</strong>
</legend>
<section>
<label class="textarea"> <i class="icon-append fa fa-history"></i>
<textarea rows="5" name="Observacoes" placeholder="Observações sobre o projeto e outras informaçoes importantes" ng-model="Observacoes"></textarea>
</label>
</section>
</fieldset>
<footer>
<button type="submit" class="btn btn-danger">
Excluir projeto <i class='fa fa-trash'></i>
</button>
<button type="submit" class="btn btn-default">
Cancelar <i class='fa fa-times'></i>
</button>
<button type="submit" class="btn btn-default">
Salvar & Voltar <i class='fa fa-save'></i>
</button>
<button type="submit" class="btn btn-primary" ng-click="salvarProjeto()">
Salvar <i class="fa fa-send-o"></i>
</button>
</footer>
</form>
JavaScript/ "formularioDoProjeto"
.directive('formularioDoProjeto', ['FormData', function (FormData) {
return {
restrict: "AE",
templateUrl: "app/database/concessoes/formulario-do-projeto.html"
};
}])
My doubt is how do I create a button to go back to the grid after aditing tha data from a directive that is rendered in the same page as the grid?
How does the form directive looks like?
When I click the edit button the function editarProjeto() is called and it renders the directive to the DOM using the .html() method:
$scope.editarProjeto = function (projetoId) {
var formularioDeInclusao = $compile("<div formulario-do-projeto></div>")($scope);
$("article#render-form").html(formularioDeInclusao);
//vm.dtInstance.reloadData();
};
Now, what is the approach to add a "back to the grid" button in the form such that the grid keeps its latest state (when the user uses a filter and calls the edit form, she/he will find the form the same way it was left before calling the edit form when she/he presses the "back" button**?**
Sorry for any mistake when asking the question. If you downvote this question, please, let me know why, so I can correct the issues.
Found a solution:
HTML
<table ng-show="!editing">...</table>
<project-form ng-hide="!editing"></project-form>
JavaScript
.controller('ProjectCtrl', function($scope){
// It starts as false so the grid/table is shown first
$scope.editing = false;
$scope.backToGrid = function(){
$scope.editing = false;
};
// When I want to edit the project I set the $scope.editing to true, so the form is shown
$scope.editProject = function(projectId){
$scope.editing = true;
// The rest of the steps goes here
};
});
Struggling with bootstrap / styling. I have created a navbar with a searchbox and some buttons.
I cannot for the life of me figure out how to customize the width of the searchbar itself. I could set a fixed width, but I would like to make use of the grid system if possible so that it is responsive.
id like the search bar to be a bit longer than whatever it is defaulting to.
Perhaps the width being auto screws things up? im not sure.
*I also have a Bootstrap-Select in this fiddle, but for some reason it wont show up (I did add a cdn reference for it.. oh well)
Fiddle: https://jsfiddle.net/uaLj1n07/2/
<nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="275" style="margin-bottom:5px">
<div class="row">
<div class="col-sm-12">
<form action="#" class="navbar-form navbar-left" role="search" id="searchForm">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="Search..." name="searchTerms" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default-grey btn-sm"><i class="glyphicon glyphicon-search"></i></button>
<select class="selectpicker show-tick " id="searchDate" name="searchDate" data-style="btn btn-default-grey btn-sm" data-width="fit">
<option id="anytime" value="anytime">Any Time</option>
<option data-divider="true"></option>
<option id="30days" value="30days">Last 30 Days</option>
<option id="60days" value="60days">Last 60 Days</option>
<option id="90days" value="30days">Last 90 Days</option>
</select>
<button type="button" class="btn btn-sm btn-link">Advanced</button>
</span>
</div>
</form>
<form class="navbar-form navbar-right">
<div class="form-group">
<a href="#" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-pencil adjust-left" aria-hidden="true"></i> Some Button
</a>
</div>
</form>
</div>
</div>
</nav>
You can set the min-width of the search box like this:
.form-control.input-sm {
min-width: 300px;
}
I forked your code and created a fiddle here: https://jsfiddle.net/bxqj3q8g/
$(".incrementer").click(function(){
var values = $("#layernumber").val();
var item = $("input[type=file]:last").clone(true);
var txt = $(".layer_selector:last").after('<br>').clone(true);
if($("#layernumber").val() < 4){
$("#attach").append(item);
$("#attach").append(txt);
}
if($("#layernumber").val() > 2){
$(".incrementer").hide();
}
});
The above code increments the value of layers
as the layers increments the file upload option will also.
But this works only in Chrome. Not in FireFox or Internet Explorer.
HTML code is:
<div class="tab-pane active" id="tab2">
<h3 class="block">Provide your layer details</h3>
<div class="form-group">
<label class="control-label col-md-3">Number of layer
<span class="required" aria-required="true"> * </span>
</label>
<div class="col-md-4">
<div class="input-group bootstrap-touchspin">
<span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
<input id="layernumber" type="text" class="form-control" name="layernumber" style="display: block;">
<span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
<span class="input-group-btn-vertical">
<button class="btn btn-default bootstrap-touchspin-up" type="button">
<i class="glyphicon glyphicon-plus incrementer"></i>
</button>
<button class="btn btn-default bootstrap-touchspin-down" type="button">
<i class="glyphicon glyphicon-minus decrementer"></i>
</button>
</span>
</div>
<span class="help-block"> Provide your number of layers </span>
</div>
</div>
<!-- fileupload starts-->
<!-- -->
<div class="form-group">
<label class="control-label col-md-3">Choose Layer
<span class="required" aria-required="true"> * </span>
</label>
<div class="col-md-9">
<div id="attach">
<div id="previewImg"></div>
<div class="col-md-9">
<input type="file" name="layerimages[]" onchange="preview(this);" class="myfile" id="fileid" multiple="">
<select id="layerid" class="layer_selector" name="layer_selector">
<option value="">Please Select</option>
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Intermediate</option>
<option value="3">Final</option>
</select>
</div>
</div>
<br>
</div>
</div>
<!-- fileupload ends-->
</div>
I have made a fiddle for this.
https://jsfiddle.net/w1gy8ruj/1/
The changes i did to your code is basically initialise the value of the layernumber input to 0 and increment it on every click.
$(document).ready(function() {
$(".incrementer").click(function() {
var values = $("#layernumber").val();
var item = $("input[type=file]:last").clone(true);
var txt = $(".layer_selector:last").after('<br>').clone(true);
if ($("#layernumber").val() < 4) {
$("#attach").append(item);
$("#attach").append(txt);
}
if ($("#layernumber").val() > 2) {
$(".incrementer-button").hide();
}
values++;
$("#layernumber").val(values);
});
});
You do not use
var values = $("#layernumber").val();
anywhere in this scope, so this is unneeded unless you don't want to use it in the if statement below and for incrementing.
And you do not increment the layernumber, so
if($("#layernumber").val() > 2) {
will never execute. You should increment it and set it like
$("#layernumber").val(values)
I have the following problem I have a dropdown on my website. But because I wanted to add style to it, I hid it and have a bootsrap dropdown showing over it.
This is my html structure:
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
I'm trying to change the text Maat_dames to simply just Maat, I've tried the following jQuery code:
if(jQuery('span .filter-option').length == 0){console.log("fail")}
if(jQuery('span .filter-option.pull-left').length == 0){console.log("fail")}
if(jQuery('span .filter-option .pull-left').length == 0){console.log("fail")}
When I check the console log, it returns fail in all three cases, so the element isn't found. Why is that the case?
EDIT
All the answers suggest removing the space between span and .filter-option and while it doesn't work on my site, it does work when I try to run the code snippets in the comments en when I try to recreate it in a JSFiddle.
Could it be the case that jQuery can't find the element since it is dynamically created by a plugin?
You are using a descendant combinator (a space).
span .filter-option means any element that is a member of the class filter-option and has an ancestor that is a span.
The only elements which are members of that class in your document are spans themselves and do not have ancestors that are also spans.
Remove the spaces from the selectors.
if(jQuery('span.filter-option').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
Replace jQuery('span .filter-option') with jQuery('span.filter-option').
Currently jQuery('span .filter-option') is finding element with class filter-oprion inside span tags in DOM.
When you write jQuery('span.filter-option') it will find span elements with class filter-option in DOM.
('span.filter-option').length maybe?