apologize before if my English is not good, i have a problem when using bootstrap-select in vue. https://github.com/snapappointments/bootstrap-select
<select class="selectpicker" v-bind:class="{'is-invalid': error}"></select>
<span class="invalid-feedback"> error </ span>
the code above will be displayed as below (inspect element):
<div class="dropdown">
<select></select>
</div>
<span class="invalid-feedback"> error </ span>
it doesn't work when using vue, because the is-invalid appears in <select> and the <select> is inside the div element <div class = "dropdown">
"invalid-feedback" will appear under "is-invalid".
anyone have a solution?
You have to provide what are you binding .In your case you are binding a class.So make sure to use v-bind:class="{'is-invalid': error}"
This should work. span with invalid-feedback class should be below the select tags.
<div class="dropdown">
<select></select>
<span class="invalid-feedback"> error </ span>
</div>
Related
I'm working with the latest version of Bootstrap v5.2 and Vue 3 (just for understanding).
I've found a similar question on Stackoverflow but this was with an older version of Bootstrap.
I have a select and I want to add my id of my element from my v-for as a badge (Documentation: https://getbootstrap.com/docs/5.2/components/badge/#pill-badges) in front of the upcoming text of my element.
My code:
<div class="row mt-3">
<div class="col-12">
<span>Select with Badge</span>
<select class="form-select" v-model="test_select_badge">
<option v-for="element in select_array" :key="element.id" :value="element.id">
<span class="badge text-bg-primary me-2">{{element.id}}</span>{{element.text}}
</option>
</select>
</div>
</div>
But this is not working out. How can I achieve my goal? Thank You.
I've used an dropdown and desigend it like a select. Than it worked out for me.
I am trying to load a dropdown with angularjs and semantic UI with the following code
<div id="state" class="ui search selection dropdown">
<label for="state">Estado</label>
<input type="hidden" name="state">
<i class="dropdown icon"></i>
<div class="default text">Selecione o Estado</div>
<div class="menu" ng-model="state" ng-change="loadCity()">
<div ng-repeat="state in states" class="item" data-value="{{state.ID}}">{{state.NAME}}</div>
</div>
</div>
<div>
But the event is not called.
When I use the code below it works:
<select id="state" class="ui search selection dropdown" ng-model="state" ng-init="loadState()" ng-change="loadCity(state.ID)">
<option ng-repeat="state in states" value="{{state.ID}}">{{state.NAME}}</option>
</select>
What am I doing wrong?
Looks like this is an issue other people have encountered. Take a look at this issue: https://github.com/Semantic-Org/Semantic-UI/issues/1913
I found a way to solve this issue on angular side using some 1.3 magic. It's not the best way of doing this but it works.
It can simply be solved by using the formController and a watch.
I updated the plnkr. Note that i use underscore.js to find the array index of the control inside the form.
The rest is pure angular and some jquery.
http://plnkr.co/edit/eDOej3zJ0bwQ1xyX1LDI?p=preview
Look at the section starting with:
app.directive('select'
I'm using country picker from Bootstrap form helper:
Country Picker
Problem is that i need to initialize it dynamically with a country. I'm using data-country="US" as default, anyways i need to change it on document ready function.
<div id="country-select" class="bfh-selectbox bfh-countries" data-flags="true" data-value="US">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<input type="text" class="bfh-selectbox-filter">
<div role="listbox">
<ul role="option">
</ul>
</div>
</div>
</div>
From the Example 3, you can use
$(document).ready(function(){
$('#country-select').bfhcountries({country: 'TN'});
});
$('#LoadCountry').click(function(){
$('#countries1').bfhcountries({country: 'TN'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.css" rel="stylesheet"/>
<button id='LoadCountry' class="btn">Load Countries</button>
<br><br>
<select id="countries1" class="form-control"></select>
use the html below to select a default country on initialize. Also add bootstrap-formhelpers.js and bootstrap-formhelpers.css to your html or your select will not be populated with data.
<form><select id="country-select" name="country-select" class="form-control bfh-countries" data-country="US" data-flags="true"></select></form>
and to select a country after initialization,
$('#country-select').val('TN');
see the document for more options on initilization.
Here's a working fiddle.
Per OP's comment The OP is using a theme using select2, quoting from there
Select2 will listen for the change event on the element that it is attached to. When you make any external changes that need to be reflected in Select2 (such as changing the value), you should trigger this event.
and therefore to reflect changes;
$('#country-select').val('TN').trigger('change');
I have a selected option in my select tag. The purpose of the selected tag is to display all the stores in the div tag underneath. I've been searching around and some suggest ng-selected, ng-init and ng-options, but I have no idea which one or how I should do it.
I've managed to sort the stores based on their category which you can find in the select tag, but I can't display all of them :/
Here's my code:
<select style="width:100px;" ng-model="selectedCategory.category" ng-options="category.id as category.name for category in categories">
<option ng-selected="{{}}" selected value="">Visa Alla</option>
<!-- {{ selectedCategory.category }} -->
</select>
<div class="row row-white" style="margin-bottom:10px" ng-click="browseShop(shop)" ng-repeat="shop in shops | filter:selectedCategory" ng-show="isAvailable(shop)">
<div class="col"></div>
<div class="col">
<img ng-src="{{shop.img}}" />
<br/>
<span style="color:black">{{getCategory(shop)}}</span>
</div>
<div class="col"></div>
</div>
Really thankful for all the help I can get!
So I am building a comment system and have loaded a bunch of comments to a page, then have generated a reply box for each. Below is what my reply box looks like, but there are many identical ones on each page. As you can see, the first portion is a div that contains a toggle (show/hide) for the reply box.
I am posting because I cannot get the reply toggle to fire.
Here is my html:
<div class="col-sm-offset-1 col-sm-11">
<a href="#" id="reply-toggle">
<span class="text">Reply</span>
<i class="toggle-icon fa fa-angle-down"></i>
</a>
</div>
<div id="reply-div" class="col-sm-12">
<form class="form-horizontal" role="form" accept-charset='UTF-8' data-parsley-validate novalidate>
<fieldset>
<div class="form-group">
<label for="ticket-message" class="col-sm-1 control-label"></label>
<div class="col-sm-11">
<textarea class="form-control" name="post-body" id="new_post_textarea" rows="5" cols="30" placeholder="Try to be as specific as possible when posting!"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button id="submit_reply_button" type="submit" class="btn btn-primary btn-block">Submit Reply</span></button>
</div>
</div>
</fieldset>
</form>
</div>
Here is my jquery:
$("#reply-toggle a").click(function() {
alert("running");
$('#reply-div').slideToggle("slow");
)};
I recognize I am not very good in jquery, so I am sure it's something simple, however, I also recognize that I will have to use jquery(closest) to only toggle the reply box associated with the proper comment thread. I have not gotten to this step yet, but it would be greatly appreciated If I could receive some guidance in regards to that as well.
Sincere thanks for any help!
$(document).on('click', '#reply-toggle', function() {
$(this).closest('.col-sm-offset-1').next('#reply-div').slideToggle('slow');
});
edit:added a period to the col-sm-offset-1 class
Your link selector does not match anything. $("#reply-toggle a") will return all <a> tags that have a parent with ID reply-toggle.
You should change this to simply $("#reply-toggle").
Edit: As an aside, you say you have multiple of these Reply buttons - I would strongly recommend you change the ID selector to a class selector as browsers expect only one element with a specific ID per page.
"#reply-toggle a" looks for <a> elements within an element that has id "reply-toggle". Maybe $("a#reply-toggle") would fix your firing issue?
You might want to generate a specific id for each reply toggle and div, say reply-toggle-1and reply-div-1. However, this approach needs a click()defined for each toggle. Use class declarations instead (i.e. not id="reply-toggle", but class="reply-toggle").