I have the following setup, which makes the popover appear on the second hover event, since it is not yet been created. The data is called via ajax, and I need to somehow create the .popover() before this, yet activate it successfully afterwards.
$('.entry').on('mouseenter', function () {
var achievementId = $(this).attr('data-entry-achievement-id');
var entry = this;
var entryData = function(response) {
var result = response;
$(entry).popover({
html: true,
placement: 'top',
trigger: 'hover',
title: result.data.definition,
content: result.data.achieved_at
}, "show");
}
$.ajax({
type: "GET",
url: 'href here..',
datatype: "json",
success: entryData,
});
});
How can I achieve this?
This works, but then, due to server response or whatever reason, I get the following error:
$('.entry').popover();
$('.entry').hover( function () {
var achievementId = $(this).attr('data-entry-achievement-id');
var entry = this;
var entryData = function(response) {
var result = response;
$(entry).popover('destroy').popover({
html: true,
placement: 'top',
trigger: 'hover',
title: result.data.definition,
content: result.data.achieved_at
});
$(entry).popover("show");
}
$.ajax({
type: "GET",
url: '/bettleverse/get-achievement-info-for-hover/?achievement=' + achievementId,
datatype: "json",
success: entryData,
});
});
// Error shown in console:
tooltip.js:380 Uncaught TypeError: Cannot read property 'trigger' of null
at HTMLDivElement.complete (tooltip.js:380)
at HTMLDivElement.fn (jquery.js:4496)
at HTMLDivElement.handle (transition.js:54)
at HTMLDivElement.dispatch (jquery.js:4737)
at HTMLDivElement.elemData.handle (jquery.js:4549)
at Object.trigger (jquery.js:7807)
at HTMLDivElement.<anonymous> (jquery.js:7875)
at Function.each (jquery.js:365)
at jQuery.fn.init.each (jquery.js:137)
at jQuery.fn.init.trigger (jquery.js:7874)
You can add some loading message or spinner when popover is hover so that message will be shown and when response is recieve from ajax you can replace it .
Demo Code :
$('.entry').popover({
title: "Coming..",
placement: 'bottom',
trigger: 'hover',
html: true,
content: function() {
return "<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>"
}
});
$('.entry').on('mouseenter', function() {
var achievementId = $(this).attr('data-entry-achievement-id');
var entry = this;
/* var entryData = function(response) {
var result = response;*/
setTimeout(function() { //this is just for demo to show effect after ajax success
//get div popover classs..find then popover content
$(entry).siblings(".popover:first").find(".popover-title").text("Done ..") //for title change
var popover = $(entry).siblings(".popover:first").find(".popover-content");
popover.text("YOUR NEW TEXT"); //for body change
}, 1000)
/*}
/*$.ajax({
type: "GET",
url: '',
success: entryData,
});*/
});
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<a data-entry-achievement-id="ss" class="entry" title="">Testlink1</a>
Related
I am trying to disable a button to prevent multiple click in a synchronous ajax call. My code is as follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <!-- optional font -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var test = false;
$(document).on('click', '#test', function(e){
console.log(test);
if (test) {
return;
}
test = true;
ajax_call();
});
function ajax_call() {
$.ajax({
contentType: 'application/json;charset=utf-8',
type: 'POST',
url: 'https://validdomain',
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
data: JSON.stringify({'test' : 'test'}),
success: function(data, textStatus, jqXHR) {
console.log(data);test =false;
copypaste();
test = false;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
test = false;
},
async: false,
});
}
function copypaste() {
var tempInput = document.createElement("textarea");
tempInput.setAttribute('id', 'copyid');
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = 'Text Copied';
console.log(tempInput);
document.body.appendChild(tempInput);
tempInput.select();
var result = document.execCommand('copy');
document.body.removeChild(tempInput);
if (result) {
alert('copied');
}
else {
alert('not copied');
}
return result;
}
});
</script>
</head>
<body>
<input type="submit" id="test"/>
</body>
</html>
But my button is not disabled on the second click(I am getting alert twice.). If I make the ajax request as an asynchronous call then button is disabled. Is there any way that I can disable my button during a synchronous call?
Thanks in advance!
I added the necessary statement but you could put it to another place for example inside the ajax callback function. Also I changed async: false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <!-- optional font -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var test = false;
$(document).on('click', '#test', function(e){
console.log(test);
if (test) {
return;
}
test = true;
ajax_call();
//Try adding this statement you can add wherever you want
$(document).off('click', '#test');
});
function ajax_call() {
$.ajax({
contentType: 'application/json;charset=utf-8',
type: 'POST',
url: 'https://validdomain',
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
data: JSON.stringify({'test' : 'test'}),
success: function(data, textStatus, jqXHR) {
console.log(data);test =false;
copypaste();
test = false;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
test = false;
},
async: true,
});
}
function copypaste() {
var tempInput = document.createElement("textarea");
tempInput.setAttribute('id', 'copyid');
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = 'Text Copied';
console.log(tempInput);
document.body.appendChild(tempInput);
tempInput.select();
var result = document.execCommand('copy');
document.body.removeChild(tempInput);
if (result) {
alert('copied');
}
else {
alert('not copied');
}
return result;
}
});
</script>
</head>
<body>
<input type="submit" id="test"/>
</body>
</html>
Why not simply disable the button and re-enable it instead of declaring a global variable like $("#test").attr('disabled','disabled') ? Variable scopes can get tricky in javascript.
You happen to be looking for something simple like this?
PS: You have to enter the details for the ajax call yourself.
html
<button id="button">Button</button>
jQuery/js
$("#button").click(function(){
console.log("clicked");
// deactivate button
$("#button").attr("disabled", true);
ajaxCall();
});
function ajaxCall(){
$.ajax({
//...ajax call here,
complete: function(){
// reactivate button after you receive any reply from ajax
$("#button").attr("disabled", false);
}
})
}
This question is related to this one.
I'm using Tooltipster JQuery plugin to show tooltips on my website like:
HTML
<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>
JS
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
content: 'Loading...',
functionBefore: function(instance, helper){
var $origin = $(helper.origin);
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
}
});
},
interactive:true,
contentAsHTML:true,
maxWidth:250
});
});
</script>
Anyway this doesn't work on Ajax dynamic content, basically I load via Ajax new content with a function:
function exploreTracks(start, filter) {
$('#load-more').html('<div class="load_more" style="height: 232px;"><div class="preloader-loadmore preloader-center"></div></div>');
if(filter == '') {
q = '';
} else {
q = '&filter='+filter;
}
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_explore.php",
data: "start="+start+q+"&token_id="+token_id,
cache: false,
success: function(html) {
$('#load-more').remove();
// Append the new comment to the div id
$('#main-content').append(html);
// Reload the timeago plugin
jQuery("div.timeago").timeago();
// Update the Track Information
updateTrackInfo(nowPlaying);
}
});
}
New contents on mouse hover don't show any tooltip, from console I can't see any error or warning and on network load_profilecard.php is not called.
I have placed the script (same JS as above) directly on my content page, so why the tooltip is not shown on mouse hover?
My solution
As suggested in comments by Evan I used delegation option for this purpose.
$(function() {
$('body').on('mouseenter', '.tooltip:not(.tooltipstered)', function(){
$(this)
.tooltipster({
content: 'Loading...',
functionBefore: function(instance, helper){
var $origin = $(helper.origin);
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
}
});
},
interactive:true,
contentAsHTML:true,
maxWidth:250 })
.tooltipster('open');
});
});
I'm trying to open a jquery-ui dialog when the response of checklatestnews.php meets the condition rec != "0". I created a test checklatestnews.php file where the response is always "1", yet a jquery-ui dialog will still not open. Any help would be appreciated.
<div id="dialog">
<script type="text/javascript">
$("#dialog").dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
</script>
<script type="text/javascript">
var check_latestnews;
function CheckForLatestNewsNow() {
var str="chklatestnews=true";
jQuery.ajax({
type: "POST",
url: "checklatestnews.php",
data: str,
cache: false,
success: function(res){
if(res != "0") {
$("#dialog").html(response).dialog("open");
}
}
});
}
check_latestnews = setInterval(CheckForLatestNewsNow, 5000);
</script>
$.post("checklatesnews.php", {action: "check"}, function(response) {
.....
$("#dialog").dialog("open");
});
I can't seem to update the popovers contents with Ajax result.
ASP.Net (MVC4):
public ActionResult GetEmployeeDetails(string employeeId)
{
var contract = UnitOfWork.ContractRepository.ContractBusinessManager.GetContract(int.Parse(employeeId), DateTime.Now);
return PartialView("_EmployeeDetails", contract);
}
Html:
<a data-toggle-popup-employee-id="#evaluation.EmployeeId" >#evaluation.Employee.FullName.ToTitle()</a>
Javascript:
$(document).ready(function () {
$('[data-toggle-popup-employee-id]').popover(
{
html: true,
placement: 'top',
title: 'Title',
container: 'body',
content: function () {
//$(this).off('hover');
var employeeId = $(this).data('toggle-popup-employee-id');
$.ajax({
async: false,
url: '#Url.Action("GetEmployeeDetails", "Evaluation")',
data: { employeeId: employeeId },
success: function (result) {
return result;
//var html = result;
//$(this).contents.html = result;
},
error: function (xhr) {
alert(xhr.responseText);
}
})
},
trigger: 'hover'
});
});
The call works fine and gives back the partial result as html but the popovers content is still empty...
UPDATE:
It appears that every time I hover over the link, 10 [Object, HTMLAnchorElement]
are added directly to the $('[data-toggle-popup-employee-id]').
Each object has InnerText and InnerHtml set to the employees name...?
I'd personally do something like the following...
$(document).ready(function () {
$('[data-toggle-popup-employee-id]').on({
mouseenter: function () {
var originator = $(this);
var employeeId = originator.data('toggle-popup-employee-id');
$.get('#Url.Action("GetEmployeeDetails", "Evaluation")', { employeeId: employeeId }, function (data) {
originator.popover({
html: true,
placement: 'top',
title: 'Title',
container: 'body',
content: data,
}).popover('show');
})
},
mouseleave: function () {
//
// Destroy so the data will referesh
//
$(this).popover('destroy');
}
});
});
This way we are initialising the popover in the callback of the ajax request.
Hope this makes sense.
$('.popover.in .popover-inner').html(data);
$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
var ajaxQueue = $({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
$.ajaxQueue = function(ajaxOpts) {
var oldComplete = ajaxOpts.complete;
ajaxQueue.queue(function(next) {
ajaxOpts.complete = function() {
if (oldComplete) oldComplete.apply(this, arguments);
next();
};
$.ajax(ajaxOpts);
});
};
});
});
it's my first experience with js and i need some help. for tooltips i use bootstrap tooltips.
when cursor hover on link, script send post data to controller and receive callback data. in the first hover script receives the data, but tooltip doesn't pop up, only the second hover. how i can fix it?
and one more question. can script will send the request only the first mouse hover, and the following hover will use the information from the cache?
and sorry my english ;D
It is hard to test cross domain
Here is what I THINK you need
$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
$.ajax({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
});
});
Create flag for ajax query.
var isTooltipTextEmpty = true;
$('.challenge').mouseover(function(){
if(isTooltipTextEmpty) {
...add ajax query here)
}
}
And you need to trigger tooltip show event, when ajax query is ready like this
.success(data) {
$('.challenge').show();
isTooltipTextEmpty = false; //prevents multiple ajax queries
}
See more here: Bootstrap Tooltip