We Keep Coding

Passing link-value from dropdown to another button

I'm currently working on an ordering system that allows the user to choose a specified vendor from a dropdown-menu and comfirm their selection by clicking a seperate button.
A perfect example would be the Fallout 4 store page, where the "Order"-button is disabled until an item has actually been selected from the dropdown menu. (In my case there is only one dropdown menu).
I've got the following HTML:
<div class="col-md-12">
<div class="productRow">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="dropdownPositionLeft">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose your platform!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- List of vendors -->
<li><a tabindex="-1">Item I</a></li>
<li><a tabindex="-1">Item II</a></li>
<li><a tabindex="-1">Item III</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="dropdownPositionRight">
<!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu -->
Order now!
</div>
</div>
</div>
</div>
And the following javascript that replaces the label of the dropdown-button:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));}
I want the "Ordner now"-button to be able to receive an external link to a vendor based on the dropdown menu. Meaning I would need to pass a variable to the button from the dropdown menu - So far I haven't managed to succeed in this.
I'm very new to both bootstrap and javascript and was hoping someone here might point me in the right direction as to how I should handle this.
I'm assuming I should be able to store an href-value with the items in the dropdown-menu and pass them on to the order-button when selected, but I've had no luck in trying to figure this out while at the same time not pointing the player directly to the vendor through the dropwdown-menu.
I've also experimented with forms without the desired effect. Obviously I'm doing something wrong, but not sure as to what it is.

Check out the information for using bootstrap buttons here: http://v4-alpha.getbootstrap.com/components/buttons/
I usually take the button and then wrap it in the tag like this:
<button type="button" class="btn btn-primary" disabled>Primary</button>
Notice how I made the button disabled by default, then you can use javascript/jquery to remove the disabled attribute when a certain action is performed on the page.
As far as setting it based on a different box being selected, you can also set the href="" attribute using jquery if you want it to live update without reloading the page, or if you're not worried about the page needing to be reloaded, you could use inside the href quotes.

Keep Zurb Foundation dropdown open when clicking

I am using a Foundation dropdown, and inside it I have multiple things I need to interact with, including colpick, adding and removing components, etc. Anytime I do any of these actions, the dropdown closes, as it should since it is a dropdown. Is there a good way to have the dropdown ignore my clicks and only close if I click the close button instead?

