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>
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.
I'm using 'select' widget from angularstrap.
I'm wondering how to prevent the dropdown menu for the select only having one item. The only one item has been selected by default, how to prevent the click event on select to show the dropdown menu?
Is it a missing feature of angularstrap?
Check the Single select in example
It's not angularstrap feature, but you can use attributes like ng-hide, ng-show or ng-if to hide specific <div> element when your select has only one item.
UPDATE:
According to your example, change your Single select section:
<label>Single select: </label>
<button ng-if="icons.length > 1" type="button" class="btn btn-default" ng-model="selectedIcon" data-html="1" bs-options="icon.value as icon.label for icon in icons" bs-select>
Action <span class="caret"></span>
</button>
<button ng-if="icons.length === 1" type="button" class="btn btn-default" ng-model="selectedIcon" data-html="1">
{{icons[0].value}}
</button>
I can't add gear icon, but I hope it's easy fix ;)
I'd do the same as #Egan Wolf mentioned, but the problem with that is the UX. It's not so nice to show the user something different just because the data has changed or not enough for a select box. I'd make it disabled, so that the user will get a clear visual feedback that he/she can't select more.
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 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/