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
Every time I select a value in dropdown a new set of code is generating for its values.
<div class='k-li-stscroller'>
<ui id='prdtype_listbox>
<li data-offset-index="0">Test0</li>
<li data-offset-index="0">Test1</li>
<li data-offset-index="0">Test2</li>
<li data-offset-index="0">Test3</li>
<li data-offset-index="0">Test4</li>
</ui>
</div>
<div class='k-li-stscroller'>
<ui id='prdtype_listbox>
<li data-offset-index="0">Test0</li>
<li data-offset-index="0">Test1</li>
<li data-offset-index="0">Test2</li>
<li data-offset-index="0">Test3</li>
<li data-offset-index="0">Test4</li>
</ui>
</div>
ReadOnlyCollection<IWebElement> prd = driver.FindElements(By.XPath("//div[#class='k-list-scroller']/ul[#id='prdtype_listbox']"));
ReadOnlyCollection<IWebElement> ListVal=prd[0].FindElements(By.XPath("*"));
foreach (var lst in ListVal)
{
string liText = lst.text();
if (liText.Equals("Test1"))
{
lst.click();
break;
}
}
It select the Test1 but then selects the default value once again.
How to set the selected value.
In the case of a dropdown that isn't a SELECT, you generally want to click the dropdown once to open it then click the desired element that has been exposed in the list. I would write a function for something like this so it can be reused.
public void SetValue(string value)
{
IWebElement dropdown = Driver.FindElement(By.Id("prdtype_listbox"));
dropdown.Click();
dropdown.FindElement(By.XPath($".//li[.='{value}']")).Click();
}
I have done coding the first part HTML then JavaScript/JQuery. Now I want to surround the final common list with a UL need to be done using JavaScript/JQuery. So the final common list will be surrounded by two UL instead of one. Eg
Final Outcome
<ul id="CommonLister">
<ul> <!--Need to add this-->
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
</ul><!--Need to add this-->
</ul>
Current Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="listOne">
<li class="columnItem">John</li><!--will be removed and put under CommonLister-->
<li class="columnItem">James</li>
<li class="columnItem">Mary</li><!--will be removed and put under CommonLister-->
</ul>
<ul id="listTwo">
<li class="columnItem">John</li><!--will be removed and put under CommonLister-->
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li><!--will be removed and put under CommonLister-->
</ul>
<ul id="CommonLister">
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
</ul>
</div>
$(function() {
$('#run-code').on('click', function(e) {
e.preventDefault();
//What were you doing? nope.
var currentItems = {}; //Blank object
var $mergeColumn = $('#CommonLister'); //Common list reference
$('.columnItem').each(function(i, el) {
var $el = $(el); //Notation I use to differentiate between the regular HTML Element and jQuery element
if (!currentItems.hasOwnProperty($el.html())) {
//Has this name come up before? if not, create it.
currentItems[$el.html()] = []; //Make it equal to a brand spanking new array
}
currentItems[$el.html()].push(el);
//Add the item to the array
});
$.each(currentItems, function(name, data) {
//Loop through each name. We don't actually use the name variable because we don't care what someone's name is
if (data.length > 1) {
//Do we have more than 1 element in our array? time to move some stuff
$.each(data, function(i, el) {
var $el = $(el); //See note above
if (i == 0) {
//If this is the first element, let's just go ahead and move it to the merge column ul
$el.appendTo($mergeColumn);
} else {
$el.remove(); //Otherwise, we've already got this element so delete this one.
} //end if/else
}); //end $.each(data)
} //end if data.length >1
}); //end $.each(currentItems)
}); //end $.on()
}); //end $(
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="run-code" class="btn btn-success">Click Me</button>
<h4>List 1</h4>
<ul id="listOne">
<li class="columnItem">John</li>
<!--will be removed and put under CommonLister-->
<li class="columnItem">James</li>
<li class="columnItem">Mary</li>
<!--will be removed and put under CommonLister-->
</ul>
<h4>List 2</h4>
<ul id="listTwo">
<li class="columnItem">John</li>
<!--will be removed and put under CommonLister-->
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li>
<!--will be removed and put under CommonLister-->
</ul>
<h4>Common List</h4>
<ul id="CommonLister">
<!--Extra ul will be added here-->
</ul>
It's invalid nesting a ul directly in a ul like this but if you have to, you could use jquery wrapAll:
$( "li" ).wrapAll( "<ul></ul>" );
See fiddle: https://jsfiddle.net/9xLt6d9f/
I agree with charlietfl that it seems strange to do it this way. However, to answer your question, the best way to force this improperly formatted HTML code would be hardcode it into your original file. Try the following code for the end of your file:
<h4>Common List</h4>
<ul id="CommonLister">
<ul id="CommonListerSub">
<!--Extra ul will be added here-->
</ul>
</ul>
Then, simply change one line of your code:
var $mergeColumn = $('#CommonListerSub'); //Common list reference
This will force it to list the list items under the nested ul tags.
I hope this is an acceptable solution. If for some reason it doesn't work, please comment as to what additional limitations you have, and perhaps share the link of the page that is giving you the required template or format specifications.
I have a nested set of objects I would like to sort. The first example, directly below, is my prototype / test. It works nicely. The outer groups sort, and the inner groups sort. the inner groups are locked inside - cant be moved outside. Just exactly like i want...
<div id="example5">
<ul class="table">
<li class="group" style="width:300px;">Group 1
<ul style="padding:0px;">
<li class="field">Group 2</li>
<li class="field">Group 3</li>
</ul>
</li>
<li class="group">Group 2</li>
<li class="group">Group 3</li>
<li class="group">Group 4</li>
</ul>
</div>
And
$("#example5 ul").sortable({
});
This is the same structure I am trying to impart in my program. Everything seems the same to me, just with some added complexity. Clearly, I am breaking it somehow. The outer groups sort, while the inner ones do not.
I think its important to note that in the previous example, the script and html are in the same file. In the second example, below, the html is dynamically created with createElement() function
<div id="logtable">
<ul id="ultable" class="table ui-sortable">
<li id="" class="groupcontainer" style="width:auto; margin:2px;">
<ul>
<li class="fieldcontainer">
<div class="fieldname"></div>
<div class="fieldgroup"></div>
<div class="fieldname"></div>
<div class="fieldname"></div>
<div class="fieldname"></div>
</li>
</ul>
</li>
<li id="a" class="groupcontainer" style="margin: 2px;"></li>
<li class="groupcontainer" style="margin: 2px;"></li>
</ul>
</div>
Javascript:
$(function() {
var fieldstart;
var fieldend;
$("#logtable ul").sortable({
start: function(event, ui) {
fieldstart = ui.item.index();
},
update: function(event, ui) {
fieldend = ui.item.index();
var fieldcount = jsonstring.tracelog.fields.length;
var fieldobjects = jsonstring.tracelog.fields;
var placed = false;
jsonstring.tracelog.fields.move(fieldstart, fieldend);
writejson();
}
});
});
Following up, this site... http://www.trace-log.com/sortworks.php is copied from the "inspect element" output. it works exactly like i want. http://www.trace-log.com is the site i generated it from. basically, add a value to the field name, it will generate a new field. entering a value in the first text box will initiate the "grouping" of fields. cant understand why this isn't working.
so as it stands, it works if i statically recreate the page, but doesnt work correctly on the dynamically created page. could it be somehow with the way the sortable function is being called?
In the second example the field container is an li and the field names are div tags. The first example you had the field container as an ul tag and the fields as li. I think this might be your issue.
see fiddle here http://jsfiddle.net/4Mk4K/3/
You can try adding a custom class to the elements you want to be sortable and then use that class in the items option of sortable.
Demo:http://jsfiddle.net/lotusgodkk/GCu2D/161/
HTML:
<div id="logtable">
<ul id="ultable" class="table ui-sortable">
<li id="" class="groupcontainer item" style="width:auto; margin:2px;">Z
<ul>
<li class="fieldcontainer">
<div class="fieldname item">A</div>
<div class="fieldgroup item">B</div>
<div class="fieldname item">C</div>
<div class="fieldname item">D</div>
<div class="fieldname item">E</div>
</li>
</ul>
</li>
<li id="a" class="groupcontainer item" style="margin: 2px;">F</li>
<li class="groupcontainer item" style="margin: 2px;">G</li>
</ul>
</div>
JS:
$(function () {
var fieldstart;
var fieldend;
$("#logtable ul").sortable({
items: '.item',//Custom class of items which needs to be sorted.
start: function (event, ui) {
fieldstart = ui.item.index();
},
});
});
After much fiddling and fussing, relocating the sortable function into the function that creates the DOM objects solved the problem. I think the way it was originally structured, some DOM objects were created AFTER the sortable function - and sortable didn't know they existed.
So yes, there was something else structurally wrong with my code. Thanks everyone for the help.
I have a list of photographs being generated like the following snippet. Basically this would render a table like structure, with each photo being like a cell in this table. The ID of each photo like for example 1D means that the photo is in the first row of the table and in the 4th/D column.
<ul>
<li class="row">
<ul>
<li class="photo" id="photo-1A">1A</li>
<li class="photo" id="photo-1B">1B</li>
<li class="photo" id="photo-1C">1C</li>
<li class="photo" id="photo-1D">1D</li>
<li class="photo" id="photo-2A">2A</li>
<li class="photo" id="photo-2B">2B</li>
<li class="photo" id="photo-2C">2C</li>
<li class="photo" id="photo-2D">2D</li>
<li class="photo" id="photo-3A">3A</li>
<li class="photo" id="photo-3B">3B</li>
<li class="photo" id="photo-3C">3C</li>
<li class="photo" id="photo-3D">3D</li>
</ul>
</li>
</ul>
I have a JSON which includes whether the photo is available or not. Basically the JSON string is something along these lines:
[{"row":1,"position":"A","available":true},{"row":1,"position":"B","available":false},{"row":1,"position":"C","available":false},{"row":1,"position":"D","available":false},{"row":2,"position":"A","available":true},{"row":2,"position":"B","available":false},{"row":2,"position":"C","available":false},{"row":2,"position":"D","available":false},{"row":3,"position":"A","available":true},{"row":3,"position":"B","available":false},{"row":3,"position":"C","available":false},{"row":3,"position":"D","available":false}]
Now basically what I need to do is to parse this JSON string and when any of these photos have "available:true" in the JSON string, I add a class photo-available in the HTML. I am new to angular and I am not sure if there is an easy way to assign a class to the available photos. Would be glad if someone can tell me what to use or how to do it.
Edit: Angular Code is this:
<ul class="table-rows">
<li class="photo-row" ng:repeat="photo in photos" ng:class="'photo-' + photo.row + photo.position">
<ul class="table-photos">
<li class="photo photo-available" ng:class="selectedOrNot(photo)" ng:init="photo.selected = false" ng:click="photo.selected = !photo.selected">
<div class="photo-number">{{photo.row + photo.position}}</div>
</li>
</ul>
</li>
<div class="clear"></div>
Update3
The reason you are unable to restore previous selections is that you are overwriting the photo's selected property with ng-init:
ng:init="photo.selected = false"
ng-class="{'selected': photo.selected, 'available': photo.available}"
When you combine these two, the 'selected' class will never be added because photo.selected has been hardcoded to false. You just need to remove ng-init, and the previous selection will trigger ng-class to add the correct class.
Here is a working demo: http://plnkr.co/tVdhRilaFfcn55h6mogu
Original answer
If the list of photos is not the same array as the list of available photos, you can use a directive to add the class.
app.directive('availablePhoto', function($filter) {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attr) {
var id = attr.id
var regex = /photo-(.)(.)/g;
var match = regex.exec(id);
var row = match[1]
var position = match[2]
var photo = $filter('filter')(scope.photos, {row:row, position:position}, false)
console.log(photo);
if (photo[0].available) {
element.addClass('available');
}
}
}
});
Then attach it to each list item like this:
<li class="photo" id="photo-1A" available-photo>1A</li>
Here is a demo: http://plnkr.co/WJCmLf2M39fcUnvOPyNA
Update1
Based on your update, I see that there is just one array populating the list, and it contains the available flag. Therefore, you don't need a custom directive - ngClass will work. Here it is integrated into your code sample:
<ul class="table-rows">
<li class="photo-row" ng:repeat="photo in photos" ng:class="'photo-' + photo.row + photo.position">
<ul class="table-photos">
<li class="photo" ng-class="{'available': photo.available}" ng:init="photo.selected = false" ng:click="photo.selected = !photo.selected">
<div class="photo-number">{{photo.row + photo.position}}
</div>
</li>
</ul>
</li>
<div class="clear"></div>
</ul>
I have update the plunker to demonstrate this.
http://plnkr.co/WJCmLf2M39fcUnvOPyNA
Update2
Since you need ngClass to add multiple classes, use it like this:
ng-class="{'selected': photo.selected, 'available': photo.available}"
Demonstration of selected + available: http://plnkr.co/WJCmLf2M39fcUnvOPyNA
Here's a plnkr with an example of how to solve your problem. You need to
make use of both the ng-repeat and the ng-class:
http://plnkr.co/edit/hk68qp4yhEjcvOkzmIuL?p=preview
As you can see, I also added some filters for your photos, they will come handy if you need to just show the available ones (for some reason).
Here's the documentation for angular $filter service
I think this meets all your requirements:
$scope.photos = JSON.parse('[{"row":1,"position":"A","available":true},{"row":1,"position":"B","available":false},{"row":1,"position":"C","available":false},{"row":1,"position":"D","available":false},{"row":2,"position":"A","available":true},{"row":2,"position":"B","available":false},{"row":2,"position":"C","available":false},{"row":2,"position":"D","available":false},{"row":3,"position":"A","available":true},{"row":3,"position":"B","available":false},{"row":3,"position":"C","available":false},{"row":3,"position":"D","available":false}]');
and then you can just use ng-repeat to build the list:
<ul>
<li class="row">
<ul>
<li ng-repeat="photo in photos" class="photo" ng-class="{'photo-available': photo.available}" id="photo-{{photo.row}}{{photo.position}}">{{photo.row}}{{photo.position}}</li>
</ul>
</li>
</ul>
So what we are doing is we are taking our photo array, and for every one (ng-repeat="photo in photos") we are assigning that specific item to the variable photo. Then, if photo.available is true, we assign the class photo-available (ng-class="{'photo-available': photo.available}").
Then, we can simply interpolate the id and text based off the properties row and position ({{photo.row}}{{photo.position}}). You could also have done that like this {{photo.row + photo.position}} but that could cause issues if they were both numbers.
http://plnkr.co/edit/hBkoyHVtIwF60MKDF84j?p=preview