I am building an app with Bootstrap. In this app, I have a control that converts a value between imperial and metric values. To accomplish this, I currently have the following:
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Pounds</li>
<li>Kilograms</li>
</ul>
</div>
<input id="theValue" type="hidden" data-start-type="kg" />
</div>
When the control theValue element is populated from the server, it will either be "lb" or "kg". I want to make it so that the selected menu option is based on the value of theValue when the page initially loads. In other words, I do not want to see the text "Action". Instead, I need to select either Pounds or Kilograms when the view loads.
How do I do this from jQuery?
Using jQuery, you would select the theValue element, access its data-start-type attribute, find the a element with the same data-type attribute, and then use its text value to set the text of the button. You'll want a unique way to identify the button for selection in jQuery, so give it an id; I used "actionButton".
$(document).ready(function(){
var data_start_type = $('#theValue').attr('data-start-type');
var $data_type_elem = $('[data-type='+data_start_type+']');
$('#actionButton').text($data_type_elem.text());
});
Here's a jsFiddle: http://jsfiddle.net/7g9k2dwx/
Related
I'm new to Javascript and AngularJS, and currently trying to implement a dropdown checkbox via a button (For a search filter). I currently am able to have the dropdown appear, but when I check a checkbox, the dropdown immediately closes. The checked item is also not saved as checked when I open the dropdown again. Here's what I have in my tpl.html:
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" bs-dropdown data-template-url="dropdown-template" data-placement="bottom-right">
<span class="fa fa-filter"></span>
</button>
<li class="dropdown-filter">
<script type="text/ng-template" id="dropdown-template">
<ul class="dropdown-menu">
<div>
<input type="checkbox" id="disabledStores">
<label for="disabledStores">Show Disabled Stores</label>
</div>
</ul>
</script>
</li>
</div>
What am I doing wrong?
You need to save the value of the selection within a property and use the ng-model to bind to the html.
In your controller must have :
disabledStored : boolean = false.
And in your templare :
<input type="checkbox" id="disabledStores" ng-model="disabledStored">
When the checkbox is selected the value of the property will be true.
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>electronics</li>
<li>movies</li>
<li class="divider"></li>
<li>All</li>
</ul>
</div>
<form method="POST" name="form" action="#">
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" id="query" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</form>
</div>
</div>
</div>
</div>
ISSUE
Everytime I press Go button; I redirect to same page; which I want however by drop down acts funky; like it doesn't replace the 'filter' button with appropriate choosen filter inside dropdown-menu when after the form gets submitted. Here's the code for that. However before I press go button it works as expected. What could be happening?
<script>
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
</script>
JS FIDDLE: https://jsfiddle.net/0e37tvyx/
There is nothing wrong in this. Your fiddle code works fine for all UI change operations. But because your form supports POST method, all your form parameters are submitted as POST request. You have three possible options (may be more than that too) to preserve the state of last chosen filters:
Use ajax request instead of form submit with entire page refresh. In this way you will have to add content from server response in your page; that is search results.
If your content is generating dynamically. I mean to say you are using PHP / JSP / ASP / Any Other Templating Library, you can use that, to update the HTML code based upon the search request, i.e. search_param request param.
The other way is use cookies. When user changes the option in front end preserve the filter option search_param in cookies. And on ready state of document; read those saved cookies if exists or fallback to default option all if not already stored in cookies.
Check out the fiddle for cookie based implementation. Not that I have added cookies plugin of jQuery.
https://jsfiddle.net/ksbora/3w6k171f/2
Note: Cookies has size limitations too and cross site origination restrictions. So, be careful which option you choose.
This is the code.
<button ngf-select ng-model="b.files" class="btn btn-success btn-sm" ng-click="uploadMode=1">
<span class="glyphicon glyphicon-picture"></span> Pick Image
</button>
<input type="text" ng-model="f.name" value="b.files[0].name"><br><br>
<ul>
<li>{{b.files[0].name}}</li>
</ul>
When user selecting a file to upload, it is displaying in ul - li. But i want same file name to be displayed in text box also. For that i am setting text box value to value="b.files[0].name". But its not working.
Any help on this?
EDIT: Value is always overwritten by ng-model if present, so you should use this:
<input type="text" ng-model="b.files[0].name">
I need to highlight the first value 'fullName' in select box using angularjs.
I am using angularstrap selectbox.
controller,
$scope.accountInfo.owners = [
{
"accounts":null,
"phoneumber":null,
"email":null,
"fullName":"MITA DASGUPTA",
"mobilePhoneNumber":null,
"noteFlag":false,
"number":130000000484
}
]
Template,
<button type="button" class="btn btn-default" placeholder="Pleasae select"
data-ng-model="owner.fullName"
data-html="1"
bs-options="owner as owner.fullName for owner in accountInfo.owners"
bs-select>
Action <span class="caret"></span>
</button>
I tried that way, but the value not selecting by default.
You should have some different ng-model name you already used owner in ng-options like selectedOwner
<button type="button" class="btn btn-default" placeholder="Pleasae select"
data-ng-model="selectedOwner"
data-html="1"
bs-options="owner as owner.fullName for owner in accountInfo.owners"
bs-select>
Action <span class="caret"></span>
</button>
Then you need to set value of ng-model from controller.
$scope.selectedOwner = $scope.accountInfo.owners[0];
You forgot to initialize the model which is capturing the selected values. You usually achieve this with an ng-init but it is also possible to intialize your model in your controller with the first element of your array. (And the appropriate field).
im using twitter bootstrap.I need a
1.select-box + input field with autocomplete.
2.Add row button which adds an input field
3.remove row button
4.save button which submits all the values selected.
<div class="well-large">
<div class="row">
<button type="button" class="btn btn-default">Save</button></br>
<div class="input-append btn-group">
<input class="span2" id="appendedInputButton" size="16" type="text">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<?php foreach($cars as $ar){?>
<li><i class="icon-pencil"></i><?php echo $ar;?></li>
<?php }?>
</ul>
</div>
</div>
</div>
var cars = <?php echo json_encode($cars) ?>;
$("#appendedInputButton").autocomplete({
source: cars,
fillin:true
});
I had tried many ways but either one of these is not working.Can someone suggest me a way to solve this .Mainly on add row .
For One >> Does the autocomplete need to pull data dynamically, like typing into google URI bar auto searches google, or just isolate fields based on typed criteria. i.e. you type "a" and it displays only annie, annabelle, amy, then you type "n" making your field "an" and no longer displaying amy
For Two >> check these jquery methods [http://api.jquery.com/category/manipulation/dom-insertion-inside/] and pick the one that best suits you. The bind it to a button and have the jqueryStuff() function add the DOM stuff you want
<button onClick="jqueryStuff()">Add Row</button>
For Three >> Use the same thing as 2 but from [http://api.jquery.com/category/manipulation/dom-removal/]. Do you want to have check boxes then remove, or the easier way and just remove the last on the list.
<button onClick="jqueryStuff()">Remove Row</button>