Develop Reference

Stop the navigation bar from refreshing - Umbraco

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>

How to append a C# formatted html

I have a button that append's the same layout of html but I have a problem taking the select values with it. My html is:
<div id="degreePlusSign">Button</div>
<div class="padding">
<div class="col-md-5 col-xs-12">
<label for="prefix" class="sr-only">Degrees</label>
<select class="form-control marginBottom15">
#{
foreach (var degree in ViewBag.NewDegrees)
{
<option value="#degree.DegreeID" selected>#degree.DegreeName</option>
}
}
</select>
<span class="glyphicon form-control-feedback"></span>
</div>
</div>
JS:
$('#degreePlusSign').on('click', function () {
$(this).closest('.padding').append('<div class="padding mBottom"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i><div class="col-md-5 col-xs-12"><select class="form-control marginBottom15">#{foreach (var degree in ViewBag.NewDegrees){<option value="#degree.DegreeID" selected>#degree.DegreeName</option>}}</select><span class="glyphicon form-control-feedback"></span></div><div class="col-md-7 col-xs-12"><input class="form-control" placeholder="Major/Area of Study" type="text" /></div></div>');
});
Basically it recreates the html, but my problem is I'm using a foreach loop to bring in the values from the backend and it will only work with the inital container, not the duplicated containers afterwards. How do I keep the values on every duplication with the append jquery?

