checkbox is not clickable within nested ng-repeat - javascript

To get an idea of the setup I’m using in my application I set up this simplified example:
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="oConfigEntry in oConfiguration.oConfigEntriesColl">
<ul>{{oConfigEntry.sDescription}}
<li ng-repeat="oConfigSubEntry in oConfigEntry.oConfigSubEntriesColl">{{oConfigSubEntry.sDescription}}
<input type='checkbox' ng-model='oConfigSubEntry.bNoOption' />{{oConfigSubEntry.bNoOption}}
<ul>
<li ng-repeat='oConfigSubSubEntry in oConfigSubEntry.oConfigSubSubEntriesColl'>{{oConfigSubSubEntry.sDescription}}
<input type='number' placeholder='length' ng-model='oConfigSubSubEntry.dLength' />
<input type='number' placeholder='width' ng-model='oConfigSubSubEntry.dWidth' />
<input type='number' placeholder='height' ng-model='oConfigSubSubEntry.dHeight' />
<input type='checkbox' title='opt1' ng-model='oConfigSubSubEntry.bOpt1' />
<input type='checkbox' title='opt2' ng-model='oConfigSubSubEntry.bOpt2' />
</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre ng-bind="oConfiguration | json"></pre>
</div>
see http://jsfiddle.net/ppellegr/4QABQ/
Unfortunately the problem I’m facing in the real application cannot be reproduced in the latter mentioned example.
The problem is that in the real application the checkboxes are not clickable. Clicking the checkboxes do not check them. The checkboxes remain unchecked.
The other way around If the corresponding model is initialized the checkboxes are checked but cannot be unchecked by clicking them.
Even plain checkboxes with no model assigned cannot be checked if they are placed within a nested ng-repeat.
e.g.
<input type="checkbox" />
Has anyone already noticed such a phenomenon?
additional observations:
The first click on the checkbox changes the value of the model.
Subsequent clicks do not change the value. The value of the model remains the
same.
While the first click on the checkbox changes the value of the
model, the checkbox itself remains checked/unchecked depending on the
inital value of the model.

My guess is that another element is positioned in such a way as to cover or overlap the checkbox, and that is preventing you from interacting with it. Assuming you have no inline styles applied to your markup, you can test this easily by disabling CSS in your browser (you may need to install an extension to do this, eg: How to disable CSS in Browser for testing purposes).
If you find that you can click the checkbox like that, you then need to debug your css to find the offending element. Use firebug or chrome developer tools to explore the markup and css.

In the real application the checkbox showing the described behavior is within a list that is enriched by a little jQuery feature making the list collapsible and expandable...
function prepareList() {
$('#ConfigContainer').find('li:has(ul)')
.click(function (event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
}
$(document).ready(function () {
prepareList();
});
see http://jsfiddle.net/ppellegr/cP726/
In this example the described behavior can be reproduced...
The culprit line of code is obvious:
return false;
This stops propagation of event and obviously interferes with the checkbox...
Lesson learnt:
check whether javascript, jQuery or the like are interfering with angularjs...
consider writing an angular directive...

Related

Changing span of several checkboxes with single javascript

I am stuck on this, I am new in HTML/JavaScript code. I am trying to create an HTML code where checkboxes must change an image span (or caption) to "CORREGIDO". So, many images have a reference number on their caption but when the checkbox of that image is clicked, must change the string into "CORREGIDO". My HTML code so far is the following:
<ul class="galeria">
<li><img src="Foto1.jpg" onerror="this.style.display='none'"/> <input class="confirmation" type="checkbox" id="exp1">
<h2><span class="spanTxt []">OT: 4251678</span> <span class="spanTxt [] hidden"> CORREGIDO </span></h2></li>
<li><img src="Foto2.jpg" onerror="this.style.display='none'"/> <input class="confirmation" type="checkbox" id="exp2">
<h2><span class="spanTxt []">OT: 4876852</span> <span class="spanTxt [] hidden"> CORREGIDO </span></h2></li>
</ul>
So far it works for a single picture. But the JavaScript is made for a single checkbox "id". This JavaScript code I took it from this webpage. The script I am using is:
document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay()})
function changeDisplay()
{document.querySelectorAll('.spanTxt').forEach(function(elem) {elem.classList.toggle('hidden')})}
Maybe is not he best approach for this...
The JavaScript code that you're using,
document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay()})
function changeDisplay()
{document.querySelectorAll('.spanTxt').forEach(function(elem) {elem.classList.toggle('hidden')})}
only has one document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay()})
when there should be two.
Here is a fix that includes both of them,
document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay(e)})
document.getElementById('exp2').addEventListener('change', function(e) {changeDisplay(e)})
function changeDisplay(e)
{e.target.parentElement.nextElementSibling.children[1].classList.toggle('hidden')}
I changed the function changeDisplay(e) because the forEach() function was getting in the way when manipulating both of the elements. The code correctly hides the 'CORREGIDO' when the checkbox is unchecked and shows it when the checkbox is checked.

Access and Office add-in checkbox checked status

