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>

Populate Bootstrap dropdownlist dynamically

<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;
}

Execute javascript in webbrowser control

I am trying to resolve the links in a google search results list by executing a javascript on the page that would normally resolve when you click the link. Basically, I am trying to resolve all of them when the page loads.
Here is the html generated by google of the first two search results:
<H2 class=hd>Search Results</H2>
<DIV id=ires>
<OL id=rso eid="3gHFUYToG6LD0gGJ2IDAAQ">
<LI class=g>
<DIV class=rc data-hveid="43"><SPAN style="FLOAT: left"></SPAN>
<H3 class=r><A onmousedown="return rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)" href="http://prezi.com/wnx5jat2oene/ipad/">IPad by <EM>Frunk La Je</EM> on Prezi</A></H3>
<DIV class=s>
<DIV>
<DIV style="WHITE-SPACE: nowrap" class="f kv"><CITE>prezi.com/wnx5jat2oene/ipad/</CITE>‎
<DIV class="action-menu ab_ctl"><A aria-haspopup=true aria-expanded=false id=am-b0 class="clickable-dropdown-arrow ab_button" role=button href="#" jsaction="ab.tdd; keydown:ab.hbke; keypress:ab.mskpe" data-ved="0CC0Q7B0wAA" aria-label="Result details"><SPAN class=mn-dwn-arw></SPAN></A>
<DIV class="action-menu-panel ab_dropdown" role=menu tabIndex=-1 jsaction="keydown:ab.hdke; mouseover:ab.hdhne; mouseout:ab.hdhue" data-ved="0CC4QqR8wAA">
<UL>
<LI class="action-menu-item ab_dropdownitem" role=menuitem><A class=fl onmousedown="return rwt(this,'','','','1','AFQjCNHsvjmPpYAOeqVOHIIs_PWPuD5JaQ','','0CC8QIDAA','','',event)" href="http://webcache.googleusercontent.com/search?q=cache:bKCj-2ogWdIJ:prezi.com/wnx5jat2oene/ipad/+frunk+la+je&cd=1&hl=en&ct=clnk&gl=us">Cached</A></LI></UL></DIV></DIV></DIV>
<DIV class="f slp"></DIV><SPAN class=st>IPad. No description. by <EM>Frunk La Je</EM> on 7 June 2012 4 Tweet <B>...</B> thanks</a></p>. Make a copy Share Embed Like. by <EM>Frunk La Je</EM> on 7 June 2012 4.</SPAN></DIV></DIV></DIV></LI>
<LI class=g>
<DIV class=rc data-hveid="48"><SPAN style="FLOAT: left"></SPAN>
<H3 class=r><A onmousedown="return rwt(this,'','','','2','AFQjCNE7-nvy-ymTrBI0x4zleJOUXlY6nA','','0CDEQFjAB','','',event)" href="http://prezi.com/user/q53evqg1dnrn/"><EM>Frunk La Je</EM> on Prezi</A></H3>
<DIV class=s>
The function that resolves the first link:
onmousedown="return rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)"
I tried this:
foreach (HtmlElement h in web.Document.All)
{
h.RaiseEvent("onmousedown");
}
I tried replacing "onmousedown" with "MouseDown".
I tried this too:
web.Document.InvokeScript("rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)");
Any ideas how I can get this function to execute? I've also looked at the getElementByID function, but I don't know what the ID is for this.

Try to simulate a click programmatically, let's say in one of your anchor tag <a>. Now using your own code we will simulate a click on your first anchor tag which is subscript 0 (as shown below), like this:
HtmlElement simulateClickAnchor = webBrowser1.Document.GetElementsByTagName("a")[0];
simulateClickAnchor.InvokeMember("click");

HtmlDocument doc = browser.Document;
HtmlElement head = doc.GetElementsByTagName("head")[0];
HtmlElement s = doc.CreateElement("script");
s.SetAttribute("text","function sayhello() { alert('hello'); }");
head.AppendChild(s);
browser.Document.InvokeScript("sayHello");

File Upload using Twitter Bootstrap, C#, asp.net and javascript

link to Jasny http://jasny.github.com/bootstrap/javascript.html#fileupload
link to what the form looks like http://img507.imageshack.us/img507/3308/picpx.png
I am using the Jasny Javascript file upload in my boot strap project, it looks like this:
ASP\HTML VIEW
<div class="row-fluid">
<div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden">
<div class="input-append">
<div class="uneditable-input span2" runat="server" id="statment1"><i class="icon-file
fileupload-exists"></i> <span class="fileupload-preview" style=""></span></div><span
class="btn btn-file"><span class="fileupload-new">Select file</span><span
class="fileupload-exists">Change</span><input type="file"></span><a href="#" class="btn
fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
How do I go about using this in the code behind to save the attached file to my server as I would using the C# asp.net File Upload?
In ASP.net C# I would normally do this in the code behind:
ASP.net C# CodeBehind
string filename = FileUpload1.PostedFile.FileName;
FileUpload1.PostedFile.SaveAs(Path.Combine(Server.MapPath("\\Document"),
filename).ToString());
filelocation = "Document\\" + filename;
media = "Document";
The Jasny github explains how to set the layout using bootstrap which is great as it looks really good (much better than the boring asp file upload) but How do I actually get I to post on my button click? I would really like to get this to work as I think it looks heaps nicer.

Since you want to do this without a standard asp.net control, you will have to do some of the wiring that asp.net does for you.
Make sure your input has an id. I will set it here to myFile.
<div class="row-fluid">
<div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden">
<div class="input-append">
<div class="uneditable-input span2" runat="server" id="statment1">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview" style=""></span>
</div>
<span class="btn btn-file"><span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span><input id="myFile" type="file" runat="server">
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload" >Remove</a>
</div>
</div>
</div>
Your page should now have a HtmlInputFile control to your page. like this:
protected HtmlInputFile myFile;
Then you should be able to receive the file:
if (IsPostBack)
{
if (myFile.PostedFile != null)
{
// File was sent
var postedFile = myFile.PostedFile;
int dataLength = postedFile.ContentLength;
byte[] myData = new byte[dataLength];
postedFile.InputStream.Read(myData, 0, dataLength);
}
else
{
// No file was sent
}
}

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.