I've been looking over JStree documents, but I can't seem to get these buttons to function permanently.
Please help, thank you.
JSP:
<div col-xs-12 id="button-row4">
<button class="btn btn-success btn-sm" id="delete_node" onclick="demo_create();">
<i class="glyphicon glyphicon-asterisk"></i>
Create
</button>
<button class="btn btn-warning btn-sm" onclick="demo_rename();">
<i class="glyphicon glyphicon-pencil"></i>
Rename
</button>
<button class="btn btn-danger btn-sm" onclick="demo_delete();">
<i class="glyphicon glyphicon-remove"></i>
Delete
</button>
</div>
<div id="jstree_demo_div"> *tree data list* </div>
Jquery:
$("#jstree_demo_div").jstree({
'core': {
'data': coredata
},
'search': {
"case_insensitive": true,
"show_only_matches" : true
},
'plugins': ["search"]
});
$('#jstree_demo_div').on("select_node.jstree",
function(evt, data){
console.log('id '+ JSON.stringify(data.node.id));
console.log('text '+ JSON.stringify(data.node.text));
console.log('li_attr '+ JSON.stringify(data.node.li_attr));
}
);
Related
When using AngularJS ng-repeat with track by in my web application, when the view is updated the old view is still displayed together with the new view during 1 second or so.
The app displays this panel of alarms (it is a home assistant app). Alarms can be enabled, disabled or removed using the icon buttons:
When the user click the icon button in the middle, the view is updated to this:
But when the view is updated, during half a second or so, it is displayed the old view and the new view together at the same time:
Is this a expected behaviout using ng-repeat with track by?. The code in my html view is:
...
<tr ng-repeat= "alarm in GetAlarmsController.alarms track by alarm.getId()" >
<td class="text-right">
<span ng-switch="alarm.isEnabled()">
<button ng-switch-when="false" type="button" rel="tooltip" disabled class="btn btn-danger btn-icon btn-sm" >
<i class="fa fa-power-off"></i>
</button>
<button ng-switch-when="true" type="button" rel="tooltip" disabled class="btn btn-success btn-icon btn-sm" >
<i class="fa fa-power-off"></i>
</button>
</span>
</td>
<td class="text-right" ng-switch="alarm.isEnabled()">
<button ng-switch-when="false" type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm" ng-click="GetAlarmsController.enableAlarm(true, alarm.getId())">
<i class="fa fa-toggle-off"></i>
</button>
<button ng-switch-when="true" type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm" ng-click="GetAlarmsController.enableAlarm(false, alarm.getId())">
<i class="fa fa-toggle-on"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm" ng-click="GetAlarmsController.deleteAlarm(alarm.getId())">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
...
And, in the JS controller:
...
self.getAlarms = function(){
AlarmAPIService.getAlarms()
.then(function(alarms) {
self.alarms = alarms;
},function() {
self.alarms = [];
})
}
...
const ALARMS_REFRESH_TIME_MS = 5000 ;
var refreshAlarmsInterval = $interval(self.getAlarms, ALARMS_REFRESH_TIME_MS);
...
...
self.enableAlarm = function(enable, alarmId){
enableString = (enable ? 'enabled' : 'disabled') ;
AlarmAPIService.enableAlarm(enable, alarmId)
.then(function() {
SweetAlertService.showSuccessAlert('Alarm ' + enableString + ' with success');
},function() {
SweetAlertService.showErrorAlert('Alarm could not be ' + enableString);
})
}
...
Though self.alarm is assigned to a new array of alarms objects in controller, I have checked that the id of this alarms objects remains the same (only changed its state, specifically the enabled state for the alarm enabled)
I have a table and buttons and all buttons are getting generated with a loop.
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
I want to find which button I click and then change its class.
now in my jquery script
$( document ).on( 'click', '.remove-connetion', function (e) {
e.preventDefault();
$('td').find('.fa fa-trash').closest('button').removeClass('btn-danger');
$('td').find('.fa fa-trash').closest('button').addClass('btn-secondary');
});
it's not changing class.
Thanks for all help
Use this instead inside the callback to get the current clicked button:
$(document).on('click', '.remove-connetion', function(e) {
e.preventDefault();
var clicked = $(this);
setTimeout( function() {
clicked.removeClass('btn-danger');
clicked.addClass('btn-secondary');
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
You can do it like this:
$( document ).on( 'click', '.remove-connetion', function (e) {
e.preventDefault();
e.target.classList.remove('btn-danger');
e.target.classList.add('btn-secondary');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
I want to call a JS function with an onClick attribute attached to a button within a Bootstrap popover like this :
$('[data-toggle="popover"]').popover({
trigger : 'click',
content : '<center><button onClick="quickDelete();return false;" name="dltBtn" class="btn btn-danger btn-xs btn-block"><i class="fa fa-trash"></i> Delete</button><button class="btn btn-warning btn-xs btn-block stsBtn"><i class="fa fa-edit"></i> Status</button></center>'
});
But when I click on the button :
ReferenceError: quickDelete is not defined
I also done that :
$('[data-toggle="popover"]').popover({
trigger : 'click',
content : '<center><button class="btn btn-danger btn-xs btn-block dltBtn"><i class="fa fa-trash"></i> Delete</button><button class="btn btn-warning btn-xs btn-block stsBtn"><i class="fa fa-edit"></i> Status</button></center>'
});
$('.dltBtn').click(function() {
alert('ok');
});
But nothing .. Can you help me maybe ?
Thank you so much !
As it is usually on any admin page I have 3 buttons next to each other. One for detail, one for edit and one for delete, it looks like:
<a n:href="detail $candidate->id">
<button type="button" class="btn btn-success btn-sm">
<i class="glyphicon glyphicon-search" style="margin-right:0px"></i>
</button>
</a>
<a href="#">
<button type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-pencil" style="margin-right:0px"></i>
</button>
</a>
<a n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After that I decide I need to add "Confirm modal" when user press "DELETE" to avoid missclicks
<a
data-nette-confirm="modal"
data-nette-confirm-title="Confirm"
data-nette-confirm-text="Are you sure you want to delete?"
data-nette-confirm-ok-class="btn-danger"
data-nette-confirm-ok-text="Yes"
data-nette-confirm-cancel-class="btn-success"
data-nette-confirm-cancel-text="No"
class="btn btn-danger"
data-ajax="off" // or class="ajax"
n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After this I just get my DELETE button twice that BIG as others, I try to just make it xs but still so much bigger. Is there a way how can I avoid this change?
Try removing:
// or class="ajax"
It overwrites previously defined class="btn btn-danger".
<button id="KullaniciSec" type="button" runat="server" onserverclick="KullaniciSec_OnServerClick" onclick='<%# string.Format("return SecDegerler(\"{0}\");",Eval("id")) %>' class="btn btn-default btn-xs">
<i class="fa fa-folder-open-o fa-2x"></i>Seç </button>
I will call JavaScript code from this code but I have error message and i will open console
<button onclick="return SecDegerler("23"); __doPostBack('ctl00$ContentPlaceHolder1$griduser$cell0_9$TC$KullaniciSec','')" id="ContentPlaceHolder1_griduser_cell0_9_KullaniciSec_0" type="button" class="btn btn-default btn-xs">
<i class="fa fa-folder-open-o fa-2x"></i>Seç</button>
how to will be fix? And How to remove __doPostBack?
If i understood everything like you meant it:
<button onclick='return SecDegerler("23");' id="ContentPlaceHolder1_griduser_cell0_9_KullaniciSec_0" type="button" class="btn btn-default btn-xs">