You have got two options:
Spit options values (formatted) from C# and keep in a JS variable:
{
var opts=new StringBuilder();
var sel="selected";
foreach(var d in ViewBag.NewDegrees)
{
opts.Append($"{d.DegreeName}");
sel="";
}
}
Then somewhere down store it into a js variable:
var optsList="#(opts)";
Now you can use append new HTML as:
$('#degreePlusSign').on('click', function () {
$(this).closest('.padding').append('<div class="padding mBottom"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i><div class="col-md-5 col-xs-12"><select class="form-control marginBottom15">'+
optsList/*THIS IS THE VALUE WE STORED FROM C# CODE*/
+'</select><span class="glyphicon form-control-feedback"></span></div><div class="col-md-7 col-xs-12"><input class="form-control" placeholder="Major/Area of Study" type="text" /></div></div>');
});
Clone the generated select element and use that:
$('#degreePlusSign').on('click', function () {
/*CLONE EXISTING SELECT ELEMENT. YOU MAY WANT TO PUT AN ID FOR SELECTION*/
var cl=$("select.form-control.marginBottom15").clone();
var d = $("").addClass("padding mBottom")
append("").addClass("fa fa-times-circle fa-2x").attr("aria-hidden",'true');
/*APPEND CLONED SELECT TO INNER DIV*/
d.append("").addClass("col-md-5 col-xs-12").append(cl);
d.append(cl);
d.append("").addClass(glyphicon form-control-feedback");
d.append("").addClass("col-md-7 col-xs-12").append("").addClass("form-control")
.attr("placeholder","Major/Area of Study").attr("type","text");
$(this).closest(".padding").append(d);
});`
Hope you will be able fix any jQuery mess. I haven't used it since long.

.clone was what I was looking for. $('.padding').clone().append('.padding');

Building HTML dynamically with knockout

I have a single-page-application in MVC4 project in C#.
In my HTML I have a like-a-table lists - first is the table titles, and second is in a div with a "foreach" property (knockout) and presents all the items in my list.
Now, I need this "table" to be dynamic - I'll get a list of columns and "instructions" (column title, column class name, column value name, css conditions, etc.) and the HTML will be built dynamically.
Is it possible with knockout?
This is my code now. There are only 5 columns. I need it to be dynamic so I can easily add (and remove) columns by changing the instruction list, whithout touching the HTML.
<ul class="assetsTitles">
<li class="ItemKey" data-bind="click: sortBy.bind($data, 'Key'), css: { selected: Filter().OrderBy() == 'Key', desc: Filter().Descending() }"><span>Key</span></li>
<li class="ItemName" data-bind="click: sortBy.bind($data, 'Name'), css: { selected: Filter().OrderBy() == 'Name', desc: Filter().Descending() }"><span>Item Name</span></li>
<li class="ItemProp1" data-bind="click: sortBy.bind($data, 'ItemProp1'), css: { selected: Filter().OrderBy() == 'ItemProp1', desc: Filter().Descending() }">ItemProp1</li>
<li class="ItemProp2" data-bind="click: sortBy.bind($data, 'ItemProp2'), css: { selected: Filter().OrderBy() == 'ItemProp2', desc: Filter().Descending() }">ItemProp2</li>
<li class="ItemProp3" data-bind="click: sortBy.bind($data, 'ItemProp3'), css: { selected: Filter().OrderBy() == 'ItemProp3', desc: Filter().Descending() }">ItemProp3</li>
</ul>
<div data-bind="foreach: items, visible: items().length > 0">
<div class="itemRow" data-bind=" attr: { id: RowId() }">
<ul class="itemRowDetails " data-bind="visible: ShowDetails, selected: IsSelected, click: $parent.showItemDetails.bind($data, $data, $parent.type), css: { selected: IsSelected() }">
<li class="ItemKey" data-bind=" title: Key"><span data-bind="text: Key" /></li>
<li class="ItemName" data-bind=" title: Name"><span data-bind="text: Name" /></li>
<li class="ItemProp1" data-bind=" title: ItemProp1"><span data-bind="text: ItemProp1" /></li>
<li class="ItemProp2" data-bind=" title: ItemProp2"><span data-bind="text: ItemProp2" /></li>
<li class="ItemProp3" data-bind=" title: ItemProp3Display"><span data-bind="text: ItemProp3Display, css: { alertDetail: ItemProp3Alert, alertDetail2: ItemProp3Alert2 }" /></li>
</ul>
</div>
</div>

you can use ko.renderTemplate
and doing some thing like :
<!-- ko foreach:$root.visibleColumns() -->\
<li data-bind=\"attr:{'data-columnname' : columnName}\" role=\"column\" ><span data-bind=\"attr:{'class': columnHeaderCss, 'data-columnname' : columnName,'data-headertext': headerText}, text: headerText\"></span> </li>\
<!-- /ko -->\
and pass the columns list to viewModel :
ko.dataGrid = {
viewModel: function (configuration) {
var me = this;
$.extend(me, {
columns: configuration.columns,
visibleColumns: function () {
var res = [];
$.each(me.columns, function (i, c) {
if (c.visible)
res.push(c);
});
return res;
},
});
}

You could try building the html in script using traditional techniques then attach it to an element. Then to add this to the binding the name of that element needs to be included as a 2nd parameter:
ko.applyBindings(viewModel, dynamicElement)
Alternatively ko has html ("html:") and text binding ("text:") options.
In constructing the html in code you may need to use the "containerless control flow syntax" i.e. wrap within the comment notation e.g. <!-- ko foreach: myItems --> .... <!-- /ko --> Where myItems is an array.
Usual caveats apply regarding possible injection attacks!
Its been some time since I played with ko..

JQuery dropdown with Paging

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>

UL toggle working in FF and not in IE 7

I have an list that toggles with no problem in FF. I need this working IE for it to be production ready.
It seems (IE) to apply the js to the first #orderItem and the first #familiy only. The rest of the items in the list are ignored.
Any help would be great.
A piece of the HTML (large list):
<div class="classificationContainer">
<ul class="classification" id="orderUL">
<li id="orderItem" class="ordrheading">
<div class="order">
<a href="?nav=search_recherche&lang=en">
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="By Classification" id="OrdListImage" />
Apodiformes (Swifts and Hummingbirds)
</a>
</div>
<ul class="classification" id="FamilyList">
<li id="familiy">
<div class="family">
<a href="?nav=search_recherche&lang=en">
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" />
Apodidae (Swifts)
</a>
</div>
<ul class="classification" id="SpiecesList">
<li>
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
Chimney Swift (Chaetura pelagica)
</li>
</ul>
</li>
<li id="familiy">
<div class="family">
<a href="?nav=search_recherche&lang=en">
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" />
Trochilidae (Hummingbirds)
</a>
</div>
<ul class="classification" id="SpiecesList">
<li>
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
Ruby throated Hummingbird (Archilochus colubris)
</li>
<li>
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
Rufous Hummingbird (Selasphorus rufus)
</li>
</ul>
</li>
</ul>
</li></ul></div>
I have the following jquery functions:
<script type="text/javascript">
$(document).ready(function () {
// toggle action for the order to familiy
$("li#orderItem").click(function (event) {
// toggle the image
var src = ($("#OrdListImage", this).attr("src") == "/images/node_closedc.gif")
? "/images/node_openc.gif"
: "/images/node_closedc.gif";
$("img#OrdListImage", this).attr("src", src);
//toggle the ul
$('ul#FamilyList', this).toggle($('ul#FamilyList', this).css('display') == 'none');
// stop all link actions
return false;
});
//toggle action from familiy to speices
$("li#familiy").click(function () {
// toggle the image
var src = ($("#FamListImage", this).attr("src") == "/images/node_closedc.gif")
? "/images/node_openc.gif"
: "/images/node_closedc.gif";
$("img#FamListImage", this).attr("src", src);
//toggle the ul
$('ul#SpiecesList', this).toggle($('ul#SpiecesList', this).css('display') == 'none');
// stop all link actions
return false;
});
});

Also check if id's are not repeated (there is only one #orderItem, only one #familiy and etc.). "id" attribute must be unique in html document, "class" can be repeated.

The toggle function provided by jQuery is not guaranteed to work. I lost the reference where I read this (was on jQuery's homepage). I encountered the same problem and (as suggested by jQuery) implemented my own toggle function. I'd suggest trying this, as it's not much work and could provide you a solution.