i have a button with the folowing code
<button type="button" class="btn btn-success btn-xs vote up" id="76" name="up"><span class="glyphicon glyphicon-thumbs-up"></span> Bueno</button>
the button does not work unless i reload the page, and i dont know why. any ideas?
jquery code is at the beginning of the body
jquery
<script type="text/javascript">
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var _this = this;
if(name=='up')
{
$(this).fadeIn(600).html('<span class="glyphicon glyphicon-ok"></span>');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
$( _this ).remove();
$( ".escondido" ).css( "display", "block" );
} });
return false;
});
});
</script>
If the jQuery code is at the beginning of the code (before the HTML) as you state, the DOM would not have been created yet. Try moving the jQuery code to the bottom of the body (after the HTML).
I would assume you're getting an error in the button click event. Have you tried using the live('click') instead? Can you demonstrate the issue using JSFIDDLE?
In the jsFiddle I created, I'm seeing syntax errors - Original Code
If I change the code to Edited jsFiddle:
$(function () {
$(".vote").click(function () {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id=' + id;
var parent = $(this);
var _this = this;
if (name == 'up') {
$(this).fadeIn(600).html('<span class="glyphicon glyphicon-ok"></span>');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function (html) {
parent.html(html);
$(_this).remove();
$(".escondido").css("display", "block");
}
});
return false;
}; // Removed ) from this line
});
}); // Added this whole line
Related
How to toggle popover of the same element? im using ajax so im using this to refer to its specific identity, when ajax success it will toggle its own popover i took this code from w3schools and use it in mine.
HTML
<input type = "text" id = "input_name" class="form-control" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">
jQuery
$(document).on('keyup', '#input_name', function(){
var myname = $(this).val();
if(myname != ''){
$.ajax({
url:"sample.php",
method: "POST",
data:{myname:myname},
dataType:"text",
success:function(data){
$("[data-toggle='popover']").popover();
}
});
}
I want to call its own popover.
https://jsfiddle.net/ws5zojyc/3/
see above link it might help you
$(function() {
$("#input_name").popover({
content: "Enter a text here"
});
});
$("#input_name").keyup(function(event) {
var myname = $(this).val();
// alert(myname);
if (myname != '') {
$.ajax({
url: "/echo/js/?js=" + myname,
method: "POST",
data: {
myname: myname
},
dataType: "text",
success: function(data) {
$('#input_name').data('bs.popover').tip().find(".popover-content").html(data)
}
});
}
});
you can use effect like hover , click etc.
After successing ajax request and saving data in database i have problem when i try to remove active class from button. On click i show spinner and when ajax finish i want remove active class. On click spinner start but never stop. I try to debug it with alert() inside success and i get message. WHat can be problem?
submiteComment: function() {
$("body").on("click", '.submit-comment', function(e) {
e.preventDefault();
var post_id = $(this).data('post');
var comment_text = $(".comment_text");
if($.trim(comment_text).length) {
$(this).addClass('active');
$.ajax({
type: "post",
url: baseurl + '/comment/create',
data: {'post': post_id, 'comment_text': comment_text.val()},
success: function() {
$(this).removeClass('active');
alert("Success");
}
})
}
});
},
And html:
<button type="submit" class="btn btn-xs btn-default submit-comment has-spinner" data-post="<?= $post->post_id;?>">
<span class="spinner"><i class="fa fa-spinner fa-spin"></i></span>
Comment
</button>
Are you sure that the this in $(this).removeClass('active'); is equal to your DOM element when your code is executed? Looks like you need rewrite part of your code as
success: (function() {
$(this).removeClass('active');
alert("Success");
}).bind(this)
you can assign $(this) as a var outside of ajax like
var $this = $(this);
$this.addClass('active');
$.ajax({
type: "post",
url: baseurl + '/comment/create',
data: {'post': post_id, 'comment_text': comment_text.val()},
success: function() {
$this.removeClass('active');
alert("Success");
}
})
I have multiple buttons to toggle status of different projects:
<div class="btn-group btn-toggle project_status" data-project-id="1" data-form="project_status" data-value="1">
<button class="btn btn-default active">ACTIVE</button>
<button class="btn btn-primary">CLOSED</button>
</div>
<div class="btn-group btn-toggle project_status" data-project-id="2" data-form="project_status" data-value="1">
<button class="btn btn-default active">ACTIVE</button>
<button class="btn btn-primary">CLOSED</button>
</div>
I need to toggle the data-value between 1 and 2 when ajax post success.
I have tried this so far but without any luck:
$('.project_status').click(function(){
var project_id = $(this).attr('data-project-id');
var project_status_val = $(this).attr('data-value');
var toggle_status = function(){
$(this).find('.btn').toggleClass('active').toggleClass('btn-primary');
if (project_status_val == '1'){
alert(project_status_val);
$(this).attr('data-value','2');
} else {
alert(project_status_val);
$(this).attr('data-value','1');
}
return false;
};
var dataString = 'project_id=' + project_id + '&project_status=' + project_status_val;
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: toggle_status
});
$('#sidebar-wrapper').load('sidebar.php');
return false;
});
I have got the alert data value correct. I have got the sidebar reload with updated value (only the first click). But I am not able to change the attribute value so that the next click will send the toggled value.
Please help! Thx
$(this) inside the toggle_status method is not your btn. Inside the method the this keyword refers to the object the method belongs to. In this case Window. As a workaround, I have made a self property before the method to store a reference to the selected $('.project_status') object. I have updated the code so it will work.
https://jsfiddle.net/05akxvx3/1/
$('.project_status').click(function(){
var self = $(this);
var project_id = self.attr('data-project-id');
var project_status_val = self.attr('data-value');
var toggle_status = function(){
self.find('.btn').toggleClass('active').toggleClass('btn-primary');
if (project_status_val == '1'){
self.attr('data-value','2');
} else {
self.attr('data-value','1');
}
alert(self.attr('data-value'));
return false;
};
var dataString = 'project_id=' + project_id + '&project_status=' + project_status_val;
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: toggle_status
});
$('#sidebar-wrapper').load('sidebar.php');
return false;
});
You have an extra dash in your $(this).attr() statement.
$(this).attr('data--value','2'); ought to be:
$(this).attr('data-value','2');
my html:
<span id="loading"><img src="ajax-loader.gif" /> Please Wait</span>
#loading{display:none;}
my js:
var Progressajax = false;
$(function() {
$(".commentmoreview").click(function(){
if(Progressajax) return;
Progressajax = true;
var element = $(this);
var id = element.attr("id");
$('#loading').show();
var value = $('.pagecont'+id).val();
var info = 'id='+id+'&pagecont='+value;
$.ajax({
type: "POST",
url: "php-comments/php/loadmorecomments.php",
data: info,
success: function(data){
$('#loading').hide();
Progressajax = false;
value = parseInt(value)+parseInt(5);
$('.pagecont'+id).val(value);
$(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
//$('#loadmorecomments'+id).prepend(data);
}
});
});
});
what is wrong that loading span is not working?
thank you friends!
The best way to show loader image while making ajax calls is using Ajax Global Events
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});
can you change
$('#loading').show();
to
$('#loading').attr("display","block");
and try to use it like this
$.ajax({
type: "POST",
url: "php-comments/php/loadmorecomments.php",
data: info,
beforeSend: function(){
$('#loading').attr("display","block");
},
success: function(data){
$('#loading').attr("display","none");
Progressajax = false;
value = parseInt(value)+parseInt(5);
$('.pagecont'+id).val(value);
$(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
//$('#loadmorecomments'+id).prepend(data);
}
});
First sorry im a big beginner and just experimenting, and I made a similar wall like facebook with oembed.
And would like to add a like, and dislike button too.
I started with the like button, it works, likes, and unlikes too, and the cookie saves the class value perfectly.
My problems is the ajax call, so actually when I click on the like button it overwrites all anchors href val and adds a class to all not on what click.
here is my code
jquery
var cookieLike = "like_"
$('a.like').each(function(){
var id = $(this).attr('href'), cookieLiked = cookieLike + id;
switch($.cookies.get(cookieLiked) ) {
case "unliked":
$(this).removeClass('btn-success');
break;
case "liked":
$(this).addClass('btn-success');
break;
}
}).on('click', function(e){
e.preventDefault()
var likeId = $(this).attr('href');
$.ajax({
url: "<?php echo base_url(); ?>stream/like/" + likeId ,
type: "post",
data: likeId,
dataType: "json",
success: function(like)
{
if(like.likeStatus == "unliked") {
$('a.like').attr('href', likeId).removeClass('btn-success');
$.cookies.set(cookieLike + likeId, 'unliked');
}else if(like.likeStatus == "liked") {
$('a.like').attr('href', likeId).addClass('btn-success');
$.cookies.set(cookieLike + likeId, 'liked');
}
}
});
});
html
<div class="stream-bottom">
Komment
<div class="pull-right like-options">
<i class="icon-thumbs-up" title="tetszik"></i>
<i class="icon-thumbs-down" title="nem tetszik"></i>
</div>
</div>
could please someone point out what i am missing?
Maybe:
.on('click', function (e) {
e.preventDefault();
var button = $(this);
var likeId = button.attr('href');
$.ajax({
url: "<?php echo base_url(); ?>stream/like/" + likeId,
type: "post",
data: likeId,
dataType: "json",
success: function (like) {
if (like.likeStatus == "unliked") {
button.removeClass('btn-success');
$.cookies.set(cookieLike + likeId, 'unliked');
} else if (like.likeStatus == "liked") {
button.addClass('btn-success');
$.cookies.set(cookieLike + likeId, 'liked');
}
}
});
});
Bind the target element (the clicked link) and reference it in the success callback
In the .on('click') callback
var $link = $(this);
In the success callback use
$(this).attr('href', likeId)
instead of
$('a.like').attr('href', likeId)
When you use $("a") or $("a.like") you are referring to the entire set of anchor tags or anchor tags with 'like' as the class name. To specifically use the anchor tag on which you have clicked use $(this) variable.
That will give you the element on which the event got generated and in this case the anchor tag on which you clicked.