In my Office add-in I have a checkbox like the following:
<div class="ms-CheckBox">
<input id="inputId" type="checkbox" class="ms-CheckBox-input" />
<label id="labelId" role="checkbox" class="ms-CheckBox-field" aria-checked="false" name="checkboxA" for="inputId>
<span class="ms-Label">Text</span>
</label>
</div>
I want to retrieve through JavaScript its checked status (or its aria-ckecked status, I'm still not getting the differences between them), which I thought was through document.getElementById( 'labelId' ).checked, since it's specified in the documentation that they have an optional checked member, but I only get an undefined with it.
I'm very new to these technologies and have a couple concerns:
Does "optional member" mean that I have to explicitly create it so that it exists? If so, how can I do that?
However the checked member may come to existance, do I have to manually handle its value every time it's clicked on by the user or is it already internally managed and I simply haven't found the way to access it yet?
Maybe I just can't see a mistake I've made on the html code for the checkbox?
Thank you in advance!
You have several sources of documentation on Office UI Fabric depend on framework you are using or about to use. Your choices are:
JavaScript only (no framework)
React
Angular
Form the look up table you would choose JavaScript only link and follow it to find the component you are interested in. Before that I would suggest to read "Get Started using Fabric JS".
Now when you have documentation on checkbox component of vanilla JS implementation, follow the steps to set up your checkbox. This would include:
Confirm that you have references to Fabric's CSS and JavaScript on your page
Copy the HTML from one of the samples below into your page.
<div class="ms-CheckBox">
<input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
<label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
<span class="ms-Label">Checkbox</span>
</label>
</div>
Add the following tag to your page, below the references to Fabric's JS, to instantiate all CheckBox components on the page.
<script type="text/javascript">
var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
for (var i = 0; i < CheckBoxElements.length; i++) {
new fabric['CheckBox'](CheckBoxElements[i]);
}
</script>
To get the status of your checkbox use method getValue() which returns true or false whether the component is checked or not.

Meteorjs edit button and removing from one list adding to other

This is my first project with meteor and I am a heavy newbie. Need help with this. Three questions. I want when I press the edit button to focus on text of a task and I can change it... something like this:
<button class="editItem">Edit</button>
and after that I can edit text of that li, this is the functionality:
editTask: function(id, todoItem){
Tasks.update({_id: id}, {$set: { title:todoItem }});
}
And I'm able to do it if I have input type field, but how to do that with a button (I want to turn ordinary text into input field).
Second question: I have two columns, To Do and Done:
<template name="task">
<li>
<span class="text">{{title}}</span></li>
<button class="completed">Completed</button>
<li><input type="text" name="task" class="edit"></li>
<button class="saveItem">Save</button>
<button class="cancelItem">Cancel</button>
<button class="editItem">Edit</button>
<button class="delete">Delete</button>
<input type="checkbox" checked="{{checked}}" class="completed">
</li>
</template>
<template name="taskDone">
<li>
<div>
<span class="text">{{title}}</span>
</div>
</li>
</template>
How can I hide completed tasks from To Do list and show up in Done list? Maybe display true or false when I press the button Completed but I cannot pin point the exact way.
I tried playing with checked state but that isn't what I need.
First off you have an incorrect number of <li> tags in your example code (you close the first li at the end of the span and then continue onwards as if it still were the same li).
Add a completed field to your collection, set initially to always "no" when you create a task.
What you want to do then, is set the span as contenteditable set to true with an onclick event. Do not use it as an helper as you currently do: use events! Something like here: Meteor - Is there a way to get div contenteditable two way data binding to work?
Or here in simple jquery: HTML5 contentEditable with jQuery
Then when you click save you need to set it as false and update the completed field to say "yes" or something the like.
Then the way you just simple filter the collection differently for the todo tasks and the completed ones: in the template task you will do something like Tasks.find({}, {fields: {"completed": "no"}});
In the template taskDone:
Tasks.find({}, {fields:{"completed": "yes"}});

Can I replace the OpenLayers editing toolbar with normal buttons?

This little OpenLayers.Control.EditingToolbar from is inserted by default:
It's not really evident what these buttons mean. I would like to replace this editing toolbar with a button group (e.g. like the one Twitter Bootstrap offers):
The markup of the editing toolbar currently is this:
<div id="panel" class="olControlEditingToolbar">
<div class="olControlNavigationItemInactive olButton"></div>
<div class="olControlDrawFeaturePointItemActive olButton"></div>
<div class="olControlDrawFeaturePathItemInactive olButton"></div>
<div class="olControlDrawFeaturePolygonItemInactive olButton"></div>
</div>
The images are basic sprites – so I know I could change these. But I can't see how I could get away from these divs, replacing them with buttons. I thought about just creating the button group manually and add click() event listeners to the buttons, triggering OpenLayers' different editing modes. But I couldn't find any documentation on how I could do that.
So, basically, I see these options:
Create button group manually, and trigger the appropriate OpenLayers events through my own JS — but which events do I need to trigger?
Don't use the EditingToolbar, but manually build my toolbar with OpenLayers — how could I do that?
Modify the automatically created editing toolbar by hacking the OpenLayers source (meh…) — is this worth the effort?
The best way is to manually build the control buttons. Based on the Draw Feature Example, you can go ahead and add your controls:
drawControls = {
point: new OpenLayers.Control.DrawFeature(pointLayer,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon),
)
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
Then, add a function that changes the currently used control based on a clicked element:
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
Finally, create the HTML markup yourself. For each element that changes the control, add an onClick handler that calls the toggleControl function. You can also attach the click handler through jQuery, but in essence, this works:
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
<!-- add more elements here, based on which draw modes you added -->
</ul>
You can see this in action here (sign up with a test user, no real e-mail needed) and find the code on GitHub.

jQuery update form element

I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});
Try this:
$('.table input:checkbox').not('div.checker input').uniform()

Categories