javascript change class of that button and other elements - javascript

I'm trying to buil a like/dislike system for a project and I'm having some trouble in the last part.
The like/dislike system is working, but I would like to have the button change automatically after the click (change class and icon).
This is working based on many rows and each of them is in this way (Like):
<button type='button' onClick='LikeDislike($row_data[id], $row_data[cat],
$row_data[scat], $row_data[sscat], $_SESSION[user_id]);' class='btn btn-info
pull-right btn-xs'><i class='fa fa-thumbs-up'></i></button>
In PHP I already made the code so the button shown at page load is to Like or Dislike based if there is a like or not.
The button to "Dislike" is the same, only changes the class of the button and the class of the :
<button type='button' onClick='LikeDislike($row_data[id], $row_data[cat],
$row_data[scat], $row_data[sscat], $_SESSION[user_id]);' class='btn btn-
danger pull-right btn-xs'><i class='fa fa-thumbs-down'></i></button>
I have this code working to set the like/dislike, but I can't get a way to change the class of the button and the class that's inside that specific button:
$.ajax({
type:'POST',
url:'inc/like.php',
data:'id='+id+'&cat='+cat+'&scat='+scat+'&sscat='+sscat+'&uid='+uid,
success:function(msg){
if(msg == 'err'){
/** alert('Some problem occured, please try again.'); **/
$.toast({
heading: 'Error!',
text: 'There was a problem processing your like.',
position: 'top-right',
loaderBg: '#ff6849',
icon: 'error',
hideAfter: 3500
});
}else{
$.toast({
heading: 'Success!',
text: msg,
position: 'top-right',
loaderBg: '#ff6849',
icon: 'success',
hideAfter: 3500,
});
if(msg == "Like added."){
alert(1);
//** Remove Class btn-info and add class of button to btn-danger.
//* Change class of the <i> element to fa-thumbs-down (inside that button)
}else{
alert(2);
//** Remove Class btn-danger and add class of button to btn-info.
//* Change class of the <i> element to fa-thumbs-up (inside that button)
}
}
}
});
}
So, as I did it in PHP, after some likes/dislikes, some icons in the list are diferente (some are to like and other to dislike)
Please note that should be only effective for that button in specific and not in all buttons of that page.
I can't get an easy way to do it. Anyone could help me?
Thanks.

You can pass your button to your function LikeDislike by using this keyword.
<button type='button'
onClick='LikeDislike(this, $row_data[id], $row_data[cat], $row_data[scat], $row_data[sscat], $_SESSION[user_id]);'
class='btn btn-info pull-right btn-xs'>
<i class='fa fa-thumbs-up'></i>
</button>
after that, where you handle your ajax code, you can do the following :
function(ele, a, b, c, d) {
$.ajax([...],
success: function(){
// Do whatever you like...
ele.find('> i').removeClass('some-class').addClass('other-class');
}
);
}

I did it, hope that would be the best way to do it.
For those that need this information, I left here the answer:
First I set the button an ID and the class another one.
The button ID is set as 1,2,3,4...
The elemento inside the button is set as 1_1, 2_1, 3_1..
Then, in the if statement (commented above):
if(msg == "Like added."){
document.getElementById(id).className = 'btn btn-danger pull-right btn-xs';
document.getElementById(id+"_1").className = 'fa fa-thumbs-down';
}else{
document.getElementById(id).className = 'btn btn-info pull-right btn-xs';
document.getElementById(id+"_1").className = 'fa fa-thumbs-up';
}

Related

Sweet alert doesn't send the Id of my element when submiting the form (ASP.Net core mvc)

