I've created a simple menu bar using bootstrap. now i want the user to be able to edit the items on the list including the links on the menu, add, delete etc. How do i do this using just frontend code like javascript etc?
Code:
<div id="sidebar">
<ul class="sidebar-nav">
<li class="sidebar-menu">
<a>MENU</a>
</li>
<li>
Link #1
</li>
<li>
Link #2
</li>
<li>
Link #3
</li>
<li>
Link #4
</li>
</ul>
</div>
What you're looking for is possible with vanilla Javascript, jQuery, or a host of other libraries. jQuery is where I'd recommend you start.
You can create new elements by passing html elements as strings to the jQuery function. See the "Creating New Elements" section of this page. Using append and remove as Muzammil mentioned, you can add and remove elements from the DOM.
I've created a small jsFiddle demonstrating some of the functions I'm talking about and how you might use them. This is a limited demo that doesn't include every feature you'd want for a full implementation, but uses some of the pertinent jQuery functions.
HTML
<div id="sidebar">
<ul class="sidebar-nav">
<li class="sidebar-menu">
<a>MENU</a>
</li>
<li>
Link #1
<button class="delete-link">Delete</button>
</li>
<li>
Link #2
<button class="delete-link">Delete</button>
</li>
<li>
Link #3
<button class="delete-link">Delete</button>
</li>
<li>
Link #4
<button class="delete-link">Delete</button>
</li>
</ul>
<div class="input-field">
<label for="link-title">Enter link title</label>
<input type="text" class="link-title" name="link-title" placeholder="link Title" />
</div>
<div class="input-field">
<label for="link-title">Enter link URL</label>
<input type="url" class="link-url" name="link-url" />
</div>
<input type="submit" class="add-button" value="Add" />
</div>
Javascript w/ jQuery
var $addButton = $('.add-button');
var $sidebarMenu = $('.sidebar-nav');
// Add the event handlers
$(document).on('click', '.delete-link', removeLink);
$addButton.on('click', addLink);
function removeLink(e) {
// Remove the parent <li> element of the clicked link
var $link = $(e.currentTarget).closest('li');
$link.remove();
}
function addLink(e) {
e.preventDefault();
var $linkTitle = $('.link-title');
var $linkUrl = $('.link-url');
// Create the new link element using values from text inputs
var $link = $('<li>').append(
$('<a>').attr('href', $linkUrl.val()).text($linkTitle.val()));
// Add a delete button for the link
$link.append($('<button>').addClass('delete-link').text('Delete'));
$sidebarMenu.append($link);
// Reset the text inputs
$linkTitle.val('');
$linkUrl.val('');
}
you can use jquery to achieve this, the following function will help you : append, remove, html, text
Related
I have some divs on a page in this order as below. When someone clicks a link inside the UL .list-links I want to capture the value of
<span class="asa_portlet_title">Title here</span>
in a variable. I've tried using siblings and closest but it always returns empty.
--
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
--
$('[ul.list-links a').click(function() {
var _portletTitle = $(this).siblings('.my_portlet').text();
});
Open to pure javascript method as well. Basically I have a number of divs on the page containing links, and those divs have another div above it where the title exists
Would anyone be able to put together a small working sample?
You are not trying to get the siblings, you are trying to get the sibling of the parent .links of this.
Also you have to prevent the default action of the a element. You can do that by calling preventDefault() on the event object.
$('ul.list-links a').click(function(event) {
event.preventDefault();
var _portletTitle = $(this).closest('.links').prev('.my_portlet').text();
console.log(_portletTitle);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here 2</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name 2
Link name 2
Link name 2
Link name 2
</li>
</ul>
</div>
</div>
There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>
Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});
I am sorry for the title. I don't no how to write the title for the below scenario .
The below question would be easier for an expert. Kindly bear with my English.
I am creating a single page portfolio. In the web site I have top menu,breadcrumb,content & footer.
If i click any menu or submenu the corresponding div is loading properly but I want to change my breadcrumb dynamically based on the menu
Here is the HTML code for top menu
<div id="eyMenuNav">
<ul id="navmenu">
<li class="on">
<a class='link1' href="#first">Article on Technology</a></li>
<li>
<a class="sub" href="#">Success Stories</a>
<ul>
<li>
<a class='link2' href="#second" onclick="onctext();">Customer Quotes</a>
</li>
<li>
<a class='link3' href="#third" onclick="onctext();">CSS, Appreciation - Metrics</a>
</li>
<li>
<a class='link4' href="#four" onclick="onctext();">Lesson Learnt</a>
</li>
</ul>
</li>
<li>
<a class='link5' href="#five">Hexaware Key Contributor</a>
</li>
</ul>
</div>
Here is the HTML code for breadcrumb
<div id="eyBreadCrumb">
<ul>
<li>
<a id="crumb" href="#"><!-- Here I need update my breadcrumb based on the link which i clicked -></a>
</li>
</ul>
<!-- Clearing Element -->
<div style="clear:both;"></div>
<!-- end breadcrumb --> </div>
Here Is the code for javascript which i tried it is working for one menu click but i want for all.
function onctext()
{
document.getElementById("crumb").innerHTML="Success Stories - Customer Quotes";
}
Kindly help me for the above scenario
Note : I am not using jquery only iam working with javascript.
Thanks
Mahadevan
Add this parameter to your onctext() call, so your menu items look like so:
<a class='link3' href="#third" onclick="onctext(this);">CSS, Appreciation - Metrics</a>
And then change your onctext function to retrieve the text from this:
function onctext(elm) {
var text = elm.innerHTML;
document.getElementById("crumb").innerHTML = text;
// set active class
var active = document.getElementsByClassName('active')[0];
if (active) {
active.className = active.className.replace(' active', '');
}
elm.className += ' active';
}
Im working on html form and I have used dynatree for select and multi-select as per requirement of the project. What I need to do is to make a edit form where user gets all the fields filled from database. Which means i need to show a user a dynatree with already selected fields. Here is my example code :
<span id="action" name="action">
<ul>
<li id="DisruptiveAction" class="folder expanded">DisruptiveAction (5)
<ul>
<li id="allow" title="optional">allow
<li id="deny" title="optional">deny
<li id="pass" title="optional" class="selected" >pass
<li id="block" title="optional">block
<li id="redirect" title="optional">redirect
</ul>
</ul>
</span>
Java script :
$("#action").dynatree({
classNames: {
container: "action-container",
checkbox: "dynatree-radio"
},
selectMode: 3,
onSelect: function(select, node) {
var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
return node.data.key;
});
$("#selectedAction").val(selKeys.join(","));
var selRootNodes = node.tree.getSelectedNodes(true);
var selRootKeys = $.map(selRootNodes, function(node){
return node.data.key;
});
}
});
In above mentioned html even though Im using class = "selected" with an li element but its still not showing it as selected on UI. Thanks in advance.
Dynatree creates its own elements when initializing, and throughout the lifetime of the tree. Therefore, the li elements that you are adding are not the li elements of the tree.
Take a look at this documentation, under the section "Node Options". You'll see that you can add a class like so:
<div id="tree">
<ul>
<li id="DisruptiveAction" class="folder expanded">DisruptiveAction (5)
<ul>
<li id="allow" title="optional">allow
<li id="deny" title="optional">deny
<li id="pass" title="optional" data="addClass: 'dynatree-selected'" >pass
<li id="block" title="optional">block
<li id="redirect" title="optional">redirect
</ul>
That is generic code for adding a class. There might a more specific way of specifying that an element is selected, as it is a core dynatree concept, rather than a user-defined class.
High level: How do I replace the text of an element with the value of another inside of a specific parent tag?
Specific: Using the HTML below, I want to replace the html of "span.number" with the value of "input.someOtherNumber". I can have multipul of these list items on a page so it needs to be narrowed down using the parent.
<ul>
<li class="list-item">
<span class="number">0</span>
<input class="someOtherNumber" type="text" value="10" />
</li>
<li class="list-item">
<span class="number">0</span>
<input class="someOtherNumber" type="text" value="99" />
</li>
</ul>
The following JS works to replace the "span.number" value with the value of "inout.someOtherNumber" but it doesn't limit it to the parent. How can I limit it to the parent?
$(".someOtherNumber").keyup(function () {
var value = $(this).val();
$(".number").text(value);
}).keyup();
EDIT:
If the input is wrapped in a span then how do I accomplish it? I am really looks for a solution that checks for a parent because in my real code I have multipul elements that can nested inside of each other so the ".sibling" or ".prev/.next" will not work. The updated HTML would look like this:
<ul>
<li class="list-item">
<span class="number">0</span>
<span><input class="someOtherNumber" type="text" value="10" /></span>
</li>
<li class="list-item">
<span class="number">0</span>
<span><input class="someOtherNumber" type="text" value="99" /></span>
</li>
</ul>
You can see it here: http://jsfiddle.net/8bXbx/
Replace:
$(".number").text(value);
With:
$(this).prev(".number").text(value);
..fredrik
You can use siblings:
$(".someOtherNumber").keyup(function() {
$(this).siblings(".number").text(this.value);
}).keyup();
Example: http://jsfiddle.net/jonathon/j9aaX/
Also, because this is a HTML Input element, you can just access the value using this.value
Just in reply to your comment. In order to get the element based on the common parent, you'd use closest to go up the tree to the parent element and then children to go back down the tree and get the element you want.
$(".someOtherNumber").keyup(function() {
$(this).closest(".list-item").children(".number").text(this.value);
}).keyup();
Example: http://jsfiddle.net/jonathon/j9aaX/1/