<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
Year <span class="caret"></span>
</button>
<ul id='demolist' class="dropdown-menu" runat="server" role="menu">
</ul>
</div>
Hi All,
I am trying to populate the li items in a bootstrap dropdwnlist via code-behind. PFB the .cs code which is placed in page load.
HtmlGenericControl li;
for (int x = 3; x <= 10; x++)
{
li = new HtmlGenericControl("li");
li.Attributes.Add("class", ".dropdown p");
li.InnerText = "Item " + x;
li.Disabled = false;
demolist.Controls.Add(li);
}
PFB the js code which displays the selected value upon click.
<script type="text/javascript">
$(function(){
$(".dropdown-menu li ").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
</script>
Now, when i click on the dropdown it displays the list items,but there are 2 problems
When the mouse cursor is hovered over it
display a 'I' cursor (the one that appears when you are editing a doc or something) instead of finger pointer cursor(like how it displays for an asp:dropdown).
After clicking the list item the text of the dropdown do change, but the 'down arrow' disappears.
Could anyone please help me out on this ?
When you change the text of the button with jQuery .text(), you're overwriting the span class="caret" too.
Perhaps add another span into your button:
<button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
<span class="year">Year</span> <span class="caret"></span>
</button>
Then target that with your JS:
$(".dropdown-menu li").click(function(){
var li = $(this),
btn = $('.btn:first-child'); // Maybe need a better selector?
btn.find('span.year').text(li.text());
btn.val(li.text());
});
Also the cursor won't be a pointer as you're hovering over an li, not an a etc. But you could tweak your CSS to chose the cursor style:
.dropdown-menu li {
cursor: pointer;
}
Related
I have a dropdownlist and the Html hyperlink button.So i need when i select something in the dropdown list and then i click the button then Hyperlinks Quantity property fills with Dropdown list selected item value.
<div class="form-group col-6 mt-0 mt-lg-3 d-flex align-items-end">
<select id="drpQuantity">
<option value="0">--Select --</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<a href="#Url.Action("AddNewItems", "Home",
new { ItemId = QitemId,
Quantity = //I need dropdown lists selected value here})">
<input type="submit" class="btn btn-primary btn-block rounded-pill" id="#QitemId" value="Add to Cart" />
</a>
</div>
As #Jasen said before, #Url.Action() helper's routeValues parameters are rendered server-side before sending to browser and you can't change it directly with selected value from <select> element. You could use client-side code which provides additional query string parameter using selected value from <select> element, as provided in this example:
Hyperlink example
<a id="link" href="#">Add New</a>
Client-side manipulation
$('#drpQuantity').change(function () {
var selected = $(this).val();
// use prop function to set href attribute of target anchor link
$('#link').prop('href', '#Url.Action("AddNewItems", "Home", new { ItemId = QitemId })' + '&Quantity=' + selected);
});
If you want to use plain/vanilla JS, you need to handle onchange event from <select> and set href attribute after getting anchor link ID/tag name:
<select id="drpQuantity" onchange="setUrl(this)">...</select>
<script>
function setUrl(element) {
var value = element.value;
document.getElementById('link').href = '#Url.Action("AddNewItems", "Home", new { ItemId = QitemId })' + '&Quantity=' + selected;
}
</script>
The anchor link should be rendered like this example:
<a id="link" href="/Home/AddNewItems?ItemId=1&Quantity=1">Add New</a>
Live example: .NET Fiddle
I couldn't find anything regarding my issue so I decided to post one myself.
I am using a navigation bar that has dropdown menu's. Whenever I open the dropdown and navigate to one of those pages, the navigation refreshes and closes the dropdown menu. The dropdown menu needs to stay open when I go over to one of the pages, I tried Model.Content.AncestorOrSelf().Descendants("document") to try and keep the navigation bar from refreshing but that doesn't seem to work (as people said).
Here's my menu structure:
Everything underneath "Hulp per browser" is in a dropdown and will disappear when I click on "Hulp per browser" again.
Here is my code:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<div class="col-sm-3">
<div class="NavDigiCampuz">
<h3>Helpcentrum</h3>
<li class="NoBullet"><a class="NormalA" href="https://digicampuz.nl/">Terug naar digicampuz</a></li><br>
<ul class="nav nav-list tree">
#{
var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
}
#foreach(var item in Model.Content.AncestorOrSelf(2).Descendants("document").ToList()){
foreach (var ItemChild in #item.Children("categorieMenu")){
if(ItemChild.Children.Any())
{
<li class="MenuItems"><p>#ItemChild.Name</p></li>
foreach (var Subitem in #ItemChild.Children){
if (Subitem.Children("hoofdstuk").Any())
{
<li class="item">
#if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
<a class="NormalA aNav" href="#"><i class="fa fa-#(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> #Subitem.Name <i id="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a>
}else{
<a class="NormalA aNav" href="#">#Subitem.Name <i id ="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a>
}
#foreach (var Finalitem in #Subitem.Children){
<ul class="submenu">
#if(Finalitem.GetPropertyValue("hoofdstukIcoon") != "") {
<br><li><a class="NormalA aNav" href="#Finalitem.Url"><i class="fa fa-#(Finalitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i>#Finalitem.Name </a></li>
}else{
<br><li><a class="NormalA aNav" href="#Finalitem.Url">#Finalitem.Name</a></li><br>
}
</ul>
}
</li>
}else
{
if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
<li><a class="NormalA aNav" href="#Subitem.Url"><i class="fa fa-#(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> #Subitem.Name</a></li>
}else{
<li><a class="NormalA aNav" href="#Subitem.Url">#Subitem.Name</a></li>
}
}
}
}
}
}
</ul>
</div>
</div>
<script>
$(".item").click(function(){
$(this).children(".submenu").toggle(); //it will display or hide your submenu when clicking the item.
});
</script>
<style>
.submenu{
display: none;
list-style:none;
}
</style>
I do plan on removing the script and style from the page when everything works.
First thing you have several issues in the code:
Remove the Where to filter Children and keep it like var selection = Umbraco.TypedContent(documentRootNodeId).Children("Visible");
Cast your hoofdstukIcoon to string Subitem.GetPropertyValue<string>("hoofdstukIcoon")
The first <li class="noBullet"> should be in your nav-list, not outside.
You shouldn't put <br> between your list items, if you want margins use css.
Now we'll focus on your issue with the submenus. What you are doing with your javascript is just using the display property to hide or show your submenu but when the page is rendered, Razor has no idea if that should be hidden or not. To solve this you have to create a new class like .visible that can be used by Razor and Javascript.
Yous hould also move your <ul class="submenu"> out of your #foreach (var Finalitem in Subitem.Children) because what you are doing now is creating a new list with one item for each one.
You should also include a conditional before your submenu in case there a no children and we don't want submenu #if (Subitem.Children.Any()) {
The way of telling your submenu with Razor if it has to diplay or not is doing this:
var isVisible = Model.Content.IsDescendantOrSelf(Subitem) ? "visible" : "";
<ul class="submenu #isVisible">
So in that example your submenu will show if the current page is this Subitem or one of its children.
And your JS script would become this:
$(".item").click(function () {
$(this).children(".submenu").toggleClass('visible'); //it will display or hide your submenu when clicking the item.
});
And your CSS this:
<style>
.submenu {
display: none;
list-style: none;
}
.submenu.visible {
display: block;
}
</style>
i have a dropdown figured as below:
The question is:
i want only 3 items in drop it needs to be in javascript
the dropdown itselfs is based on ul li structure.
so what i was thinking is to render all items and than split them into groups of ul's
but i dont know how to realize that in javascript (JQuery) .each(function(){});
when the user clicks on the arrow buttons at the buttom it needs to show the second 3 elements / (Groups) in the dropdown.
I hope someone here has a nice idea how to realize this.
http://jsfiddle.net/9pBgZ/18/
First hide all the li's with css (display: none;) use jQuery slice (like you said) and then only show the elements you want to show based on the page you are on:
$( "li" ).slice( 0, 2).show();
or
$( "li" ).slice( 3, 5).show();
You can also have a look at the jQuery get function.
You can get items by index like this:
$( "li" ).get( 0 )
You can use a normal for or foreach loop and then select only the items you want to show based on the current selected 'tab'.
Solution (Thanks FWieP)
<script type="text/javascript">
var PageNumber = 0;
var PageSize = 3;
$(document).ready(function(){
Paging();
$("#Back").click(function(){
PageNumber = PageNumber -1;
console.log(PageNumber);
Paging();
});
$("#Forward").click(function(){
PageNumber = PageNumber +1;
console.log(PageNumber);
Paging();
});
});
function Paging()
{
$("#ListItems li").hide();
var lis = $('#ListItems li').slice(PageNumber*PageSize, (PageNumber*PageSize)+PageSize);
$(lis).show();
}
</script>
<div class="Dropdown">
<ul id="ListItems">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
<div class="PagingButtons" id="pnlPaging">
<a class="Back" href="#" id="Back"><</a>
<a class="Forward" href="#" id="Forward">></a>
</div>
</div>
Hi I want to do the following:
I have a Select Box when I click a page number in the process of changing product does well, what I want to do now is to click on a the Select Box icon automatically advance to the next value (page).
This is my Select Box, and work's fine:
<td colspan="3">page
<select id="numPage">
#if (ViewBag.pages == 0)
{
<option value="0" selected>0</option>
}
else
{
for (int i = 1; i <= ViewBag.pages; i++)
{
if (ViewBag.Nowpage == i)
{
<option id="Now" value="#(i)" selected>#(i)</option>
}
else
{
<option id="Next" value="#(i)">#(i)</option>
}
}
}
</select>
de #(ViewBag.pages)</td>
these are my buttons for first previous next or last pages:
<div>
<div id="startPage"><i class="fa fa-step-backward"></i></div>
<div id="previousPage"><i class="fa fa-backward"></i></div>
<div id="nextPage"><i class="fa fa-forward"></i></div>
<div id="lastPage"><i class="fa fa-step-forward"></i></div>
</div>
here I am on page 4 but I want to move to page 4 when clicking on the icon to advance:
when clicking the last page icon to advance to the last page in Select Box:
I'm programming with JQUERY and MVC 4 any suggestions?
Something like this works:
$("#nextPage").on("click", function(){
changeIndex(true);
});
$("#previousPage").on("click", function(){
changeIndex(false);
});
function changeIndex(val)
{
var i = $("#numPage").prop("selectedIndex");
$("#numPage").prop("selectedIndex", i + (val ? 1:-1));
$("#numPage").trigger("change");
}
$("#numPage").on("change", function(){
console.log("I got triggered");
});
jsFiddle: http://jsfiddle.net/4c7LV/
Make sure to check that the index is not outside the bounds on your select, by comparing it against how many items it has.
I'm not sure if this can be done as the Url.Action() is trying to access a variable that's only in the foreach's scope - maybe using jQuery?
I have a strongly typed partial view that takes a view model that contains a list of search results.
I iterate through the list and each result is displayed in summarised form. Beside each item in the list there's a button that (should) when clicked launches a modal window that displays more detailed information about the list item. So if there's 10 items in the list there's going to be 10 correspdonding 'More info' buttons.
Partial View:
<div>
#foreach (var result in Model.SearchResults)
{
<div class="basic-search-result">
<div class="row-fluid">
<img class="span3" src="http://some-img.jpg" />
<div class="span3">
<div class="address">
#result.Address.TownCity<br />#result.Address.County
</div>
<div>
€#result.MonthlyRate Monthly
</div>
</div>
<div class="span3 offset1" id="basic-search-result-btns">
<button class="btn btn-primary btn-block" id="btn-show-modal-from-get-all">More info</button>
</div>
</div>
</div>
}
</div>
Just below the foreach loop I define the modal (ViewProperty is a controller action that returns a partial that contains the modal's body):
<div class="modal hide fade in" id="modal-view-property-from-get-all"
data-url="#Url.Action("ViewProperty", "ResidentialProperties", new { id = result.ResidentialPropertyId })">
<div id="view-property-from-get-all-container"></div>
</div>
When one of the buttons is clicked, it should launch a modal. Handled like this:
<script type="text/javascript">
$(document).ready(function () {
$('#btn-show-modal-from-get-all').click(function () {
var url = $('#modal-view-property-from-get-all').data('url');
$.get(url, function (data) {
$('#view-property-from-get-all-container').html(data);
$('#modal-view-property-from-get-all').modal('show');
});
});
});
I know that the Id I'm binding in the Url.Action() is outside of the scope of the foreach. Is it possible to somehow get the result.ResidentialPropertyId and pass it to the Url.Action() dynamically when a button is clicked?
To prove it's working, I placed the Url.Action() in the foreach loop, but this only launched a modal for the first item in the list. Can what I'm trying to do be achieved?
Do not include the Id in the data-url
<div class="modal hide fade in" id="modal-view-property-from-get-all"
data-url="#Url.Action("ViewProperty", "ResidentialProperties")">
<div id="view-property-from-get-all-container"></div>
</div>
With that code the data-url will have a value ResidentialProperties/ViewProperty.
Then include the Id on each row to your button or you can read it from it's container element. I also suggest you remove the id of the button and maybe just have a class to ensure that the ajax call won't get executed for all instances of your buttons
// assuming Id is the identifier per row
<button class="btn btn-primary btn-block show-modal"
data-id="#result.Id">More info</button>
and in your js do the following
$(document).ready(function () {
$('.show-modal').click(function () {
var url = $("#modal-view-property-from-get-all").attr('data-url');
var id = $(this).attr('data-id');
$.get(url + '/' + id, function (data) {
$('#view-property-from-get-all-container').html(data);
$('#modal-view-property-from-get-all').modal('show');
});
});
});