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.

how to make a dropdown menu expanded whenever its nested menu is selected

Here is my dropdown list dropdown
but when I click on one of the nested menu in the dropdown(for example:Books Registration), on that page the dropdown menu is collapsed when that page loads, like this Collapsed Dropdown, and here is the dropdown code
<ul class="nav nav-second-level">
<li id="BooksRegistration">
<i class="fa fa-edit"></i> Books Registration
</li>
<li id="AuthorRegistration">
<i class="glyphicon glyphicon-user"></i> Author Registration
</li>
<li id="MembersRegistration">
<i class="glyphicon glyphicon-user"></i> Members Registration
</li>
<li>
Second Level Link<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
So I need you guys to show me how can I make the dropdown list expanded when on of the nested page in that dropdown list is loaded.
I need the Javascript code because I cannot work with jQuery

If you use any browser which provides inspect element feature active that on your dropdown list (In chrome Right click On the dropdown list and then click on the inspect) then toggle your dropdown list at same time look at the css in the inspected side that which class are being changed copy those classes ( that add them to each page which are in dropdown list)
see my example
Those highlighted class or attributes in the style are being shown when click the dropdown list so then I copied those attribute when the dropdown list is being expanded and added them to each page in the dropdown list

simplemodal does not appear after loading dynamic data into a page

I am using simpelmodal to create dialog in jquery, but now the issue is in one of my html page i am adding
li elements dynamically , and when on a click of a button i try to fire $("attachment-modal-content").modal() dialog box doesnt appear until i again tap over a screen or move the screen. as soon as i move the screen it appears.
notable things is that if i dont load any li elements in the page , it popups normally.
here is the example page , initially attachment-modal-content is set to display:none
<div>
<a href="#" id="openDialog" />
<ul id="mylist">
</ul>
<div id="attachment-modal-content">
<h3>Attachment</h3>
<ul class="attachment">
<li id="imageBtn" class="green"><em><i class="fa fa-camera"></i></em><span>Image</span></li>
<li id="audioBtn" class="red"><em><i class="fa fa-volume-up"></i></em><span>Audio</span></li>
<li id="videoBtn" class="yellow"><em><i class="fa fa-video-camera"></i></em><span>Video</span></li>
<li id="linkBtn" class="blue"><em><i class="fa fa-link"></i></em><span>Link</span></li>
</ul>
<ul class="attachList">
</ul>
</div>
</div>
</div>
button code
$("#openDialog").on('click',function(){
$("#attachment-modal-content").modal();
});
once i load the date using $('#mylist').append('<li><li>') , dialog wont appear on a first button click , it appears
when i move the screen.

issue with jquery external linking

I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.

when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help

Navigating between divs using javascript

In my asp.net mvc application I have a modal popup.In modal popup i have three divs displayed like tabs.each div has buttons "Next","Back".on click of these buttons i want to navigate between these divs
sample code
<div id="Div1">
<ul>
<li><a id="btnone" href="#OneTab">one</a></li>
<li><a id="btTwo" href="#TwoTab">Two</a></li>
<li><a id="btnThree" href="#ThreeTab">Three</a></li>
</ul>
<div id="OneTab>
<input id="btnNext Type="button/>
<input id="btnBack Type="button/>
</div>
<div id="TwoTab>
</div>
<div>
Please suggest
Thanks

using foloowing line of code on "Onclick" event of button
$('#Div1').tabs("select", tabid);
Here tabid is the id of the tab on which you want to navigate
The code change done is
as below