I have a question regarding the use of sweet alert on Asp.net core 2.2 mvc. While trying to make an alert to confirm a post event on my controller AdminUsersController, the action returns an error because the requested id is null, but when I don't use sweet alert the event works perfect.
I'm trying to get this to work on Asp.net core 2.2 on Visual studio 2017 community, I've never had any problems before with crud operations regarding Id's. I'm trying to make it work on a table with many results with diffrent Ids.
like so : https://gyazo.com/9366bab83fa4401e1b88b28e27ffa55f
Controller Index Post
//== Action - Index
[Authorize(Roles = SD.Tier3User)]
[HttpPost, ValidateAntiForgeryToken]
public async Task<ActionResult> Index(string id)
{
var UserFromDb = await _db.ApplicationUser.FindAsync(id);
if (UserFromDb.LockoutEnabled == true)
{
//== Lo desactiva (LockOutEnabled = 0)
UserFromDb.LockoutEnabled = false;
}
else
{
//== Lo activa (LockOutEnabled = 1)
UserFromDb.LockoutEnabled = true;
}
await _db.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
HTML button
<td>
#if (User.IsInRole(SD.Tier3User))
{
<a asp-action="Edit" asp-route-id="#item.User.Id" class="btn btn-sm
btn-outline-primary">Editar</a>
== HERE I USE SWEET ALERT ===
#if (item.User.LockoutEnabled)
{
<button type="submit" onclick="CambiarEstado()" asp-route-id="#item.User.Id" class="btn btn-sm btn-outline-warning">Desactivar</button>
}
else
{
<button type="submit" onclick="CambiarEstado()" asp-route-id="#item.User.Id" class="btn btn-sm btn-outline-success">Re-activar</button>
}<a asp-action="Delete" asp-route-id="#item.User.Id" class="btn btn-sm btn-outline-danger"><i class="far fa-trash-alt"></i></a>
}
</td>
JS Sweet alert
<script>
function CambiarEstado() {
document.querySelector('#Estado').addEventListener('submit', function (event) {
var form = this;
event.preventDefault();
swal({
title: "¿Desea cambiar el estado de este usuario?",
icon: "success",
buttons: [
'No',
'Si'
],
}).then(function (isConfirm) {
if (isConfirm) {
swal("¡Estado cambiado!", {
buttons: false,
timer: 500,
}).then(function () {
form.submit();
});
} else {
swal("Acción cancelada", "Recuerde que un usuario desactivado no puede entrar al sistema", "error");
}
})
});
}
</script>
It was suppose to de-activate the user, but first ask if I'm sure of that action, Instead it returns an error since the id the post event got was null.
Thanks in advance!
The asp-route-* attribute is not valid on a button element. That attribute is specifically utilized by the AnchorTagHelper (i.e. for a elements). You need to either use an actual anchor tag, and simply style it as a button:
<a onclick="CambiarEstado()" asp-action="Foo" asp-route-id="#item.User.Id" class="btn btn-sm btn-outline-warning">Desactivar</a>
Or you'll need to create a hidden input within your form tag to hold the id:
<input type="hidden" name="id" value="#item.User.Id" />
Note: it's unclear what's actually happening here, so you should bear in mind that if you use the action link approach, that will not submit anything. It's a regular GET request at that point, and the id will be added as query param to the href that's generated (hence the need to also specify asp-action). More likely than not, you want to stick with the button and add a hidden input.

Html href attribute on the condition

I am new to web-development. I am using angular-js .Here , I have a functionality like , when I click on a button then I get a response from back-end , If that is true then I am changing that button to download button. So, after clicking on this, I am doing an ajax call , with it I get a url, with which I can download a respective file. So, Here I am using a href to download the file.So, My concern is when I click on download that time only it should get that url and also by using href should download a file.
My code is like -
HTML -
<button class="btn btn-labeled btn-info" title= "{{ isAvaliable ? 'Download' : 'click to track'}}" ng-disabled="!file.processed" data-ng-click="performAction(file.attributes.name,file.attributes.cn, isAvaliable)">
<a ng-href="{{url}}" target="_blank" ></a>
<i ng-class="isAvaliable ? 'fa fa-download' : 'glyphicon glyphicon-text-width'" aria-hidden="true"></i>
</button>
controller
$scope.performAction = function(fileName, cn, isAvaliable) {
if(isAvaliable) {
$scope.downloadfile(fileName);
} else {
$scope.moveTofolder(fileName,cn);
}
};
$scope.downloadfile = function(fileName) {
uploadService.downloadtracker(fileName)
.then(function (response) {
$scope.url = response.data;
},
function (error) {
})
.finally(function () {
}
);
};
$scope.moveTofolder = function(fileName,cn) {
// Here also I am calling some service and I am getting response .\
/// Here I am changing the button
$scope.isAvaliable = true;
}
So, Here I am getting some problems, because of the href and the downloadButton . So, How can I call a function on download click and get the URl and at the same time get that url and use it in the href so that It can download the file as well. Href and downloadButton are for the same purpose.Thanks in advance.
Try like below. Don't mingle <a> and <button> because you have button click and also anchor click event.
<a ng-href="{{url}}" ng-click="Download()" ></a>
$scope.Download = function(){
//some other code
window.open($scope.url);
}
<button class="btn btn-labeled btn-info" title= "{{ isAvaliable ? 'Download' : 'click to track'}}" ng-disabled="!file.processed" data-ng-click="performAction(file.attributes.name,file.attributes.cn, isAvaliable);downloadfile
(url)">
<i ng-class="isAvaliable ? 'fa fa-download' : 'glyphicon glyphicon-text-width'" aria-hidden="true"></i>
</button>
You just need to add download attribute in your button
<button class="btn btn-labeled btn-info" title= "{{ isAvaliable ? 'Download' : 'click to track'}}" ng-disabled="!file.processed" data-ng-click="performAction(file.attributes.name,file.attributes.cn, isAvaliable)" ng-click=“downloadfile
({{url}})”>
<!— <a ng-href="{{url}}" target="_blank" ></a> —>
<i ng-class="isAvaliable ? 'fa fa-download' : 'glyphicon glyphicon-text-width'" aria-hidden="true"></i>
</button>
Add $http in controller
$scope.downloadfile = function(fileName) {
//here I am calling a service and I am getting a responce which contains a url.
$scope.$emit('download-start');
$http.get(fileName).then(function(response) {
$scope.$emit('downloaded', response.data);
});
$scope.url = responce.data;
}
Hope this help you

How to skip 10 steps in Bootstrap Tour?

I have a situation, when I have a tour containing eleven steps.
In each step the popup contains "Prev", "Next", "End Tour" buttons.
Instead of using "End Tour" to "skip", I try to skip all the steps and go to the 11th step, but I can't get this to work.
steps: [
{
element: "#mobile",
title: "Mobile Number",
content: "Click ‘Next’ to view the next search field, Click ‘Previous’ to view the previous search field and click ‘skip’ to select End result.",
placement: "right",
backdrop: true,
orphan: true,
template: function (step) {
return "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'><button class='btn btn-xs btn-pink' data-role='prev'>« Prev</button><span> </span><button class='btn btn-xs btn-danger' data-role='next'>Next »</button><span> </span><button class='btn btn-xs btn-success' data-role='skip'>Skip</button> </div> </nav> </div>"
},
onNext: function () {
dir = 'next';
},
onPrev: function () {
},
onShown: function () {
}
}
]
Here i am using data-role as "skip ".and how can i use this as a function like that onShow(), onEnd(), etc.
I tried goTo(i) method also not working.
So, after reading DOCs - there is no method out-of-box to do skip steps.
But we can very easily build our own.
Simple solution (for exactly this scenario with 3 steps):
1.) add button role skip (our, new, role):
<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>
2.) write method for skipping that catches skip button click:
$("body").on("click","button",function(){
if($(this).attr("data-role") === 'skip'){
alert("skip pressed :)");
tour.goTo(2);
}
});
Less simple solution (for all scenarios):
1.) add buttons with role skip (our, new, role):
<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>
...
<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>
...
<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>
...
etc
2.) have a method to:
a.) find all steps
b.) catch clicked button (skip) and it's step number (let's say x))
c.) goTo step x+1
Advanced solution:
extend Jquery plugin and add cross-scenario code to it
you can use this below code to achive this , For me its working
onNext: function(tour){
var curr=parseInt(tour.getState("current_step"));
while(true){
curr+=1;
var step=tour.getStep(curr);
//TODO: check if it's undefined
if($(step.element).length){
tour.goto(curr);
return curr;
}
}
},
onPrevious: function(tour){
var curr=parseInt(tour.getState("current_step"));
while(true){
curr-=1;
var step=tour.getStep(curr);
//TODO: check if it's undefined
if($(step.element).length){
tour.goto(curr);
return curr;
}
}
}

