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{}
Related
I'm trying to pass some value from button, which is located in HTML document, to the Javascript function, which is located in other document, but it doesn't work. I also tried with getElementById(), but it still didn't work. What's the problem? I would appreciate any help. Thanks in advance!
index.html
<script src="../scripts/appearances_2.js"></script>
/...
<div id="appearances_2_chart">
<div>
<button id="starting" onclick="update_view('starting')">Starting players</button>
<button id="substitution" onclick="update_view('substitution')">Substitution players</button>
</div>
</div>
/...
appearances_2.js
document.addEventListener('DOMContentLoaded', function(e) {
//...
function update_view(id) {
d3.csv("../../data/appearances.csv", function(data) {
data.sort(function(b, a) {
if (id == 'starting')
{
return a.starting - b.starting;
}
else if (id == 'substitution')
{
return a.substitution - b.substitution;
}
});
/...
You can use, event as an object to be passed and access the value as (in order to get the id),
event.target.getAttribute('id')
You need to modify the button code as,
<button id="starting" onclick="update_view(event)">Starting players</button>
and in function,
update_view(event){....}
and access the id using the target object as mentioned in the first code.
Update:-
function update_view(event) {
d3.csv("../../data/appearances.csv", function (data) {
data.sort(function (b, a) {
if (event.target.getAttribute('id') === 'starting') {
return a.starting - b.starting;
}
else if (event.target.getAttribute('id') === 'substitution') {
return a.substitution - b.substitution;
}
})
})
};
<button id="starting" onclick="update_view(event)">Starting players</button>
<button id="substitution" onclick="update_view(event)">Substitution players</button>
I have 3 buttons, which on click would the change the layout to desktop , mobile and tab view. . So I'm calling the same method toggleView(), passing different param for different buttons. So i have written the method to toggle between the 3 classes. It's working fine. I feel there would be a better way to do this in Javascript. I was not able to find out by search
It would be of great help if someone suggest a optimised solution to this
<div class="responsive-buttons">
<button class="btn mb-3" type="button" #click="toggleView('preview-desktop')">Desktop</button>
<button class="btn mb-3" type="button" #click="toggleView('preview-tab')">Tablet</button>
<button class="btn mb-3" type="button" #click="toggleView('preview-mobile')">Mobile</button>
</div>
toggleView(message){
var el = document.querySelector("#previewWrapper");
if(message=='preview-desktop') {
el.classList.remove('preview-tab', 'preview-mobile');
el.classList.add(message);
} else if(message=='preview-tab') {
el.classList.remove('preview-desktop', 'preview-mobile');
el.classList.add(message);
} else if(message=='preview-mobile') {
el.classList.remove('preview-desktop', 'preview-tab');
el.classList.add(message);
}
}
Use class bindings on #previewWrapper like this:
<div id="previewWrapper" :class="previewWrapperClass" />
...
data: {
return {
currentPreviewMode: null
}
},
computed: {
previewWrapperClass () {
if (!this.currentPreviewMode) {
return null
}
return {
[this.currentPreviewMode]: true
}
}
},
methods: {
toggleView(message){
this.currentPreviewMode = message
}
}
See Class and style bindings
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.
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';
}
For example:
<span class="button4">
<button wicket:id="saveButton" type="submit">
<wicket:message key="modalArchiveAccount.button.save" />
</button>
</span>
From java code I set this button to be enabled or disabled, the problem is that I don't know how to change the span className when button is disabled.
Wrap a WebMarkupContainer around your button
add(new WebMarkupContainer("spanId") {
{
add(new Button<String>("saveButton")){
[... button logic...]
};
}
});
<span wicket:id="spanId">
<button wicket:id="saveButton" type="submit">
<wicket:message key="modalArchiveAccount.button.save" />
</button>
</span>
then add a new AttributeModifier("class",...) or AttributeAppender("class",...) to the WebMarkupContainer that uses the same logic as you use to disable the button.
var jSpan = $('#saveButton').parent();
jSpan.removeClass( 'button4' );
jSpan.addlass( someclass );
Here is the example code:
final Button button=new Button("buttn") {
public void onSubmit() {
System.out.println("change....");
setEnabled(false);
};
};
button.add(new AttributeModifier("class", true, new Model<Serializable>() {
#Override
public Serializable getObject() {
if (button.isEnabled())
return "your_enabled_class";
else return "your_disabled_class";
}
}));