i have checkboxes on UI written in Jade, and need to check if it's checked or not, but not sure how to do it,
the jade code is:
input.checkbox#ddp(type='checkbox', style='margin:0px')
the code to check if the checkbox is checked:
events:
'click #ddp': 'checkDesktop'
checkDdp: () ->
if (#el).find('#ddp').checked
alert 'found it 1'
if ($('#ddp').checked)
alert 'found it 2'
if ("input:checkbox[id='ddp']:checked")
alert 'found it 3'
just none of them works, please help, thanks!
try use
$('#ddp')[0].checked; //it is the same that document.getElementById('ddp');
Or the jquery selector
$('#ddp:checked');
or the method
$('#ddp').get(0);
Explanation: Even if you're using a selector by ID, a JQuery Object is used like an array,
Related
react-big-calander - NPM Package
https://github.com/intljusticemission/react-big-calendar/blob/master/examples/demos/selectable.js
onSelectEvent={event => alert(event.distance, 'info')}
in this example, I want to display event.distance as well as event.title in the alert, but alert only accepts one value. How would I be able to display both within same alert?
I've tried to create a new function that runs when the event is triggered though it did not work so I thought about using a modal instead.
Have you tried a template literal:
onSelectEvent={event => alert(`${event.distance} ${event.title}`)}
This jsFiddle hopefully demonstrates the problem I am facing with IE 9. I am roughly doing the same things I am doing in my real app. I have a list of stuff that I loop through using ngRepeat. Each item has a property that can be selected from a dropdown list which is rendered using ngOptions.
The problem in IE seems to be that selecting an item from the list jumps back to the previous item in the list. Chrome does not have this problem, the item selection is perfect. In the example, try selecting the value 'Imported' in the Fiddle - I could simply not do it in IE whereas it works perfectly in Chrome.
The only thing I can think of that could be a problem is the IDs for the dropdown which are currently just plain old string values like '20', '30' and '40'.
The code for ngOptions is
<select class="form-control" id="selProc" data-ng-model="currentPlant.ProcType" data-my-dropdown='Plants' data-ng-options="plant.SpecialProcurement as plant.Description for plant in Plants"></select>
currentPlant here is the looped variable.
The dropdown values are the following array:
var dropDownValues = [{
Plant: '2150',
SpecialProcurement: '20',
Description: 'External'
}, {
Plant: '2150',
SpecialProcurement: '30',
Description: '3rd Party'
}, {
Plant: '2150',
SpecialProcurement: '40',
Description: 'Imported'
}];
These dropdown values get populated in a custom directive's link function. In my real app the list gets fetched using $http.post() and the result is assigned to the dropdown variable using JSON.stringify. Regardless of whether this is good practice or not, the problem still persists. If the problem is because of the JSON.stringify, I would be keen to know. I have tried replacing that with a regular array assignment but the result is the same.
I'm stumped. Please help.
I am new to angular, trying to figure out how the bootstrap alert work in angular
in regular bootstrap something below gives the alert message and it gets closed when clicked on X
<div class="alert alert-success">
×
<strong>Well Done!</strong> Your action is successful.
</div>
All the examples i saw are using AlertCtrl and needed to code the array of alerts and need to code a method to splice the array when close button clicked.
In a Single Page Application, If i want to show only one success alert message when user perform an action
.directive('myCustomAlert', function(){
return {
restrict:'E',
template:'<alert type="success" close="close">{{model-dynamic-msg}}</alert>',
controller:'MyCtrl'
}
since the close attribute present the alert is displaying well. when added
<my-custom-alert></my-custom-alert>
but not able to dismiss the message when clicked on x
here is the plunker : http://plnkr.co/edit/NfEleLc0Q6pzjirb3DCg
am i missing to include any library.
add this on you include script tags:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"</script>
UPDATED:
Like what #Sunil D. mentioned. You don't have to create your own bootstrap alert directive if you are using UI-Bootstrap, it is the purpose of the ui-project. If you look on ui-bootstrap docs about alert, you can see they are using ng-repeat to render alerts and handle remove alerts by just removing the index of the generated alert.
it can be as simple as this, without directive or controller:
<alert type="danger" close="bCloseAlert=1" ng-hide="bCloseAlert">i'm alert</alert>
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page
I am new to ExtJs(using EXT js 4 ), I am trying out simple code.
I have a submit button which is set disabled by default
buttons: [{
text: 'Submit',
id:'submit',
disabled:true
}]
I want to enable the button based on certain conditon.Something like
if (validation_status== "success") {
//Enable the submit button
//Ext.get('submit').dom.disabled = false; -- Not working
//Ext.get('submit').enable(); -- Not working
}
I tried above 2 option. Which did not worked for me.
Can anyone help me out?
Use this:
Ext.getCmp('submit').enable();
When you use Ext.getCmp(), it gives you the component which has a number of component methods to use. If you use Ext.get(), it gives you the element with a number of dom element modification functions. So, its always better to test in firebug console for any of these to know what methods are there.
console.log(Ext.getCmp('submit'));
console.log(Ext.get('submit'));