"Twitter like" follow button

I want to create an like button like twitter, i used from this code:
$(document).ready(function(){
$('.btn-follow').on('mouseover', function(e){
if ($(this).hasClass('following')){
$(this).removeClass('btn-primary').addClass('btn-danger').text('UnFollow');
}
})
$('.btn-follow').on('mouseleave',function(e){
if ($(this).hasClass('following')){
$(this).text('Following').removeClass('btn-danger').addClass('btn-primary');
}
})
$('.btn-follow').on('click',function(e){
$(this).toggleClass('following follow')
if ($(this).hasClass('follow')){
alert('unfollow')
$(this).text('Follow').removeClass('btn-danger')
}else{
alert('follow')
$(this).text('Following')
}
})
});
and in html i have this:
<button class="btn btn-primary btn-follow following">Following</button>
<br />
<br />
<button class="btn btn-follow follow">Follow</button>
but i think it 's very dirty code and have some bugs. How i can fix this code?
Ok the main problem was css specificity not letting btn-danger class take any effect over btn-success.
So as a solution i used an empty class that i made up. To track if the button is being followed or not.
Whenever i added btn-success i added following class. And through class, as you did, i was able to track the state of the button.
With bootstrap!!!
http://jsfiddle.net/vjZRA/1/
Without bootstrap:http://jsfiddle.net/vjZRA/
Code Below:
var btn = $('.btn');
btn.click(h);
btn.hover(hin, hout);
function hin() {
if (btn.hasClass('follow')) {
btn.text('Stop Following');
btn.removeClass('btn-success');
btn.addClass('btn-danger');
} else {
btn.addClass('btn-primary');
}
}
function hout() {
if (btn.hasClass('follow')) {
btn.text('Following');
btn.removeClass('btn-danger');
btn.addClass('btn-success follow');
}
btn.removeClass('btn-primary');
}
function h() {
if (btn.hasClass('follow')) {
btn.removeClass('btn-success follow');
btn.text('Follow');
btn.removeClass('btn-danger');
} else {
btn.text('Following');
btn.addClass('btn-success follow');
}
}
and then add css in style tag or wherever you want
.follow{}

