Change class jquery - javascript

Good evening, I can not run this code: in practice, you add the new class but you do not delete the old one. It's a simple system of like and dislike
$query2 = mysql_query("SELECT * FROM totlike WHERE id_user_like = $id_user AND id_post_like = ". $risultato['id']."");
if (mysql_num_rows($query2) == 1) {
$like = '<i class="glyphicon glyphicon-heart" id="'. $risultato['id'] .'"></i>';
} else {
$like = '<i class="glyphicon glyphicon-heart-empty" id="'. $risultato['id'] .'"></i>';
}
var elem = $('#' + id_post).attr('class');
if (elem == "glyphicon glyphicon-heart") {
$('#' + id_post).removeClass('glyphicon glyphicon-heart').addClass('glyphicon glyphicon-heart-empty');
} else {
$('#' + id_post).removeClass('glyphicon glyphicon-heart-empty').addClass('glyphicon glyphicon-heart');
}

I have cleaned up your code a little, but generally it seems fine. I am not sure if this will help but the snippet below shows it working fine.
function toggleHeart(id_post) {
var element = $('#' + id_post);
if (element.hasClass("glyphicon-heart")) {
element.removeClass('glyphicon-heart');
element.addClass('glyphicon-heart-empty');
} else {
element.removeClass('glyphicon-heart-empty');
element.addClass('glyphicon-heart');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<p>Click on the button or heart to toggle</p>
<i class="glyphicon glyphicon-heart" id="1" onClick="toggleHeart(1)">1</i>
<button onClick="toggleHeart(1)">Toggle</button>
<br />
<i class="glyphicon glyphicon-heart-empty" id="2" onClick="toggleHeart(2)">2</i>
<button onClick="toggleHeart(2)">Toggle</button>

Related

Unable to target and remove appended element in jquery or Javascript

Here's what I'm trying to do here -
Take input from a form field and append the data in a div option-badges
The badges have X button that I'm using to remove the items clicked if needed
What's the problem?
With the code I've written, I'm unable to remove the said appended badge while I'm easily able to remove the badges which were there already.
Here's the code. Please help me with this. Thanking in anticipation.
$(document).ready(function() {
//take input data from first input field and display comma separated in second field
let dataList = [];
let dataString = "";
$("#addData").on('click', function() {
let data = $("#firstInput").val();
let dataBadge = '<span class="badge badge-secondary" style="margin-left: 5px;">' +
data + ' &nbsp <i id="newBadge" class="fa-solid fa-xmark" ></i></span>';
$('.option-badges').append(dataBadge);
$("#firstInput").val('');
})
//remove badge on clicking x
$(".option-badges > span > i").on("click", function() {
$(this).parent().remove();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<div class="option-badges">
<span class="badge badge-secondary" style="margin-left: 5px;">data <i class="fa-solid fa-xmark"></i></span>
<span class="badge badge-secondary" style="margin-left: 5px;">data <i class="fa-solid fa-xmark"></i></span>
</div>
-
Try with on off click like
$(document).off('click', '.option-badges > span > i');
$(document).on('click', '.option-badges > span > i', function () {
$(this).parent().remove();
})
$(document).ready(function() {
//take input data from first input field and display comma separated in second field
let dataList = [];
let dataString = "";
$("#addData").on('click', function() {
let data = $("#firstInput").val();
let dataBadge = '<span class="badge badge-secondary" style="margin-left: 5px;">' +
data + ' &nbsp <i id="newBadge" class="fa-solid fa-xmark" ></i></span>';
$('.option-badges').append(dataBadge);
$("#firstInput").val('');
})
//remove badge on clicking x
$(document).off('click', '.option-badges > span > i');
$(document).on('click', '.option-badges > span > i', function () {
$(this).parent().remove();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<div class="option-badges">
<span class="badge badge-secondary" style="margin-left: 5px;">data <i class="fa-solid fa-xmark"></i></span>
<span class="badge badge-secondary" style="margin-left: 5px;">data <i class="fa-solid fa-xmark"></i></span>
</div>
<input id="firstInput" type text />
<a id="addData">ADD </a>

Sweet Alert 2, custom buttons

I have added 2 custom buttons in my sweet alert, but the functions for them aren't working, can u advise me a fix for that?
//Custom buttons
html: '<button id="prev-btn" class="btn btn-warning"><i class="fas fa-angle-left fa-3x"></i></button>' +
'<button id="next-btn" class="btn btn-primary"><i class="fas fa-angle-right fa-3x"></i></button>',
//Functions for them
$("#next-btn").on("click", function() {
if(currentMarineKnotIndex+1 == receivedArray.length){
currentMarineKnotIndex = 0;
}
else{
currentMarineKnotIndex++;
}
$(".nautical-knot-title").html(receivedArray[currentMarineKnotIndex].nameLV+"<br>");
$(".nautical-knot-desc").html(receivedArray[currentMarineKnotIndex].descriptionLV);
$("#modal-header-div").css("background", "url('../Images/uploads/"+receivedArray[currentMarineKnotIndex].Image+"')");
});
$("#prev-btn").on("click", function() {
if(currentMarineKnotIndex == 0){
currentMarineKnotIndex = receivedArray.length - 1;
}else{
currentMarineKnotIndex--;
}
$(".nautical-knot-title").html(receivedArray[currentMarineKnotIndex].nameLV+"<br>");
$(".nautical-knot-desc").html(receivedArray[currentMarineKnotIndex].descriptionLV);
$("#modal-header-div").css("background", "url('../Images/uploads/"+receivedArray[currentMarineKnotIndex].Image+"')");
This link (official site) might be useful -> https://sweetalert.js.org/guides/

How to delete current list item with the same class name after clicking on close icon

I want to delete current list item after clicking on its close icon. I'm adding list items using javascript function. Please check the image and my code for reference. Thanks in advance.
code is below:
function addServices() {
var service = $.trim($('#services').val());
if (service != "") {
var value = $('<li class="service-name" onclick="removeServices()">' + service + '<i class="fa fa-times" aria-hidden="true" alt="Remove icon" title="Remove"></i></li>');
$('.products-list').append(value).children(':last').hide().fadeIn(400);
}
};
function removeServices() {
$(this).parent().remove();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="heading">3. Buisness Products & Services* - <span class="subheading">Enter all services that your business offers (Max
80 charcters)</span></h4>
<input type="text" id="services" name="tagline" maxlength="60" required="" placeholder="Enter products and services your business
offers." />
<input type='button' value='+ Add' id='add' onclick="addServices()" class="add" />
<ul class="products-list col-xs-12" id='list'></ul>
<div class="both"></div>
Thank you all genius coder on this community. Take a bow!!!
1.Remove unnecessary spaces you have in your <li> adding code.
2.You need to pass this in you onclick function and then it will work:-
function addServices() {
var service = $.trim($('#services').val());
if (service != "") {
//remove unnecessary spaces from below line
var value = $('<li class="service-name" onclick="removeServices(this)">' +service + '<i class="fa fa-times" aria-hidden="true" alt="Remove icon" title="Remove"></i></li>');
$('.products-list').append(value).children(':last').hide().fadeIn(400);
}
};
function removeServices(ele) {
$(ele).parent().remove(); // or try $(ele).remove();
};
Working snippet:-
function addServices() {
var service = $.trim($('#services').val());
if (service != "") {
var value = $('<li class="service-name" onclick="removeServices(this)">' +service + '<i class="fa fa-times" aria-hidden="true" alt="Remove icon" title="Remove"></i></li>');
$('.products-list').append(value).children(':last').hide().fadeIn(400);
}
};
function removeServices(ele) {
$(ele).parent().remove(); // or try $(ele).remove();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<h4 class="heading">3. Buisness Products & Services* - <span class="subheading">Enter all services that your business offers (Max
80 charcters)</span></h4>
<input type="text" id="services" name="tagline" maxlength="60" required="" placeholder="Enter products and services your business
offers." />
<input type='button' value='+ Add' id='add' onclick="addServices()" class="add" />
<ul class="products-list col-xs-12" id='list'></ul>
<div class="both"></div>
Attach the listener properly using Javascript instead of as an HTML attribute (which is as bad as eval). Also, your current HTML string needs to be fixed - the last line needs a starting ' (and the second to last line needs a ' +)
You might just use a template literal instead if you find the quotes hard to deal with:
function addServices() {
var service = $.trim($('#services').val());
if (service === "") return;
var li = $(`<li class="service-name">
${service}<i class="fa fa-times" aria-hidden="true"
alt="Remove icon" title="Remove"></i></li>`);
li.click(removeServices);
$('.products-list').append(li).children(':last').hide().fadeIn(400);
}
function removeServices() {
$(this).parent().remove();
}
I played a little with your code.
Here is a working snippet with comments:
function addServices() {
var service = $.trim($('#services').val());
if (service != "") {
var value = $('<li class="service-name">' + service + '<i class="fa fa-times" aria-hidden="true" alt="Remove icon" title="Remove"></i></li>');
$('.products-list').append(value).children(':last').hide().fadeIn(400);
}
};
// This one is better than using the inline "onclick"
// #list is a fix element, These are dynamic ones
// ↓ ↓
$('#list').on('click', '.service-name .fa-times', function() {
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<h4 class="heading">3. Buisness Products & Services* - <span class="subheading">Enter all services that your business offers (Max
80 charcters)</span></h4>
<input type="text" id="services" name="tagline" maxlength="60" required="" placeholder="Enter products and services your business
offers." />
<input type='button' value='+ Add' id='add' onclick="addServices()" class="add" />
<ul class="products-list col-xs-12" id='list'></ul>
<div class="both"></div>
Hope it helps.
just use on
$('#services').on('click','li i',function()
$(this).parent().remove();
});
that is very simple, but you can i see the below link and change your code.
JsFiddle Sample
i hope help
// find elements
var $list = $(".list");
var $list_item = $(".list-item i");
$list_item.each(function() {
$(this).on('click', function() {
$(this).parent().remove();
});
});
Instead of using removeServices() try using .click()
$('.service-name i').click(function(){
$(this).parent().remove();
});

Change icons in children after click button in parent - ajax

I have a sortable list with topics and pages.
I want to do the follow thing: when I click in a eye button in a topic, the topic and your page children will be hide, changing their view icons. That is, if you change the icon on a topic, it changes for all your children.
For example:
Currently I can change the view icons in topic only. How do I do to change the view icon in pages children too?
PHP code:
//printing topic
if($list[$i]->getObj()->getSTop_view() == 0){
$view_icon = '<img id="imgEye" title="Hide" name="hide" src="/imgs/icons/ic_hide_16x16.png">';
} else {
$view_icon = '<img id="imgEye" title="Show" name="show" src="/imgs/icones/ic_show_16x16.png">';
}
$html.= '<li class="dd-item dd3-item" data-id="'.$list[$i]->getObj()->getTop_id().'" view-value="'.$list[$i]->getObj()->getTop_view().'">
<div class="dd-handle dd3-handle">'.$list[$i]->getObj()->getTop_name().'</div>
<div class="dd3-content">
<span style="font-weight: bold; font-size: 14px;">'.$list[$i]->getObj()->getTop_name().'</span>
<span class="span-right">
<a id="UpdateViewTop" name="'.$list[$i]->getObj()->getTop_id().'">'.$view_icon.'</a>
<a class="edit-button" href="..."><img title="Edit" src="/imgs/icons/ic_edit_16x16.png"></a>
<a class="del-button"><img title="Delete" src="/imgs/icons/ic_delete_16x16.png"></a>
</span>
</div>';
for($j=($i+1);$j < $cont_int;$j++) { //if the topic have children
//printing pages
if($list[$j]->getObj()->getPag_view() == 0) {
$view_icon = '<img id="imgEye" title="Hide" name="hide" src="/imgs/icons/ic_hide_16x16.png">';
} else {
$view_icon = '<img id="imgEye" title="Show" name="show" src="/imgs/icones/ic_show_16x16.png">';
}
$html.= '<ol id="stopitem" class="dd-list">
<li id="pagstopitem" class="dd-item dd3-item" data-id="'.$list[$j]->getObj()->getPag_id().'" view-value="'.$list[$j]->getObj()->getPag_view().'">
<div class="dd-handle dd3-handle"></div>
<div class="dd3-content">
<span>'.$list[$j]->getObj()->getPag_name().'</span>
<span class="span-right">
<a id="UpdateViewPag" name="'.$list[$j]->getObj()->getPag_id().'">'.$view_icon.'</a>
<a class="edit-button" href="..."><img title="Edit" src="/imgs/icons/ic_edit_16x16.png"></a>
<a class="delpagstop-button" name="'.$list[$j]->getObj()->getPag_id().'"><img title="Delete" src="/imgs/icons/ic_delete_16x16.png"></a>
</span>
</div>
</li>';
...
}
Javascript and Ajax code:
$(document).on('click', '#UpdateViewTop', function(e){
e.preventDefault();
var uid = $(this).attr('name');
var img = $(this).children('#imgEye');
var eye = img.attr('name');
var myData_IC_hide = '/imgs/icons/ic_hide_16x16.png';
var myData_IC_show = '/imgs/icons/ic_show_16x16.png';
$.ajax({
url: '/admin/control/ajax/view.php',
type: 'POST',
data: {id: uid},
dataType: 'html',
success: function() {
//here change the icon in topic when I click in eye button
//that's works fine!
//Now I want to change the icon in page children
if(eye == "show") {
img.attr('src', myData_IC_hide);
img.attr('name', 'hide');
img.attr('title', 'Hide');
} else if(eye == "hide") {
img.attr('src', myData_IC_show);
img.attr('name', 'show');
img.attr('title', 'Show');
}
}
});
});

Validation in bootstrap timepicker-angular js

I'm using angular-ui bootstrap time picker.
Code for start time
<button type="button" class="btn btn-default dropdown-toggle" ng-click="openStartTime($event, 'time')">
<i class="glyphicon glyphicon-time"></i>
</button>
<div dropdown is-open="timepickerOpened1">
<span class="dropdown-menu" role="menu">
<timepicker ng-model="meetingInfo.startTime" ng-change="changed()" show-meridian="true"></timepicker>
</span>
</div>
and end time
<button type="button" class="btn btn-default dropdown-toggle" ng-click="openEndTime($event, 'time')">
<i class="glyphicon glyphicon-time"></i>
</button>
<div dropdown is-open="timepickerOpened2">
<span class="timePickerCls dropdown-menu" role="menu">
<timepicker ng-model="meetingInfo.endTime" ng-change="changed()" show-meridian="true"></timepicker>
</span>
</div>
My Controller Code..
$scope.openStartTime = function ($event, type) {
$event.preventDefault();
$event.stopPropagation();
if (type == 'date') {
$scope.datepickerOpened1 = true;
$scope.timepickerOpened1 = false;
} else if (type == 'time') {
$scope.timepickerOpened1 = true;
$scope.datepickerOpened2 = false;
}
};
$scope.openEndTime = function ($event, type) {
$event.preventDefault();
$event.stopPropagation();
if (type == 'date') {
$scope.datepickerOpened2 = true;
$scope.timepickerOpened2 = false;
} else if (type == 'time') {
$scope.timepickerOpened2 = true;
$scope.datepickerOpened2 = false;
}
};
$scope.format = 'hh:mm a';
My Question :How can I add validation to check whether the End Time entered is always greater than the Start Time?Thanks
You can add statement to change function like
if ($scope.end <= $scope.start) {
$scope.end = new Date($scope.start.getTime() + $scope.mstep * 60000)
}
Please see demo below
var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function($scope, $log) {
$scope.hstep = 1;
$scope.mstep = 1;
$scope.start = new Date();
$scope.end = new Date();
$scope.changed = function() {
if ($scope.end <= $scope.start) {
$scope.end = new Date($scope.start.getTime() + $scope.mstep * 60000)
}
$log.log('Event starts at: ' + $scope.start);
$log.log('Event finish at: ' + $scope.end);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
Start:
<timepicker ng-model="start" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
End:
<timepicker ng-model="end" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
</span>
</div>
</div>

Categories