Juts use aria-autoclose="false" in the <ul> tag (see section Autoclose in documentation.
<a class="button" data-dropdown="autoCloseExample" aria-controls="autoCloseExample" aria-expanded="false">Link Dropdown »</a>
<ul id="autoCloseExample" class="f-dropdown" data-dropdown-content tabindex="-1" aria-hidden="true" aria-autoclose="false" tabindex="-1">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>

This foundation forum issue may help you

Twitter Dropdown Doesnt Show

I have two dropdowns:
First Dropdown:
First Dropdown Code:
<select name="idx" id="masthead_search">
<option value="">Library catalog</option>
<option value="ti">Title</option>
<option value="au">Author</option>
<option value="su">Subject</option>
<option value="nb">ISBN</option>
<option value="se">Series</option>
<option value="callnum">Call number</option>
</select>
Second Dropdown:
Second Dropdown Code:
<select name="branch_group_limit" id="select_library">
<option value="">All libraries</option>
<option value="branch:01">Main Library</option>
</select>
In order to change the highlight background of the option tag when hovered, I converted select and option tag to ul li tag using this jquery code.
/** Convert a select-option tag to ul-li tag to change its dropdown highlight color from blue to green **/
$(document).ready(function(){
/**masthead_search **/
$('#masthead_search').parent().prepend('<div class="btn-group btn-input clearfix"> <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">Library catalog</span> <span class="caret"></span></button><ul id="newmasthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">');
$('#masthead_search option').each(function(){
$('#newmasthead_search').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
$('#newmasthead_search').append('</ul></div>');
$('#masthead_search').remove();
$('#newmasthead_search').attr('id', 'masthead_search');
/**select_library **/
$('#select_library').parent().prepend('<div class="btn-group btn-input clearfix"><button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">All libraries</span> <span class="caret"></span></button><ul id="newselect_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">');
$('#select_library option').each(function(){
$('#newselect_library').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
$('#newselect_library').append('</ul></div>');
$('#select_library').remove();
$('#newselect_library').attr('id','select_library');
});
$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
return false;
});
After executing the code the dropdowns looks like this:
First Dropdown:
First Dropdown Code:
<div class="btn-group btn-input clearfix">
<button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">Library catalog</span>
<span class="caret"></span>
</button>
<ul id="masthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li value="" role="presentation"><a tabindex="-1" role="menuitem">Library catalog</a></li>
<li value="ti" role="presentation"><a tabindex="-1" role="menuitem">Title</a></li>
<li value="au" role="presentation"><a tabindex="-1" role="menuitem">Author</a></li>
<li value="su" role="presentation"><a tabindex="-1" role="menuitem">Subject</a></li>
<li value="nb" role="presentation"><a tabindex="-1" role="menuitem">ISBN</a></li>
<li value="se" role="presentation"><a tabindex="-1" role="menuitem">Series</a></li>
<li value="callnum" role="presentation"><a tabindex="-1" role="menuitem">Call number</a></li>
</ul>
</div>
Second Dropdown:
Second Dropdown Code:
<div class="btn-group btn-input clearfix open">
<button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">All libraries</span>
<span class="caret"></span>
</button>
<ul id="select_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li value="" role="presentation"><a tabindex="-1" role="menuitem">All libraries</a></li>
<li value="branch:01" role="presentation"><a tabindex="-1" role="menuitem">Main Library</a></li>
</ul>
</div>
But When I resize my Browser Window and click the first button, my first dropdown doesnt show. And when I click my Second Drop-down the dropdown that is shown is the dropdown which is supposedly in my First Dropdown.
First Dropdown:
Second Dropdown:
Where did I go wrong? please help me.

Ok, so this is not really an answer to your question, but I can't fit it into a comment and I think it needs to be said.
You really need to think carefully as to whether for the sake of changing the colour of drop down items you want to do all this. This is a pretty hefty abuse of HTML and looks like it already has (and will continue to) lead you down a rabbit hole of awkwardness and problems. What you are doing here is throwing away a <select> element and replacing it with a <ul>. You might think 'so what', it looks and works fine, and gives you a greater amount of control over styling, let me try and convince you the why you should just stick with a <select>.
You're going to have a lot of fun posting that data
It looks like you are putting these drop downs in as part of a search form. This means it will be within a <form> element with an action to something like http://myawesomewebsite.com/search, and your search button is a submit button. When you hit submit the page will collect up all the form fields in your form and POST them to the search page. How are you planning on making the page POST your selected option? From the looks of one of the comments, it's possible you have some sort of JavaScript somewhere that is updating a hidden <select>? This will work, but isn't super pretty.
Mobiles/Touchscreens play nicely with selects
You're obviously developing with mobiles/touch screen devices in mind. Great! Too many people still don't bother. Native Select elements will (depending on the specific device/browser) render a nice, scrollable list when you click on it, which is much easier for a user on a small screen to tap than a drop down list that could potentially extend beyond the bottom of the users small screen. People browsing on mobiles will expect to see their devices native list picker when they click a drop down list, don't break peoples expectations without good reason.
Styling/positioning issues
Just like the one you are getting now. A native select list will position itself perfectly well. No hacks or even JavaScript required.
Other things
Remember I mentioned 'abuse of HTML' earlier, if you are expecting the user to select from a list, the element that should be rendered is a <select>, that's how the HTML standard was defined. This also helps accessibility devices understand what your element is and what it should do with it. A drop down list rendered as a <ul> doesn't really make sense to a screen reader, but a <select> with <option> tags make perfect sense. I think Bootstrap does quite a good job of helping screen readers understand elements like it's specialist dropdowns, but I'm no expert on accessibility, so I'm not sure.
I don't know about you, but whenever I use a select box, I click it, hit a key on my keyboard that corresponds to the first letter of what I am after and hit enter. You can't do that with a Bootstrap dropdown (although they are keyboard accessible, so that's good). In your case this perhaps doesn't matter too much, as your options are limited, but with more options this becomes a real time saver for the power users among your user base.
Have you also noticed the fact that in the Bootstrap docs they don't even show you an example of how to use a drop down in this way? The only example they provide are based on menus with links, not replacement selects. There is probably a good reason for that.
So, in conclusion
I'm well aware that there will always be reasons to customize things beyond their original spec, but if you can help it always try to use the elements for what they were designed for. There are plenty more pitfalls than I have mentioned here, and any future developers who take over this code will much prefer a simple select box than a convoluted, jQuery dependent solution. I'll admit that styling of select boxes has always been an issue, but from what I have seen of this particular case, I would recommend just sticking with selects.
However, if you still want to go with this solution then can I recommend you create a Bootply of your problem, with all relevant HTML and JavaScript, so we can have a better crack at replicating your issue.
I hope this has not come off as condescending, and I am by no means saying what you are doing is wrong, as I know nothing of your exact situation, I just felt an explanation as to the potential benefits of keeping it simple might help you or future visitors to this question.

How to re-render views using Angular JS

I want to re-render all the views present on my page.I have Header, Footer and Body view. In Header view i have a dropDown in which user can select the Language Preference. On clicking on language prefrence all the view should be re-render. Is it Possible in Angular?
In BackboneJs i simply call the render function again on that particular event. Is there some same kind of functionality provided by AngularJs?
Thanks in Advance
Header Template (language Prefrence Dropdown Code)
<li class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#">
Language Preferences<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-manual">
<li id="English" ng-click="englishConversion()">English</li>
<li id="French" ng-click="frenchConversion()" >French</li>
</ul>
</li>
is there any inbuilt function which i can call in englishConversion and frenchConversion to re-render the view/views?

Have you looked at the angular-getText libary ,
Or you can $compile the HTML using angular again. You can simply do like this,
var content=angular.element('#translatedContent');
var scope=content.scope();
$compile(content.contents())(scope));

twitter bootstrap dropdown links not working

I am using bootstrap version 2.0
I have the following html structure -
Now when I click on the Filter by Team the dropdown shows properly. Now when I click on the link, I should be taken to the page. But the links do not work. I mean, when I click on the dropdown elements, they should take me to a url, which they are href'ed to, this does not happen.
<li style="margin-left: 12px;">
<div class="dropdown" style="margin-top: 5px;">
<a class="dropdown-toggle" style="margin-left: -2px;" data-toggle="dropdown" href="#">
Filter by Team
</a>
<ul class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="dropdownMenu">
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/8/">funvilla</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/6/">Dev Team</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/5/">Design Team</a>
</li>
<li class="divider"></li>
</ul>
</div>
</li>
The fiddle can be found here - http://jsfiddle.net/ktgrw/

The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
Here's the updated fiddle with the correct bootstrap version and the attribute removed.
Also the disabled class is used on the toggle link to prevent the opening of the dropdown, you should remove it from your links since it's not serving any real purpose.

The links are working perfectly fine. When we use relative links like href="/task/list/orgteam/5/" we need to be sure that we are running this page on a website where these links exist.
To add to clarity, I added a link to google as the last list item in this new fiddle (click here to view) and because it uses absolute url href="http://www.google.com", it works just fine.

I faced same problem with bootstrap framework and at the end got the solution (worked for me).
Import all your required javascripts, mainly jquery.js .

The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
I had the same problem too but after removing the data-toggle attribute, my <a> links are working just fine.