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).
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 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>
I am running E2E on my angular application using Protractor. I am running into a very weird problem.
I am using the Bootstrap Dropdown which has some options. I need to click on one of the options.
I referred this answer which tries to do something similar, but doesn't work for me:
Protractor - how to select heavily nested dropdown element?
My structure looks like:
<div id="fc-more-btn" class="btn-group btn-group-sm dropdown" role="group" dropdown="" is-open="ctrl.fcDropdown">
<button type="button" class="btn btn-default dropdown-toggle filetree-btn" tooltip="More Actions" tooltip-trigger="mouseenter" tooltip-placement="bottom" ng-disabled="ctrl.sd.noSelections" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu filetree-dropdown" role="menu">
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewFile()">
New File
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewDir()">
New Folder
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections" ng-click="ctrl.copyFiles()">
Copy
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.clipboardEmpty||ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.pasteFiles()" disabled="disabled">
Paste
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||ctrl.sd.multipleSelections" ng-click="ctrl.renameFile()">
Rename
</a>
</li>
</ul>
</div>
In my test, I am trying to click on the Rename link.
The code I have written is:
element(by.css('.dropdown-toggle')).click().then(function(){
//click on rename
});
On running the test, there is a small flicker over the dropdown toggle button, and it seems that the button is clicked. However, the dropdown that should be shown is not shown.
As a result of this, I am not able to simulate a click to rename. Am I doing something wrong?
Try selecting by cssContainingText, very helpful with dropdowns and nested elements!
element(by.cssContainingText('option', 'Rename')).click();
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 have an Angular JS 1.3 app.
In it I have a table row repeater with an ng-click:
<tr ng-repeat-start="user in users.users" ng-click="showDetails = !showDetails">
<!-- main row, with the menu td shown below -->
<tr class="row-details" ng-show="showDetails" ng-class="{ 'active': showDetails }">
<td>this is the row that hows details</td>
</tr>
<tr ng-repeat-end></tr>
Which toggles opening a detail view. Works fine. But now I need to add another item in each of the tds, a Bootstrap button menu:
<td>
<div class="btn-group">
<div ng-switch on="user.status">
<button class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Inactive">
<li>Delete</li>
</ul>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Invited">
<li>Resend invitation</li>
<li>Delete</li>
</ul>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-default>
<li>Reset password</li>
<li>Delete</li>
</ul>
</div>
</div>
</td>
Problem is, trying to click on this menu button instead triggers the ng-click on the row, toggling the row state but never opening my menu. How can I prevent this?
This is pretty tricky problem. The thing is that when you click menu button two things happens: the first is that it opens Bootstrap dropdown menu, and the second is that event propagates to the parent element and also triggers showDetails = !showDetails.
The obvious solution is to try to stop event propagation with $event.stopPropagation() on the td level, so that event doesn't bubble up the DOM tree and never triggers parent ngClick. Unfortunately, it will not work because Bootstrap sets up click event listener on the document element to benefit from bubbling, so you can't stop propagation.
The simplest solution I came up with in such cases is to set a flag on the original event object whether event occurred on the menu button. If this is the case ngClick on the tr won't do anything.
It will look like this for tr:
<tr ng-repeat-start="user in users.users" ng-click="$event.originalEvent.dropdown || (showDetails = !showDetails)">
ans for button:
<button ng-click="$event.originalEvent.dropdown = true" class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</button>
Demo: http://plnkr.co/edit/eIn6VW3Y2jHn0MtJQVcU?p=preview
With help of dfsq's answer I managed solve same kind of problem in Angular 2. Here is my sample code.
<td class="tablerowdata" (click)="$event.dropdown || onSelect(track)" >
<button (click)="$event.dropdown = true" type="button" class="btn btn-default dropdown-toggle trackbuttons" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">