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.
Related
I have problem regarding on real time count of likes using ajax and laravel, so once the response success the result of response will append to the specific class, however it happen when i click the like button. each class added the result. to understand more well. please see the attached images below.
w
Problem: How to append the result on the specific like button.
illustration:
Html Loop Data:
echo '<a class="nav-link btn_like_each_content" data-attri-like-content="'.$latest_news_data->content_id.'" style="color:#757a91; font-size:13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;" ></i> <label class="total_count_of_like_each_content" >0</label> Likes</a>';
Front End:
$('a.btn_like_each_content').on('click',function(){
var content_id = $(this).attr("data-attri-like-content");
var data = content_id;
$.ajax({
url: "/total_count_like_each_comment",
type:'post',
data:{like_id:data},
success: function( response ) {
if(response == 'Clicked') {
$.ajax({
url:"/retrive_like_count_each_content",
type:'get',
data:{content_id: data},
dataType:'JSON',
success:function(res) {
var total_count_of_specific_content = res[0]['count_like'];
var parseTotalLike = parseInt(total_count_of_specific_content);
$('.total_count_of_like_each_content').text( parseTotalLike );
},
error:function(err) {
alert('Failed To Insert');
}
})
}
}
});
});
Thank you..
Give a unique id to each class
echo '<a class="nav-link btn_like_each_content" id="content_'.$latest_news_data->content_id.'" data-attri-like-content="'.$latest_news_data->content_id.'" style="color:#757a91; font-size:13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;" ></i> <label class="total_count_of_like_each_content" >0</label> Likes</a>';
Now Track which content was clicked by defining a variable
$('a.btn_like_each_content').on('click',function(){
var content_id = $(this).attr("data-attri-like-content");
var actual_content_id = $(this).attr("id");
var data = content_id;
$.ajax({
url: "/total_count_like_each_comment",
type:'post',
data:{like_id:data},
success: function( response ) {
if(response == 'Clicked') {
$.ajax({
url:"/retrive_like_count_each_content",
type:'get',
data:{content_id: data},
dataType:'JSON',
success:function(res) {
var total_count_of_specific_content = res[0]['count_like'];
var parseTotalLike = parseInt(total_count_of_specific_content);
$('#' + actual_content_id).text( parseTotalLike ); //Pass actual content ID here
},
error:function(err) {
alert('Failed To Insert');
}
})
}
}
});
});
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 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
I'm trying to submit a form via AJAX.I send my form to PHP which return error messages if there are via Json.
If there are no error, the code work well. But if not... I cannot insert error message. I don't understand why.
Here is what I would like to do :
function addWishlist(){
var formdata = $("#addwishlist").serializeArray();
$.ajax({
url: "/Shawili/<?= $profile['username'] ?>/addwishlist/",
data: formdata,
type: 'POST',
dataType: 'json',
success: function(json){
if(json.valid == 'ok') {
$('#addwishlist').each(function(){
this.reset();
});
} else {
$.each( json, function( key, value ) {
$('#'+key).before('<div class="row"><div class="col-sm-offset-2 col-sm-5"><span class="label label-danger">' + value + '</span></div></div>');
});
}
}
});
}
This code is working :
function addWishlist(){
var formdata = $("#addwishlist").serializeArray();
$.ajax({
url: "/Shawili/<?= $profile['username'] ?>/addwishlist/",
data: formdata,
type: 'POST',
dataType: 'json',
success: function(json){
if(json.valid == 'ok') {
$('#addwishlist').each(function(){
this.reset();
});
} else {
$.each( json, function( key, value ) {
alert(key +':'+ value);
});
}
}
});
}
This code is'nt :
function addWishlist(){
var formdata = $("#addwishlist").serializeArray();
$.ajax({
url: "/Shawili/<?= $profile['username'] ?>/addwishlist/",
data: formdata,
type: 'POST',
dataType: 'json',
success: function(json){
if(json.valid == 'ok') {
$('#addwishlist').each(function(){
this.reset();
});
} else {
$('#title').html('<p>test</p>')
}
}
});
}
The html form is shown via AJAX because I'm using a tabs system. (Each tab is loaded via AJAX when user click on it) The JS script is located at the end of the layout.
Here is a part of the form :
<div id="title" class="form-group"><label class="col-sm-2 control-label" for="title">Title</label>
<div class="col-sm-4">
<input type="text" placeholder="" name="title" class="form-control"></div></div>
However, when I use Firebug I can see the changes in the html structure but nothing appends in the page.
Here is my tab loading function :
$('#myTabs a').click(function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
var href = this.hash;
var pane = $(this);
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
});
And here is Firebug screenshot :
Try to bind first in another not DOM element, something like this:
$('#otherDivContent').find('#title').html('<p>test</p>');
Where #otherDivContent is a div(or other element) that you have initially on your page.
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.