22.01.2018, 20:12
|
|
Аспирант
|
|
Регистрация: 01.03.2017
Сообщений: 40
|
|
|
JQuery toggle active/inactive - jQuery
Всем привет,не могу разобраться как правильно сделать toggle свитчер ,сейчас у меня два обработчика на одну кнопку(вкл/выкл идет по /monitor/active/ и /monitor/deactive/ ),не получается внедрить toggle
$(document).ready(function() {
var __getTable_timeout = 0;
function getTable() {
clearTimeout(__getTable_timeout);
$.ajax({
url: "monitor/all",
type: "GET",
dataType: "json",
success: function(response) {
var trHTML = '';
$.each(response, function(key, value) {
trHTML += '<tr><td>' + value.id + '</td><td>'
+ value.url + '</td><td>'
+ value.exceptedHttpResponseCode + '</td><td>'
+ value.status + '</td><td>'
+ value.active + '</td>' + //в поле acitive сейчас приходит true/false , как поменять на (true?'de':'')+'activate' ?
'<td><button data-id="' + value.id + '" + value.id + class="btn btn-danger btn-sm delBtn">Delete</td>' +
'<td><button data-id="' + value.id + '" + value.id + class="btn btn-danger btn-sm activeBtn">active/inactive</td> //.</tr>';
});
$('#mydata').html(trHTML);
__getTable_timeout = setTimeout(getTable, 1000);
}
});
};
$('#mydata').on('click','button.activeBtn',function(){
var id = $(this).data('id');
$.ajax({
url: '/monitor/deactive/' +$(this).data('id'),
type: 'POST',
dataType: "json",
success: getTable
});
});
$('#mydata').on('click','button.activeBtn',function(){
var id = $(this).data('id');
$.ajax({
url: '/monitor/active/' +$(this).data('id'),
type: 'POST',
dataType: "json",
success: getTable
});
});
});
|
|
22.01.2018, 21:57
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,807
|
|
$(document).ready(function() {
var __getTable_timeout = 0;
function getTable() {
clearTimeout(__getTable_timeout);
$.ajax({
url: "monitor/all",
type: "GET",
dataType: "json",
success: function(response) {
var trHTML = '';
$.each(response, function(key, value) {
trHTML += '<tr class="' + ((value.active? 'de' : '') + 'activate') + '"><td>' + value.id + '</td><td>' + value.url + '</td><td>' + value.exceptedHttpResponseCode + '</td><td>' + value.status + '</td><td>' + value.active + '</td>' + '<td><button data-id="' + value.id + '" + value.id + class="btn btn-danger btn-sm delBtn">Delete</td>' + '<td><button data-id="' + value.id + '" + value.id + class="btn btn-danger btn-sm activeBtn">active/inactive</td> //.</tr>';
});
$('#mydata').html(trHTML);
__getTable_timeout = setTimeout(getTable, 1000);
}
});
};
$('#mydata').on('click', 'button.activeBtn', function() {
var $t = $(this);
$.ajax({
url: '/monitor/' + $t.parents('tr').attr('class') + '/' + $t.data('id'),
type: 'POST',
dataType: "json",
success: getTable
});
});
});
Последний раз редактировалось Nexus, 23.01.2018 в 10:06.
|
|
22.01.2018, 22:20
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,144
|
|
+ value.active + '</td>'
+( (value.active ? '' : 'de')+'activate') +'</td>'
|
|
23.01.2018, 00:30
|
|
Аспирант
|
|
Регистрация: 01.03.2017
Сообщений: 40
|
|
рони, Nexus,
$('#mydata').on('click', 'button.activeBtn', function() {
var $t = $(this);
$.ajax({
url: '/monitor/' + $t.parents('tr').attr('class') + '/' + $t.data('id'),
type: 'POST',
dataType: "json",
success: getTable
});
});
к сожалению так не работает, с двумя обработчиками работает,но не получается сделать toggle switcher или просто если active делаю display=true кнопке актив если стаут active=false;тоесть кнопка activeBtn меняется,
$(document).ready(function() {
var __getTable_timeout = 0;
function getTable() {
clearTimeout(__getTable_timeout);
$.ajax({
url: "monitor/all",
type: "GET",
dataType: "json",
success: function(response) {
var trHTML = '';
$.each(response, function(key, value) {
trHTML += '<tr><td>' + value.id + '</td><td>'
+ value.url + '</td><td>'
+ value.exceptedHttpResponseCode + '</td><td>'
+ value.status + '</td><td>'
+( (value.active ? '' : 'in')+'activate') +'</td>' +
'<td><button data-id="' + value.id + '" + value.id + class="btn btn-danger btn-sm delBtn">Delete</td>' +
'<td><button data-id="' + value.id + '" + value.id + class="btn btn-danger btn-sm activeBtn">active/inactive</td></tr>';
});
$('#mydata').html(trHTML);
__getTable_timeout = setTimeout(getTable, 1000);
}
});
};
getTable();
$('#mydata').on('click','button.activeBtn',function(){
var id = $(this).data('id');
$.ajax({
url: '/monitor/deactive/' +$(this).data('id'),
type: 'POST',
dataType: "json",
success: getTable
});
});
$('#mydata').on('click','button.activeBtn',function(){
var id = $(this).data('id');
$.ajax({
url: '/monitor/active/' +$(this).data('id'),
type: 'POST',
dataType: "json",
success: getTable
});
});
});
Последний раз редактировалось weirdjava, 23.01.2018 в 00:38.
|
|
23.01.2018, 10:08
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,807
|
|
|
Исправил ошибку посте №2.
|
|
23.01.2018, 14:11
|
|
Аспирант
|
|
Регистрация: 01.03.2017
Сообщений: 40
|
|
|
Nexus,
Спасибо,прости что достаю,но всеравно проблема та же,сейчас кнопка "active/inactive" ,а как сделать что бы при нажатии,когда value.active = active кнопка становилась inactive и наоборт;что бы надпись и цвет на cамой кнопке менялся?
|
|
23.01.2018, 14:17
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,807
|
|
$(document).ready(function(){
var __getTable_timeout=0;
function getTable(){
clearTimeout(__getTable_timeout);
$.ajax({
url:"monitor/all",
type:"GET",
dataType:"json",
success:function(response){
var trHTML='';
$.each(response,function(key,value){
trHTML+='<tr class="'+((value.active?'de':'')+'activate')+'">' +
'<td>'+value.id+'</td>' +
'<td>'+value.url+'</td>' +
'<td>'+value.exceptedHttpResponseCode+'</td>' +
'<td>'+value.status+'</td>' +
'<td>'+value.active+'</td>' +
'<td><button data-id="'+value.id+'" class="btn btn-danger btn-sm delBtn">Delete</button></td>' +
'<td>' +
'<button data-id="'+value.id+'" class="btn btn-'+(value.active?'danger':'success')+' btn-sm activeBtn">' +
(value.active?'Ina':'A')+'ctive' +
'</button>' +
'</td>' +
'</tr>';
});
$('#mydata').html(trHTML);
__getTable_timeout=setTimeout(getTable,1000);
}
});
};
$('#mydata').on('click','button.activeBtn',function(){
var $t=$(this);
$.ajax({
url:'/monitor/'+$t.parents('tr').attr('class')+'/'+$t.data('id'),
type:'POST',
dataType:"json",
success:getTable
});
});
});
|
|
23.01.2018, 15:37
|
|
Аспирант
|
|
Регистрация: 01.03.2017
Сообщений: 40
|
|
|
Nexus,
Cпасибо!проблема решена!
|
|
|
|
