i have one question about jquery on click.
This is DEMO from jsfiddle.net
When you click the demo you can see there is a green and yellwo div.
The question is when you click the data-id="1" and change this div class:
<div class="icon-kr icon-globe"></div>
change icon-globe to icon-contacs
and when you click data-id="2" then change:
change icon-globe to icon-lock-1
also same think is for data-id="0"
How can i do that anyone can help me in this regard ?
HTML
<div class="container" id="1">
<div class="icon_ar"><div class="icon-kr icon-globe"></div>1</div>
<div class="pr_type">
<div class="type_s change_pri" data-id="0"><div class="icon-pr icon-globe"></div>1</div>
<div class="type_s change_pri" data-id="1"><div class="icon-pr icon-contacs"></div>2</div>
<div class="type_s change_pri" data-id="2"><div class="icon-pr icon-lock-1"></div>3</div>
</div>
</div>
JS
$('.change_pri').click(function(){
var dataid = $(this).attr('data-id');
var id = $(this).closest('.container').attr('id');
$.ajax({
type: "POST",
url: "chage_number.php",
data: { dataid : dataid, id: id }
}).success(function(result){
alert(result);
});
});
One way to do this is below. I have only done the class changing bit based on click. I am not sure about your ajax code. Let me know if you need further help.
$('.change_pri').click(function(){
var class_name = $(this).find(".icon-pr").attr("class");
class_name = class_name.replace(/icon\-pr\s+/gi, "");
$(this).closest(".container").find(".icon-kr")
.removeClass().addClass("icon-kr " + class_name);
});
Updated fiddle
You need to use .data(), you are not accessing the data correctly.
https://api.jquery.com/jquery.data/
var dataid = $(this).data('id');
You are accessing this data-* attribute incorrectly,
Use this,
$('.change_pri').click(function(){
var dataid = $(this).data('id');
$(this).parent().siblings('.icon_ar').find('div').removeClass("icon-globe icon-contacs icon-lock-1");
if(dataid=="0")
{
$(this).parent().siblings('.icon_ar').find('div').addClass("icon-globe");
}
else if(dataid==1)
{
$(this).parent().siblings('.icon_ar').find('div').addClass("icon-contacs");
}
else
{
$(this).parent().siblings('.icon_ar').find('div').addClass("icon-lock-1");
}
//AJAX CODE.
});
Related
I have spent hours trying to resolve this problem and reviewing other similar StackOverflow questions (1) (2), but none seem to have an answer to my problem..
I can't get past this error: ReferenceError: id is not defined. Alert does not show too.
$("button.btn-tag-cat").click(function(e){
e.preventDefault();
var id = $(this).prop('id');
alert(id);
id.find('span').show();
}, function(){
id.find('span').hide();
});
I have tried the following ways to using the id variable but none work.
$(id).find('span').show();
$("#" + id).find('span').show();
However, when i remove the chunk of code below the alert, the alert pops up with the correct id belonging to the button.
$("button.btn-tag-cat").click(function(e){
e.preventDefault();
var id = $(this).prop('id');
alert(id);
});
View partial:
Button id references a ruby local variable id="<%= name %>"
<% q.categories_name_in.each do |name| %>
<button type="button" class="btn btn-outline-primary btn-lg btn-tag-cat" id="<%= name %>"><%= name %><span class='glyphicon glyphicon-remove'></span></button>
<% end %>
As you've noted, the error is chaining functions in the click listener.
In order to get the id attribute, you can use the jQuery attr function, like:
$("button.btn-tag-cat").click(function(e) {
e.preventDefault();
var id = $(this).attr('id');
alert(id);
$('#' + id).find('span').show();
});
$("button.btn-tag-cat").click(function(e) {
e.preventDefault();
var id = $(this).attr('id');
alert(id);
$('#' + id).find('span').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-tag-cat" id="hallo">Press</button>
Here, in your code I will beautify it to see your mistake:
$("button.btn-tag-cat").click(
function(e) {
e.preventDefault();
var id = $(this).prop('id');
alert(id);
id.find('span').show();
},
function() {
id.find('span').hide();
}
);
notice the second function has
function() {
id.find('span').hide(); // right here
}
but the id is not defined yet
try
function() {
var id = $(this).prop('id'); // this first
id.find('span').hide();
}
Trying to search in Wikipedia by user's input but it doesn't work for some reason. First I thought it could be due to cross domain problem. But .ajax should help with that.
Here is codepen: http://codepen.io/ekilja01/pen/pRerpb
Here is my HTML:
<script src="https://use.fontawesome.com/43f8201759.js">
</script>
<body>
<h2 class="headertext">WIKIPEDIA <br> VIEWER </h2>
<div class="row">
<div class="col-10-md">
<input class="searchRequest blink_me" id="cursor" type="text" placeholder="__"></input>
</div>
<div class="searchIcon col-2-md"> </div>
</div>
<div>
<p class=results></p>
</div>
</body>
Here is my jQuery:
$(document).ready(function() {
var icon = "<i class='fa fa-search fa-2x'></i>";
$('#cursor').on("keydown", function() {
$(this).removeClass("blink_me");
var searchIcon = $(".searchIcon");
searchIcon.empty();
if ($(".searchRequest").val().length > 0) {
searchIcon.append(icon);
}
searchIcon.on("click", function() {
console.log("clicked!");
var search = $(".searchRequest").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + search + "&format=json&callback=?";
$.ajax({
dataType: "jsonp",
url: url,
success: function(data) {
$(".results").html(data[0]);
console.log(data[0]);
}
});
});
});
});
What am doing wrong? Please help.
There's an error in the order of load for your js.
The data object contains the text of the results in the array with index 2, which i assume is what you want to show, change it to
$(".results").html(data[2]);
You can check a modified version of your original code here
http://codepen.io/anon/pen/mRmGXG
I am designing a social network that has timeline and there is like button. I use AJAX to apply the like button on the server side. the problem is that I want to change the number of like for each post immediately after they have liked successfully. Because my elements are generated by for-each, I want to change the number of like for the exact element, I really have a problem with it.I am using thymeleaf.
I am looking for an idea that how to do this.
here is my html code:
<div class="col-sm-4">
<div class="row" >
<div class="col-sm-12">
<img th:if="${tweet.isFavorited()}" src="../static/images/like.png" th:src="#{/images/like.png}" th:class="like-img" th:id="${tweet.getId()}" width="35" height="35"/>
<img th:if="${!tweet.isFavorited()}" src="../static/images/dislike.png" th:src="#{/images/dislike.png}" th:class="like-img" th:id="${tweet.getId()}" width="35" height="35"/>
</div>
</div>
<div class="row">
<div class="col-sm-12" >
<h6 th:if="${tweet.isRetweet()}" th:class="like-count" th:id="${tweet.getId()}" th:text="${tweet.getRetweetedStatus().getFavoriteCount()}"></h6>
<h6 th:if="${!tweet.isRetweet()}" th:class="like-count" th:id="${tweet.getId()}" th:text="${tweet.getFavoriteCount()}"></h6>
</div>
</div>
and it is my script code:
$(function () {
$(".like-img").click(function () {
event.preventDefault();
var $post = $(this);
var toSend = {
"tweetId": this.getAttribute("id")
}
$.ajax({
type : "POST",
contentType: "application/json; charset=utf-8",
url : "like",
data : JSON.stringify(toSend),
dataType : 'json'
}).done(function (data) {
if(data.status == "success") {
if ($($post).attr("src") == "/images/dislike.png") {
$($post).attr('src','/images/like.png');
}
else {
$($post).attr('src','/images/dislike.png');
}
return false;
}
});
});
})
Okay so to make this work you will need to assign unique ids to the like-count elements, something like so:
<h6 th:if="${tweet.isRetweet()}" th:class="like-count" th:id="${tweet.getId()}_like_count" th:text="${tweet.getRetweetedStatus().getFavoriteCount()}"></h6>
Then you can retrieve the current count, increment it, and set the text of the count element. Something like so:
var currentCount = parseInt($('#'+toSend.tweetId+'_like_count').innerHtml)
var newCount = currentCount++;
$('#'+toSend.tweetId+'_like_count').text(newCount);
I'd like to embed radio buttons inside more radio buttons, like this : https://jsfiddle.net/xa6ow1jq/
The fiddle behaves exactly like I want it to, however it seems to be a lot of code just for a 2x3 grid, and I'm planning to have at least a 3xN grid (3 layers of N buttons each, N being at least 10, but many more if the user keeps scrolling)... So I was wondering if anyone knew/could think of more efficient ways to do this. (Using php and/or javascript and/or jquery and/or jquery UI)
(I'm a javascript & jquery noob, currently (self) learning it since yesterday, so I'd appreciate if you could be gentle with technical terms and give as much explications as possible).
Thanks in advance.
The javascript code in the fiddle :
// main buttons
$(document).ready(function(){
$(".ap").click(function(){
$(".a").toggle();
$(".b").hide();
$(".c").hide();
$(".a.l").hide();
});
});
$(document).ready(function(){
$(".bp").click(function(){
$(".a").hide();
$(".b").toggle();
$(".c").hide();
$(".b.l").hide();
});
});
$(document).ready(function(){
$(".cp").click(function(){
$(".a").hide();
$(".b").hide();
$(".c").toggle();
$(".c.l").hide();
});
});
//secondary buttons
//a
$(document).ready(function(){
$(".a1").click(function(){
$(".a1.l").toggle();
$(".a2.l").hide();
$(".a3.l").hide();
});
});
$(document).ready(function(){
$(".a2").click(function(){
$(".a1.l").hide();
$(".a2.l").toggle();
$(".a3.l").hide();
});
});
$(document).ready(function(){
$(".a3").click(function(){
$(".a1.l").hide();
$(".a2.l").hide();
$(".a3.l").toggle();
});
});
//b
$(document).ready(function(){
$(".b1").click(function(){
$(".b1.l").toggle();
$(".b2.l").hide();
$(".b3.l").hide();
});
});
$(document).ready(function(){
$(".b2").click(function(){
$(".b1.l").hide();
$(".b2.l").toggle();
$(".b3.l").hide();
});
});
$(document).ready(function(){
$(".b3").click(function(){
$(".b1.l").hide();
$(".b2.l").hide();
$(".b3.l").toggle();
});
});
//c
$(document).ready(function(){
$(".c1").click(function(){
$(".c1.l").toggle();
$(".c2.l").hide();
$(".c3.l").hide();
});
});
$(document).ready(function(){
$(".c2").click(function(){
$(".c1.l").hide();
$(".c2.l").toggle();
$(".c3.l").hide();
});
});
$(document).ready(function(){
$(".c3").click(function(){
$(".c1.l").hide();
$(".c2.l").hide();
$(".c3.l").toggle();
});
});
Make formation of your html below, so you can deal with 3xN rows, you need to pop into array shown in javascript as // here and your HTML accordingly to achieve,
$(document).ready(function() {
var groups = ['a', 'b', 'c'];
// creating simple js array too use for DOM manipulation
$.each(groups, function(k, id) {
// loops groups array we just created id variable contains a, b and then c
$('#' + id).hide();
// will evaluate as $('#a').hide();
$('#' + id + 'l').hide();
// will evaluate as $('#al').hide();
});
$(".button").click(function() {
// bind click event on DOM items having class name as 'button'
var button_id = $(this).data('id');
/* $(this) will get us which button has been clicked, every
time click event occurs on DOM items having button class
and $(this).data(id); will get us clicked button's data-id attribute */
$('#' + button_id).toggle(); // toogle
var hide = $.grep(groups, function(value) {
// http://api.jquery.com/jquery.grep/
return value != button_id;
});
$.each(hide, function(k, id) {
// http://api.jquery.com/each/
$('#' + id).hide();
});
});
var selector = []; // initialize blank array
$.each(groups, function(k) {
selector.push('.' + groups[k]);
/* push groups array's elements with an extra .
so, .a .b and .c */
});
// join array elements with ,
selector = selector.join(',');
// now selector is string, having value .a,.b,.c
// https://api.jquery.com/category/selectors/
$(selector).click(function() {
// binding an event to the string we just created, follow the link above to get more idea
var button_id = $(this).data('id'); // clicked button's data-id attribute
var class_id = $(this).attr('class'); // clicked button's class
var flag = $('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').is(':visible');
/* for later use, will be true if elements with matched filter conditions is visible in DOM,
false otherwise */
$.each(groups, function(k, id) {
$('#' + id + 'l').children().hide();
// https://api.jquery.com/children/
});
$.each(groups, function(k, id) {
$('#' + id + 'l').hide();
});
$('#' + class_id + 'l').show();
if (flag)
$('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').hide();
else
$('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-id="a">Toggle a</button>
<button class="button" data-id="b">Toggle b</button>
<button class="button" data-id="c">Toggle c</button>
<div id="a">
<div class="a" data-id="1"><button>Toggle a1</button></div>
<div class="a" data-id="2"><button>Toggle a2</button></div>
<div class="a" data-id="3"><button>Toggle a3</button></div>
</div>
<div id="b">
<div class="b" data-id="1"><button>Toggle b1</button></div>
<div class="b" data-id="2"><button>Toggle b2</button></div>
<div class="b" data-id="3"><button>Toggle b3</button></div>
</div>
<div id="c">
<div class="c" data-id="1"><button>Toggle c1</button></div>
<div class="c" data-id="2"><button>Toggle c2</button></div>
<div class="c" data-id="3"><button>Toggle c3</button></div>
</div>
<div id="al">
<div class="al" data-id="1">this is line a1</div>
<div class="al" data-id="2">this is line a2</div>
<div class="al" data-id="3">this is line a3</div>
</div>
<div id="bl">
<div class="bl" data-id="1">this is line b1</div>
<div class="bl" data-id="2">this is line b2</div>
<div class="bl" data-id="3">this is line b3</div>
</div>
<div id="cl">
<div class="cl" data-id="1">this is line c1</div>
<div class="cl" data-id="2">this is line c2</div>
<div class="cl" data-id="3">this is line c3</div>
</div>
I am working on a project, i have two anchors in my View(for voting functionality),
I have a div inside which i am having a <ul> and in 3 <li> i am having anchor for upvote,vote count (in <h2>) and anchor downvote respectively
I want functionality that when i click on any anchor, the h2 html show the vote count, i've implemented the functionality but because of i am unable to do this,
this is my View
<div class="voting" style="margin-left:20px;">
<ul>
<li class="addvote"><a href="#" class="voteAnswer" answerid="#answer.AnswerID" name="Voted">
Up</a></li>
<li class="votecounter">
<h2>
#answer.AnswerLikes.Where(a => a.IsActive == true).Count()</h2>
</li>
<li class="subvote"><a href="#" class="voteAnswer" answerid="#answer.AnswerID" name="Voted">
Down</a></li>
</ul>
</div>
and this is my JS
$(".voteAnswer").click(function (event) {
var answerid = $(this).attr('answerid');
var name = $(this).attr('name');
var id = $(this).attr('id');
var output = $(this);
$.ajax({
url: ResourceAjaxUrl.VoteUnvoteTheAnswer,
type: "POST",
data: JSON.stringify({ answerID: answerid }),
dataType: "html",
contentType: "application/json; charset-utf-8",
success: function (Result) {
alert("Voted");
// $(output).html("Voted (" + Result + ")");
$(output).closest("li").find("h2").html(Result);
$(output).attr("name", "Voted");
},
error: function (msg) {
alert("Unable to Vote answer: " + msg);
}
});
event.preventDefault();
});
i have tried using $(output).closest("li").find(".votecounter") but its still not working
The UL is the closest common ancestor.
Try:
$(output).closest("UL").find(".votecounter")
there are some problems in your code .
here
$(".voteAnswer").click(function (event) {
var id = $(this).attr('id');
there is no attribute id in .voteAnswer
and also how do you differentiate upvote and downvote .
you have to check the anchor's parent li tag's class and check it is upvote or down vote .
also you can select the .votecounter
simply by
$(".votecounter").find("h2").html(Result);
or
$(output).closest("ul").find(".votecounter");