To remove check box from angular-ivh-treeview - javascript

I have created one tree using angular-ivh-treeview with objects, by following the code given at : https://github.com/iVantage/angular-ivh-treeview
The running sample of the tree is : http://jsbin.com/rigepe/1
The tree preparing fine with my data, but my requirement is to allow user to select one object at one time, so need to remove check boxes from the given code.
I have tried by making duplicate js with removing span of check box but its not working, also we have used both js with and without check boxes, but is also not working
What will be best way to remove check boxes from the tree.

You can remove them in your HTML inside a <div> like this:
<ng-controller="MyCtrl as fancy">
<div ivh-treeview="fancy.bag"
ivh-treeview-use-checkboxes="false">
</div>

Related

How can I manipulate HTML elements which are added during the runtime?

The code im working on first makes a call to the database. Through this call, it is determined wether there are available workstations in the office or not.
If there are available workstations, "option" elements are added to a "select" element. This is achieved via jquery:
$('#idofselectelement').html(data)
Where "data" represents the markup to be inserted into the "select" element.
Now, my problem is that I'm trying to implement some code which checks wether your "favorite workstation" is available in the selected timeframe and then automatically preselects the respective workstation from the dropdownmenu in the "select" element. Everything is working so far, except for the selection of the workstation from the dropdown menu :/
The part of
I'm rather new to programming with javascript and the HTML DOM, so I'm not sure whether the fact that the options im trying to chose from are added during the runtime?
The code I've tried to manipulate the dropdown menu with is like this:
$('#idofselectelement').val(favoriteworkstation);
However, as I said, this doesn't work.
I've also already tried to output (console.log) the select element's length property right after the code which adds the markup with the available options has run.
But according to the output Im getting, the length is zero Oo
However, the dropdownmenu is definitely being created AND I can indeed manipulate it, but unfortunately not in the way I want to.
If I add an onclick event which sets the value of the respective select element, then the value in the select field indeed changes to the value specified in the event handler.
So I wonder why I can't have the favorite workstation preselected after the timeframe was chosen...
EDIT:
For further insight into the problem, I'm adding a bit more code here.
This is what the HTML Select element looks like BEFORE anything is added during the runtime:
<label for="#sitz">Sitz Nr.</label>
<select type="text" class="form-control" id="sitz" name="sitz" value="">
the markup which is added during the runtime
<option>workstationvalue</option>
<option>workstationvalue</option>
//and so on, depending on the situation...
This is a timing issue.
The js trying to find the element is faster than the actual add of the element to DOM.
Can you describe what you want to do? You might be able to do that before adding the element to DOM.
Editing before adding to DOM is possible if you convert your String to an jQuery object
var $jqueryObject = $(data);
$jqueryObject.find('.classYouSearch').val(value);
$('.whereToAd').html($jqueryObject);

multiple items in container (drag and drop)

I have a problem with my drag and drop code. I want to put multiple items (dragged) in three containers (drop), and then return all values put in the container (thanks to alert(droppableResults);). But this code only returns the first item dropped, and I went all of the items.
Thanks for your help!
I put code in jsfiddle.net for better understanding.
https://jsfiddle.net/vbyyvt2o/1/
The problem you have is that the data-r="" value gets overwritten with every drop.
This results in only the last drop being recorded (not the first one).
Since .dropAble can contain several elements that approach doesn't work. You might however remove the data-r attribute from .dropAble and add a data-q attribute to your.dragAble elements. Then you could modify your JS accordingly and it should work fine.
Here is a modified fiddle:
https://jsfiddle.net/vbyyvt2o/4/

Adding inputs dynamically not working properly

I have an issue trying to add inputs dynamically.
I have this:
<button ng-click="operations.push({})">Add input</button>
which is adding inputs:
<div ng-repeat="operation in operations">
<input ng-model="operation.detailText">
</div>
I have 2 columns, where I have exactly the same due to an ng-repeat, so, in both columns I have the adding inputs button, When I click on the button Add input, I am adding the inputs to both columns, which I don't want, I need to add those inputs only to the current input where I am working on.
I made a video for you to see what I am talking about.
Here the video
Check here for the code: jsbin
I think you are using the same array for both the ng-repeat that is
operations
So when you click on add button it adds an empty object to operations and both the ng-repeat is affected since they both are using the same array.
You need to have different arrays, something like operations and operations1 and then write the second ng-repeat with operations1

Sortable.js is not working: List items are not draggable

I have tried a very simple example with Sortable.js: Two lists: One is currently empty, and will store item copies from the other list (which is static).
I tried defining pull and put values for each list, defining the same group name, but it does not work. In fact the static elements from the filled list are not draggable at all.
I have written the example at JSbin. Since I am new to JS, I accept all kind of constructive comments.
BTW: any way of drawing the bootstrap list borders even when empty?
I have edited the jsbin and did the following corrections
Replaced the sortable.js with
<script src="//cdn.jsdelivr.net/sortable/latest/Sortable.min.js"></s‌​cript>
You were accessing the ids with _ (instances_list, main_list) whereas the ids were having an -
For the appending to work I had to add one item by default to instances-list than keeping it empty
JSBin

Updating script to run for newly created table rows with incremented IDs

I've got a table with the type ahead feature from jQuery UI. It is working with my form when there is only 1 table row (initial view). There's a button to allow the user to create additional table rows as required which also increments the IDs for the text inputs and select menus.
There's another script that inserts a matching value into the select menu based on the typeahead selection. Both of these work fine for the first row, but stop working for any additional Rows that are created.
I've setup a sample JSFiddle:
http://jsfiddle.net/fmdataweb/hxzME/1/
I think I understand why they only work for the first row - they are tied to these IDs: #lastYearSelect1 and #nextYearSelect1 - but I'm not sure how to change them so they then work with #lastYearSelect2, #nextYearSelect2, #lastYearSelect3, #nextYearSelect3 and so on.
There's a few problems with the script.
Firstly you're right, you need to setup all the scaffolding again after you clone the row, the clone method will not copy the functionality, just the html elements.
To find the right element you can use the JQuery ^= selector, which matches the start of an attribute name, on the on the clone object to find the right child input to turn into an autocomplete field. You can do the same trick in the function to change the dropdown to the correct function.
Finally a lot of your code and variables were in the wrong scope to be accessible properly. I've moved a lot of the vars around so they're accessible, mainly into the global scope. When you're a bit more experienced you won't want to do this, but for now this is fine.
I also created a new function setDropDown, but this code is almost identical to what was there before.
Here is a working version of your code:
http://jsfiddle.net/hxzME/3/
Add classes to elements and use class selectors when binding an event handlers.

Categories

Resources