Use case:
I have designed a sidbar navigation using HTML and CSS\Js as shown below. lets name this index.html
I have another HTML e.g. Dashboard.html , whose layout looks like below
Now if i click on 'Live Execution' in index.html, the dashboard.HTML should display the content inside the main index.HTML without disturbing the sidebar navigation and headers
I am new to UI coding , so i am confused with all the available option, How can I acheieve the above result !!
Updated code - With Jquery
I was able to resolve this by the input provided by #Hien Nguyen
I have to put a div class before the function load() comes into act , and then reference that div class to call load()
Index.Html
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard
<i class="far fa-chart-bar"></i>
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#" onclick="load()">Live Execution
<i class="fas fa-chart-line"></i>
</a>
</li>
<li>
<a href="#">Error Analysis
<i class="fas fa-bug"></i>
</a>
</li>
<li>
<a href="#">Rerun failed Tc
<i class="fas fa-step-forward"></i>
</a>
</li>
</ul>
</li>
<li>
</script>
{% block second %}
<div id="content1" class="col-xs1 centre-block text-center" style="width:100%">
</div>
<script type="text/javascript">
function load_jumbo() {
// document.getElementById("content").innerHTML='<object type="text/html" data="dashboard.html" ></object>';
$("#content1").load("jumbotron.html");
}
</script>
{% endblock %}
You can use this on click a tag.
function load(file) {
document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>';
}
If you use jquery change to $("#content").load("flex.html");
Update:
If you try to open html file in local, you need setup security for browser allow enable CORS.
Disable same origin policy in Chrome
You should use a web server to open file.
I host sample in free host. It worked
https://viethien.000webhostapp.com
function load(file) {
document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>';
}
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard
<i class="far fa-chart-bar"></i>
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#" onclick="load()">Live Execution
<i class="fas fa-chart-line"></i>
</a>
</li>
<li>
<a href="#">Error Analysis
<i class="fas fa-bug"></i>
</a>
</li>
<li>
<a href="#">Rerun failed Tc
<i class="fas fa-step-forward"></i>
</a>
</li>
</ul>
</li>
<li>
<div id="content" style="width:100%"></div>
You can try something like this:
Index.html
<html>
<head>......</head>
<script>
function loadView(_view, _el) {
//check if already selected view
if ($(_el).hasClass("menuItemSelected")) {
return;
}
//set selected
$(".menuItemSelectable").removeClass("menuItemSelected");
$(_el).addClass("menuItemSelected");
loadSinglePage(_view);
}
</script>
<body>
.......
//your sidebar here
<i class="fa fa-dashboard" aria-hidden="true"></i><span class="nav-label">dashboard</span>
<i class="fa fa-globe" aria-hidden="true"></i> <span class="nav-label">Live Execution></span>
</body>
</html>
Then you will have a JS file which will handle the rest of the pages.
Content.js
//initialise the pages
var execContent = undefined;
var scheduleContent = undefined;
function loadPages() {
// initialize your panels here
$("#divSearchPanel").load("Pages/Search/search.html", function (response, status, xhr) {
//progress
$("#divProgressLoader").load("Pages/Search/progress.html", function (response, status, xhr) {
loadProgress.init($("#divProgressLoader"));
});
searchPage.init($("#divSearchPanel"));
//dashboard
loadSinglePage("dashboard");
});
//call the loadpage function
loadPage("dashboard");
}
//load the page
function loadSinglePage(pageId) {
currentPage = pageId;
var contentDiv = $("#divPageContent");
contentDiv.html("");
if (pageId == "dashboard") {
contentDiv.load("Pages/Dashboard/dashboard.html", function (response, status, xhr) {
dashboardContent.init(contentDiv);
});
}
if (pageId == "liveexec") {
contentDiv.load("file/location/liveexec.html", function (response, status, xhr) {
execContent .init(contentDiv);
});
}
Then your pages will look live this:
liveexec.html
<div style="">
<table style="width: 100%; height: 100%;" cellpadding="10" cellspacing="10">
<tr>
<td id="divgraph"></td>
</tr>
<tr>
<td id="divbuttons"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var execContent = execContent || {};
(function (pub) {
var _dom = null;
pub.init = function (dom) {
_dom = dom;
//load graphs
_dom.find("#divgraph").load("graph.html", function (response, status, xhr) {
riskComparisonGraph.init(_dom.find("#divgraph"));
});
}
})(liveexecContent || {});
</script>
Related
I want to use function javascripts inside my _LoginPartial.cshtml file.
Im using ASP .NET CORE IDENTITY.
Why i can't just use simple function there? I want to call :
myFunction()
This is my _LoginPartial.cshtml file :
#using Microsoft.AspNetCore.Identity
#using SildeBar.Areas.Identity.Data
#using SildeBar.Controllers
#inject SignInManager<AppUser> SignInManager
#inject UserManager<AppUser> UserManager
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<ul class="navbar-nav">
#if (SignInManager.IsSignedIn(User))
{
<li class="nav-item">
<a id="manage" class="nav-link text-white" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">#UserManager.GetUserName(User)</a>
</li>
<li class="nav-item">
<a id="manage" class="nav-link text-white" title="Manage">Some text : </a>
</li>
<script>myFunction()</script>
<li class="nav-item">
<form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="#Url.Action("Index", "Home", new { area = "" })">
<button id="logout" type="submit" class="nav-link btn btn-link text-white">Wyloguj</button>
</form>
</li>
//tutaj dodać ilość TC
// tutaj dodac stan zł.
}
else
{
<li class="nav-item">
<a class="nav-link text-white" id="register" asp-area="Identity" asp-page="/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" id="login" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
}
</ul>
#functions{
}
<script type="text/javascript">
function myFunction() {
return "Some data";
}
</script>
I just try to call :
<script>myFunction()</script>
But this text is not displayed.
When i check in browser console there is :
Please help me with that. I spent a lot of time and can't find solution. I just want to call simple javascript function nothing more... ehh
You need call js function in the same script:
<script type="text/javascript">
function myFunction() {
return "Some data";
}
myFunction();
</script>
But if you want to display the actual return data from this function, what you did(<script>"Some Data"</script>) is useless, it will never render in html and it also cannot be used in js as a constant.
If you want to use this return data to did other operation, you could set a constant like below, you can add console.log(data) to check if the value has been correctly set:
<script type="text/javascript">
function myFunction() {
return "Some data";
}
var data = myFunction();
console.log(data);
</script>
For example, if you want to render the data to html, you need change like below:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
function myFunction() {
return "Some data";
}
var data = myFunction();
$(".navbar-nav").append('<li>' + data +'</li>')
</script>
Note:
_LoginPartial.cshtml rendered as partial view in _Layout.cshtml, so all the references in _Layout.cshtml will not be added to _LoginPartial.cshtml, you need specific the js reference if you use jquery in _LoginPartial.cshtml.
I had a previous code like this:
Basically I added the active status to the li docker logs and open the sub-menu of Docker.
html
<li id="dockerMenu">
<a data-toggle="collapse" href="#docker-pages" aria-expanded="false" aria-controls="testing-main.webapp.pages">
<img src="../resources/img/icons/docker-icon.png" alt="" class="menuIcon">
<span class="menu-title">Docker <i class="fa fa-sort-down"></i></span>
</a>
<div class="collapse" id="docker-pages">
<ul class="nav flex-column sub-menu" data-simplebar>
<security:authorize access="hasAuthority('Administrator')">
<li class="nav-item" id="docker-status">
<a href="/docker-status">
<img src="../resources/img/icons/status.png" alt="">
<span class="menu-title">Container Status</span>
</a>
</li>
...
<ul>
<div>
</li>
var url = window.location.pathname + window.location.search;
if(url === "/docker-logs") {
$('#docker-logs').addClass('active');
$('#dockerMenu a').click();
}
I wanted to do the same on Angular but I don't know how
ngOnInit() {
this.toggleMenus();
}
toggleMenus() {
let url = window.location.pathname;
console.log(url);
switch(url) {
case "/docker-logs":
//how do I activate this?
}
I am currently working on a website. The header is loaded into the main 'search' page using the .load() function from JQuery. However, when I try to iterate through the [href]'s in the page, it cannot find them because the loaded header links haven't been added to the DOM yet (presumably).
function getCurrentPage(){
var count = 0;
$(".navLinks").each(function() {
count+=1
console.log('this.href' + this.href)
console.log('windowloc' + window.location.href)
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
console.log('# of hrefs' + count)
}
This is a function I wrote to add a css class to the current page, but this loop wont work since it cannot find those on the DOM (the .navLinks class is added to all links thats from the loaded header.html file). Thanks for the help!
<header>
<nav class="top-bar nav-desktop">
<div class="wrap">
<div class="top-bar-left">
<div class="logo">
<img class="logo-image" src="repairrepo_logo-02.png" width="250" height="184"></img>
<p class="site-logo">DNA Damage and Repair Database</p>
</div>
</div>
<div class="top-bar-right">
<ul class="menu menu-desktop">
<li><a href="index.html" class = 'navLinks'>HOME </a></li>
<li>
<div class="dropdown">
<button class="dropbtn">BROWSE
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#" class = 'navLinks'>HUMAN </a>
<a href="#" class = 'navLinks'>MOUSE</a>
<a href="#" class = 'navLinks'>ARABIDOPSIS</a>
<a href="#" class = 'navLinks'>PLANT</a>
</div>
</div>
</li>
<li><a href="search.html" class = 'navLinks'>SEARCH</a></li>
<li><a href="download.html" class = 'navLinks'>DOWNLOAD</a></li>
<li><a href="help.html" class = 'navLinks'>HELP</a></li>
</ul>
</div>
</div>
</nav>
Here's the 'header.html' file that is added and appended to a div with id 'header' on the main search page.
you guessed it right,
it cannot find them because the loaded header links haven't been added to the DOM yet
.load() is asynchronous and has a callback that executes when it's done, that's where you should call your function :
$('#someDiv').load('someHtml.html', getCurrentPage);
note that you have to passe the function by reference ( wihtout () ) otherwise it will be executed before the load() is done.
I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});
I'm using .net mvc and razor and I'm displaying items (itemRoom, itemDescription) in my view like this:
#foreach (var item in Model) {
<li class="errorItem">
<a href="#" class="list-group-item">
<i class="fa fa-warning fa-fw"></i> #Html.DisplayFor(modelItem => item.room) : #Html.DisplayFor(modelItem => item.title)
<span class="pull-right text-muted small"><em>5 min ago</em>
</span>
<div>
<ul id="errorExtra" class="nav nav-second-level" style="display: none;">
<li>
<p> #Html.DisplayFor(modelItem => item.description)</p>
<input type="button" id="btnFixed" value="Fixed" class="btn btn-success"/>
</li>
</ul>
</div>
</a>
</li>
}
At the bottom of my page I'm using JQuery to let every item slide open when it's clicked on so that the details and 'Fixed' button become visible. When the user clicks on the Fixed button he gets directed to a confirmation page to delete the item.
<script src="../Assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var isOpen = false;
$(".errorItem").click(function (e) {
isOpen = !isOpen;
if (isOpen) {
$(this).find("#errorExtra").slideToggle("slow");
} else {
$(".btn-success").click(function (e) {
window.location.replace("Reports/Delete/2")
})
};
});
});
</script>
Everything works quite all right but the link 'window.location.replace("Reports/Delete/2")' actually has to be 'Reports/Delete/itemID' but how can I mange to get the ID of the item that the user has clicked on and that has slide open? So that THIS item will be deleted on the confirmation page?
do a little change in view, assuming your unique id is with property name Id:
#foreach (var item in Model) {
<li class="errorItem">
<a href="#" class="list-group-item">
<i class="fa fa-warning fa-fw"></i> #Html.DisplayFor(modelItem => item.room) : #Html.DisplayFor(modelItem => item.title)
<span class="pull-right text-muted small"><em>5 min ago</em>
</span>
<div>
<ul id="errorExtra" class="nav nav-second-level" style="display: none;">
<li>
<p> #Html.DisplayFor(modelItem => item.description)</p>
--> change is here <input type="button" id="btnFixed" data-url="#Url.Action("Delete","Reports",new{id=item.Id})" value="Fixed" class="btn btn-success"/>
</li>
</ul>
</div>
</a>
</li>
}
In Jquery:
$(".btn-success").click(function (e) {
var url = $(this).data("url");
window.location.replace(url);
});
Just a small notice: you'll have multiple buttons with the same id="btnFixed" because it's inside of the #foreach loop. Maybe adding some kind of index to it would be reasonable or changing it to the class="btnFixed".
The same with the <ul id="errorExtra" ...>.