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" ...>.
Related
I want to assign "active" class to the menu. The active clip is throwing but not deleting. I do not understand why you did not delete. Thank you in advance to those who can help.
There is no error, it surprises me that it does not delete this way
<ul id="avia-menu" class="menu av-main-nav">
<li id="menu-item" class="menu-item">
<a href="home">
<span class="avia-bullet"></span>
<span class="avia-menu-text">Home</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
<li id="menu-item" class="menu-item">
<a href="about">
<span class="avia-bullet"></span>
<span class="avia-menu-text">About</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
<li id="menu-item" class="menu-item">
<a href="contact">
<span class="avia-bullet"></span>
<span class="avia-menu-text">Contact</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
</ul>
function updateMenu(url) {
const active = document.querySelector('#menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('#menu-item'));
links.forEach(function (li) {
let anchor = li.querySelector("a");
if (url.indexOf(anchor.href) > -1) {
li.classList.add("active");
}
});
}
updateMenu(window.location.href);
You can simplify your function by consolidating your .add("active") and .remove("active") calls inside your loop. This saves you a query and avoids unsetting and resetting a class on the same element unnecessarily.
You also don't need the Array.from() call.
function updateMenu(url) {
const links = document.querySelectorAll('#menu-item');
links.forEach(li => {
let anchor = li.querySelector("a");
if (url.indexOf(anchor.href) > -1) {
li.classList.add("active");
} else {
li.classList.remove("active");
}
});
}
updateMenu(window.location.href);
I'm struggling with a very simple problem that I can't solve.
I'm using Framework7 (JS Framework for mobile application) and I have two list in my page:
First list:
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link"></a>
</li>
<li>
<a id="iOS" class="link external" target="_blank" href="ios_link"></a>
</li>
<li>
<a id="windows" class="link external" target="_blank" href="windows_link"></a>
</li>
</ul>
Second list:
<ul>
<li>
<a href="fb_link" target="_blank" class="item-link item-content link external" id="facebook">
<div class="item-media">
<i class="f7-icons">logo_facebook</i>
</div>
<div class="item-inner">
<div class="item-title">Facebook</div>
</div>
</a>
</li>
<li>
<a href=instagram_link" target="_blank" class="item-link item-content link external" id="instagram">
<div class="item-media">
<i class="f7-icons">logo_instagram</i>
</div>
<div class="item-inner">
<div class="item-title">Instagram</div>
</div>
</a>
</li>
</ul>
So, I need to take the href attribute on click event. I wrote this:
Dom7('.link.external').on('click', (event) => {
// First try
href = event.target.getAttribute('href')
console.log(href)
// Second trye
console.log(event.srcElement.href)
// Third try
var href = Dom7('a.link.external').attr('href');
var id = Dom7('a.link.external').attr('id');
console.log(href)
console.log(id)
})
I've tried three different solutions, but none of them work.
The first one and second one works only for the first list, I think because the <a> tag doesn't contains html inside.
The third one always return me the href and id of the first elements of the first list (android), even if I click in the second list.
Can you help me to solve this problem?
Solution 1
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link" onclick="linkClicked(this); return false;"></a>
</li>
</ul>
<script>
function linkClicked(object) {
consile.log(object.getAttribute("href"));
return false;
}
</script>
Solution 2
var elements = document.getElementsByClassName('link');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', linkClicked, false);
}
function linkClicked() {
console.log(this.getAttribute("href"));
};
if you can use jquery, use this working code :
$('.link.external').on('click', (event) => {
href = event.target.getAttribute('href');
alert(href);
});
jsfiddle
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>
I've made this dropdown menu using bootstrap. The problem is that it hides itself when I click inside it or check a checkbox inside it as well. How do I get it not to close unless clicked somewhere outside the dropdown.
Thanks in advance!
<div class="ibox-tools">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
<i class="fa fa-line-chart"></i>
</a>
<ul class="dropdown-menu dropdown-user" style="width:200px">
#foreach(PKG_VLTROUTINE_GET_EXCHAGEINFO_Result cur in Model)
{
<li style="padding:5px">
<strong>#cur.VLTNAME</strong>
#cur.RATE
<br />
<small>#cur.VLTFULLNAME</small>
<small>
(
#cur.RATEDIF
#if (cur.DIRECTION == 1)
{
<i style="color:#1ab394" class="fa fa-level-up text-navy"></i>
}
else
{
<i style="color:#ed5565" class="fa fa-level-down text-navy"></i>
}
)
</small>
<div class="MsSwitch MsSwitch-update">
<input data-evoldvall="-1" value="-1" type="checkbox" checked="" data-valtrue="-1" data-valfalse="" name="#cur.VLTNAME" class="evCheckBox">
<label for="#cur.VLTNAME"></label>
</div>
<li class="divider" style="margin:0px"></li>
</li>
}
</ul>
Remove the data attribute data-toggle="dropdown" and implement the open/close of the dropdown can do the job.
First handle the click on the link to open/close the dropdown like this :
$('a.dropdown').on('click', function () {
$(this).parent().toggleClass('open');
});
Then wait for the clicks outside of the dropdown to close it like this :
$('body').on('click', function (e) {
if (!$('a.dropdown').is(e.target) && $('a.dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0 ) {
$('a.dropdown').parent().removeClass('open'); } });
I am trying to learn web development and I wrote a simple HTML code like
<div class="r" id="header-status">
<a href="#" class="trigger" style="display: block; padding: 10px;">
<span>
<img src="{{STATIC_URL}}img/online.png">
</span>
ONLINE
<span class="icon-down-dir">
</span>
</a>
<ul class="dd-menu">
<li>
<span><img src="{{STATIC_URL}}img/away.png"></span> AWAY
</li>
<li>
<a href="#">
<span>
<img src="{{STATIC_URL}}img/offline.png">
</span> OFFLINE
</a>
</li>
</ul>
</div>
Now I am trying to write a javascript code that I use Backbone to get what I select in the dropdown list. I mean when I clicked "away", I want to write "away" in the dropdown list.
The simplest solution would be to create a listener for click event. It can be done like this:
Your view:
// ...
View1.prototype.events = {
"click .item": "menuClick"
};
View1.prototype.menuClick = function() {
Backbone.trigger('menuItemSelected');
};
And a consumer on the click event (another view):
View2.prototype.initialize = function() {
this.listenTo(Backbone, 'menuItemSelected', this.selectMenuItem);
};
View2.prototype.selectMenuItem = function() {
console.log('item selected');
}