twitter bootstrap modal -- how to pass data to callback function

is there a way to pass additional data to bootstrap modal function callback?
for example, lets say my link that causes the modal to open has an extra attribute in it with a bit of useful data in it, how could I reference that attr?
HTML
<span listid="80" href="#editTaskList" data-toggle="modal" class="btn btn-mini right"><i class="icon-edit"></i> Edit Task List</span>
JS
$('#editTaskList').on('show', function () {
// get the source of the click, and then get the data i need.
});
Could this work for you ?
<span listid="80" href="#editTaskList" data-toggle="datamodal" class="btn btn-mini right"><i class="icon-edit"></i> Edit Task List</span>
var $editTaskList = $('#editTaskList');
$('body').on('click.modal.data-api', '[data-toggle="datamodal"]', function (e) {
var $this = $(this);
$editTaskList.data('anyAttr',$this.data('anyAttr'));
$editTaskList.modal('show');
e.preventDefault();
})
$editTaskList.on('show', function () {
var myData = $editTaskList.data('anyAttr');
});
I know that this is an old question, but this is the first thing i've found on google. So, I want to put some important information here...
You NEED to put your callback function binded on events BEFORE you call the modal, for example:
$('#modal').on('shown', function(){
// Do something when the modal is loaded
});
$("#modal").modal();
This is very important and helped me a lot, so, here it is...
Like this -
<span id="modal_opener" data-extrastuff="stuff" listid="80" href="#editTaskList" data-toggle="modal" class="btn btn-mini right"><i class="icon-edit"></i> Edit Task List</span>
$('#modal_opener').click(function() {
var stuff_i_want = $(this).attr('data-extrastuff');
});

Categories

Resources