I have an application which allows user to select 3 values example: Hi, Hello an Hey.
By default the user gets a message saying he "select a value". Problem is i dont understand how to update the value of ng-model when a user selects either of the 3 values. I need the new selected drop down value in ng-model and when i save i have a function that updates the value in my database.
Here's the code
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" ng-model="audit.data">{{audit.data}}
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hi</li>
<li>Hello</li>
<li>Hey</li>
</ul>
</div>
You can add a function that updates the value in the controller, then attach in each element
<ul class="dropdown-menu">
<li data-ng-click="updateValue('Hi')">Hi</li>
<li data-ng-click="updateValue('Hello')">Hello</li>
<li data-ng-click="updateValue('Hey')">Hey</li>
</ul>
Related
I'm using Bootstrap 3 on Rails 3 (Haml == HTML && Coffee == JS), and I'm rather a newbie in JavaScript.
I'm looking for using Bootstrap's dropdown menu, for when I click on a li>a, I would like it to generate a new block, with the amount associated to the currency listed.
The Bootstrap dropdown looks like this:
<div class="dropdown currencies">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a currency
<span class="caret"></span>
</button>
<ul class="dropdown-menu currencies-list" aria-labelledby="dropdownMenu1">
<li class="euro">Price in €</li>
<li class="dollar">Price in $</li>
<li class="pound">Price in £</li>
</ul>
</div>
And here is what could the list of the amounts look like:
<ul class="prices-list">
<li class="euro">6.50€</li>
<li class="dollar">$4.96</li>
<li class="pound">£5.58</li>
</ul>
How should I link these prices for them to appear only when the associated li>a of the Bootstrap dropdown menu is selected?
(I mean, if "Price in €" is selected in the dropdown, display - only - the amount/price in €.)
Also, I'd like the $ amount to be selected and displayed by default.
I think it's trivial, however I've googled my question for an hour without finding anything...
Don't hesitate to answer in Haml*Coffee if you like, thank you very much in advance!
Do some simple hide/show
$('.currencies-list a').click(function(){
var class = $(this).parent().attr('class');//get the class of the currency selected
$('.prices-list').find('li').hide();//hide all prices
$('.prices-list').find('li.'+class).show();//show only the price for the selected currency
})
I am using Angular UI with bootstrap and I'm using the uib-dropdown. I have auto-close set to outside click, but I want to also create a button in the dropdown that will close it. I tried adding uib-dropdown-toggle to one of the elements but that broke the drop down completely (it wouldn't open at all). How do I create an element that closes the drop down menu?
Relevant code:
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
<ul class="list-unstyled">
<!-- This is the button I want to close the dropdown -->
<li><button type="button" class="btn btn-default">X</button></li>
<li>...</li>
<li>...</li>
</ul>
</div>
Just use is-open attribute to control with and angular variable the "openness" of the dropdown. Then you can programmatically set this variable value to false to close the dropdown.
Here is an example from your code:
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body" is-open="dropdownIsOpen">
<ul class="list-unstyled">
<!-- This is the button I want to close the dropdown -->
<li><button type="button" class="btn btn-default" ng-click="dropdownIsOpen = false">X</button></li>
<li>...</li>
<li>...</li>
</ul>
</div>
I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.
To be clearer I have an image at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.
How can I keep the same position on the form once a user selects a value from the drop down?
My drop down is setup as:
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default form-control dropdown-toggle" type="button" id="ddState" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="ulState" aria-labelledby="ddState">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</div>
My javascript is setup as:
$("#ulState li").on("click", function () {
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
$("#ulState").focus();
});
In your page directive <%# Page... add this
MaintainScrollPositionOnPostback="true"
if this doesn't work for you have a look at this article here or here
Hope this will work for you
The solution is is to replace the href attribute with the data-target attribute.
// This will correct the behavior and keep the page focused.
<li><a data-target="#" data-value="something else here">Something else here</a></li>
// This will cause the page to jump
<li>Separated link</li>
I'm trying to stick a dropdown inside a popover (both bootstrap), and it 'sort of' works. The first popover I open works fine, but as soon as I open another one (from a different image) it stops working (take a look at this video to see what I mean).
In my HTML I'm making sure every dropdown has a different IDs (by binding my object ID, which is always different) since apparently that's what Bootstrap uses:
<div class="dropdown collection-selection-view">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-<%- id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-<%- id %>"></ul>
</div>
And they render with unique IDs alright.
Example #1:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-40261" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-40261">
<li>
Happy collection
</li>
<li>
Sad collection
</li>
</ul>
</div>
Example #2:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-39935" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-39935">
<li>
Happy collection
</li>
<li>
Sad collection
</li>
</ul>
</div>
But for some reason it still doesn't work... any ideas of what could be going on?
I'm trying to create dynamic button with selector and what I'll select in the button drop down will be submitted to the next page. However it doesn't work I can't retrieve whatever was selected in the button's. What is the right way to submit such data in a form?
I'm submitting the form to php page while getting it using $_POST["packageType"], found here the following approach:
onclick="myForm.myVariable.value='foo';myForm.submit();"
Is it legit or there is better way to do such dynamic value submission?
<form action="target.php" method="post" id="1111">
<input id="packageType" type="hidden" name="packageType" value="N/A"/>
<div class="btn-group">
<button type="button" class="btn btn-success btn-xs">Add Plan</button>
<button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu package-selector" role="menu">
<li>Type 1</li>
<li>Type 2</li>
</ul>
</div>
As I see it quickly, your solution could work (as long as your bootstrap code is set up correctly). There is just an issue with how you reference your form "1111".
Try rewriting your ul / li tags like that
<ul class="dropdown-menu package-selector" role="menu">
<li>Type 1</li>
<li>Type 2</li>
</ul>
The document.getElementById('1111') search for the form and references it. JavaScript does not understand 1111 directly.
There are some other ways to reference the form. For instance document.forms[0] but, since you have an id attribute in your form, that's the simplest way.
As a side note: I would recommend not using ids starting with numbers (for instance, replace 1111 by myform1111 or similar).