I have a table in my website and when i hover over a link i create a tooltip, the issue is that when i move my mouse over the links quickly multiple tooltips will be displayed as seen in the screenshot below,
I need to have only one tooltip on screen at a time and remove it if the user is no longer hovering. I create the tooltips in side the success function of an ajax call so i will only display the tooltip if the controller returns a status of true. The code for this can also be found below. Any suggestions on how i can ensure only one tooltip is displayed at a time. Thank you for any help you can give.
function tooltip(){
$('#tblOrder').on('mouseenter', '#alarmsTooltip', function(event) {
var id = $(this).attr('value');
var statusResponse;
var selector = $(this);
$.ajax({
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
data: {id: id},
dataType: "json",
success: function (Response) {
if(Response.status == true)
{
var alarmTrans = '<%=GetTranslation(TranslationType.Label, "Alarms.tooltip", "Alarms") %>';
var warningTrans = '<%=GetTranslation(TranslationType.Label, "Warnings.tooltip", "Warnings") %>';
var html = "<table border='1' style= 'border: 1px solid black; border-collapse: collapse;'> <tr><th>" + alarmTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_red.png")%>' + "' style='float: right' >" + "</th><th> " + warningTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_orange.png")%>' + "' style='float: right'>" + "</th></tr>";
$(selector).qtip({
content: {
text: html + Response.Response,
title: {
text: '<%=GetTranslation(TranslationType.Label, "Alarms and Warnings.tooltip", "Alarms and Warnings") %>'
}
},
position: {
target: 'mouse',
adjust: {x:5,y:5}
},
show: {
ready: true,
effect: function () {
$(this).slideDown();
}
},
style: {
//classes: 'qtip-dark'
classes: 'qtip-green'
},
hide: {
effect: function () {
$(this).slideUp();
}
},
api: {
beforeShow: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('hide').qtip('disable');
},
beforeHide: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('enable');
}
}
}, event);
}
}
});
});
};
Again thank you for any help.
Right now your function is called on the event mouseenter.
Create another event mouseleave with a function that aborts the ajax call with storedAjax.abort(). However for this to work you need to store the ajax call in a global variable first.
Store the AJAX call in a global variable
requestAjax = $.ajax({ ... });
On the top of the function tooltip() just do
if(requestAjax) requestAjax.abort();
and then hide all the tooltips and and then proceed with the rest of the code.
and Add
$("#tblOrder").mouseleave(function(){
$(this).qtip("hide");;
});
Hi everyone i have one problem with my ajax loading animation. The problem is when i hover any image the loading animation active under all images.
Like this FIDDLE
I want to make when i hover first image then .ajax-loading activated for only that image. and if i hover second image then .ajax-loading active for only second image ext..
Anyone can help me here ?
CSS
.ajax-loading {
transition: all 0.3s;
opacity: 0;
z-index: -1;
}
.ajax-loading.active {
opacity: 1;
z-index: 100;
}
and AJAX
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
beforeSend: function() {
$('.ajax-loading').addClass('active');
},
success: function (returnHtml) {
e.find('.user-container').empty().html(returnHtml).promise().done(function () {
$('.the-container').addClass('loaded');
});
}
}).complete(function() {
$('.ajax-loading').removeClass('active');
});
}
function hideProfileTooltip() {
$('.the-container').removeClass('loaded');
}
$('.the-container').hover(function (e) {
var id = $(this).find('.summary').attr('data-id');
showProfileTooltip($(this), id);
}, function () {
hideProfileTooltip();
});
});
The problem is that the beforeSend function activate the class active for all the elements with the class .ajax-loading.
Since you're passing the jQuery object that is receiving the hover to the function, you can take advantage of that and add the class active only to those elements with the class .ajax-loading under it.
beforeSend: function() {
$('.ajax-loading',e).addClass('active');// Note the ,e that I added
},
Fiddle
Hope it helps.
I have a dropdown box. When the user selects a value from the dropdown box, it performs a query to retrieve the data from the database, and shows the results in the front end using ajax. It takes a little bit of time, so during this time, I want to show a progress bar. I have searched, and I have found numerous tutorials on creating progress bars for uploads, but I haven't liked any. Can anybody provides some helpful guidance for me?
My ajax code:
<script>
$(function() {
$("#client").on("change", function() {
var clientid=$("#client").val();
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
success:function(data){
$("#result").html(data);
}
});
});
});
</script>
This link describes how you can add a progress event listener to the xhr object using jquery.
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
// Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
// Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
// Do something success-ish
}
});
<script>
$(function() {
$("#client").on("change", function() {
var clientid=$("#client").val();
//show the loading div here
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
success:function(data){
$("#result").html(data);
//hide the loading div here
}
});
});
});
</script>
Or you can also do this:
$(document).ajaxStart(function() {
// show loader on start
$("#loader").css("display","block");
}).ajaxSuccess(function() {
// hide loader on success
$("#loader").css("display","none");
});
Basically you need to have loading image Download free one from here http://www.ajaxload.info/
$(function() {
$("#client").on("change", function() {
var clientid=$("#client").val();
$('#loadingmessage').show();
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
success:function(data){
$('#loadingmessage').hide();
$("#result").html(data);
}
});
});
});
On html body
<div id='loadingmessage' style='display:none'>
<img src='img/ajax-loader.gif'/>
</div>
Probably this could help you
Here is an example that's working for me with MVC and Javascript in the Razor. The first function calls an action via ajax on my controller and passes two parameters.
function redirectToAction(var1, var2)
{
try{
var url = '../actionnameinsamecontroller/' + routeId;
$.ajax({
type: "GET",
url: url,
data: { param1: var1, param2: var2 },
dataType: 'html',
success: function(){
},
error: function(xhr, ajaxOptions, thrownError){
alert(error);
}
});
}
catch(err)
{
alert(err.message);
}
}
Use the ajaxStart to start your progress bar code.
$(document).ajaxStart(function(){
try
{
// showing a modal
$("#progressDialog").modal();
var i = 0;
var timeout = 750;
(function progressbar()
{
i++;
if(i < 1000)
{
// some code to make the progress bar move in a loop with a timeout to
// control the speed of the bar
iterateProgressBar();
setTimeout(progressbar, timeout);
}
}
)();
}
catch(err)
{
alert(err.message);
}
});
When the process completes close the progress bar
$(document).ajaxStop(function(){
// hide the progress bar
$("#progressDialog").modal('hide');
});
$(document).ready(function () {
$(document).ajaxStart(function () {
$('#wait').show();
});
$(document).ajaxStop(function () {
$('#wait').hide();
});
$(document).ajaxError(function () {
$('#wait').hide();
});
});
<div id="wait" style="display: none; width: 100%; height: 100%; top: 100px; left: 0px; position: fixed; z-index: 10000; text-align: center;">
<img src="../images/loading_blue2.gif" width="45" height="45" alt="Loading..." style="position: fixed; top: 50%; left: 50%;" />
</div>
After much searching a way to show a progress bar just to make the most elegant charging could not find any way that would serve my purpose. Check the actual status of the request showed demaziado complex and sometimes snippets not then worked created a very simple way but it gives me the experience seeking (or almost), follows the code:
$.ajax({
type : 'GET',
url : url,
dataType: 'html',
timeout: 10000,
beforeSend: function(){
$('.my-box').html('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div>');
$('.progress-bar').animate({width: "30%"}, 100);
},
success: function(data){
if(data == 'Unauthorized.'){
location.href = 'logout';
}else{
$('.progress-bar').animate({width: "100%"}, 100);
setTimeout(function(){
$('.progress-bar').css({width: "100%"});
setTimeout(function(){
$('.my-box').html(data);
}, 100);
}, 500);
}
},
error: function(request, status, err) {
alert((status == "timeout") ? "Timeout" : "error: " + request + status + err);
}
});
I know that are already many answers written for this solution however I want to show another javascript method (dependent on JQuery) in which you simply need to include ONLY a single JS File without any dependency on CSS or Gif Images in your code and that will take care of all progress bar related animations that happens during Ajax Request.
You need to simnply pass javascript function like this
var objGlobalEvent = new RegisterGlobalEvents(true, "");
Here is the working fiddle for the code. https://jsfiddle.net/vibs2006/c7wukc41/3/
I did it like this
CSS
html {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body {
/* For the loading indicator to be vertically centered ensure */
/* the html and body elements take up the full viewport */
min-height: 100%;
}
html.loading {
/* Replace #333 with the background-color of your choice */
/* Replace loading.gif with the loading image of your choice */
background: #333 url('/Images/loading.gif') no-repeat 50% 50%;
/* Ensures that the transition only runs in one direction */
-webkit-transition: background-color 0;
transition: background-color 0;
}
body {
-webkit-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
html.loading body {
/* Make the contents of the body opaque during loading */
opacity: 0;
/* Ensures that the transition only runs in one direction */
-webkit-transition: opacity 0;
transition: opacity 0;
}
JS
$(document).ready(function () {
$(document).ajaxStart(function () {
$("html").addClass("loading");
});
$(document).ajaxStop(function () {
$("html").removeClass("loading");
});
$(document).ajaxError(function () {
$("html").removeClass("loading");
});
});
I usually use this since it's simpler and more useful.
<input id="datainput" type="text">
<div id="result"></div>
<button id="examplebutton"></button>
<script>
$("#examplebutton").click(function(){
let data=$("#datainput").val();
$("#result").html("Please Wait.."); // it starts working when the button is clicked
$.ajax({
url:"../ajax/xyz.php",
type:"POST",
data:{data:data},
success:function(result)
{
$("#result").html(result); // When the data comes, the text will be deleted and the data will come.
}
});
});
</script>
try this it may help you
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
beforeSend: function( ) {
// load your loading fiel here
}
})
.done(function( data ) {
//hide your loading file here
});
Well this will definitely work.
Here we go...
function yourFunction(){
setTimeout(function(){
$('#loading').show();
setTimeout(function(){
//your ajax code goes here...
$('#loading').hide();
}, 500);
}, 300);
}
You can set css to your progress bar according to your requirement. Hide this div by default.
<div id="loading">
<img id="loading-image" src="img-src" alt="Loading..." />
</div>
The code i current have is this.
function update (){
latest_id = $('#image:first').data('position'); /* == 12 */
$.ajax({
type: "POST",
url: "../web/update/" + latest_id + "",
success: function(data) {
$('#my_like').after(data);
$('.newly-added').animate({"margin-left": "+=66px"}, "fast");
},
error: function(response) {
alert("failed");
},
});
}
setInterval(function() {
update();
}, 4000);
But because the element has been newly added it doesn't receive the new animate part. I done some research and found .live but that needs something to start it, e.g a click.
Fixed, there was a issue with jquery I was including.
i know how to write code for jquery fadein effect.
suppose i have a html element store in variable.
like
var sHtml="<div>Other content</<div><div id='frm'>hello</<div>"
modal.load(jQuery(sHtml).find('#frm')fadein().html());
i first find the desired div and use the fadein effect when i am assigning the div inside modal box. but it is not working. cany anyone suggest me to do it proper way. i want that when i will set the content into modal box then first i will show a fadein effect and then set the content.
Here i am giving my code
var modal = "";
var sHtml = "";
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery("#btnFeedback1").click(function () {
var modal = new LightFace({
draggable: true,
height: 'auto',
width: 'auto',
title: 'Login',
content: '<div class="BusyStyles"><div>',
buttons: [
{ title: 'OK', event: function () {
if (Validate()) {
if (Save()) {
this.close();
}
}
}
},
{ title: 'Close', event: function () { this.close(); } }
]
}).open();
//}).open();
jQuery.ajax({
type: "POST",
url: "Login_LightFace.aspx/GetHtml",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
sHtml = data.d;
//modal.options.width = 'auto';
//modal.options.height = 'auto';
modal.load(jQuery(sHtml).find('#frm').fadeIn().html());
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
return false;
});
});
There is no such effect in jquery as fadein but there is fadeIn (capital I). Also you missed a dot before fadeIn()
I dont know what is that modal.load but when you are adding new thing to somewhere and want to have fadeIn type of effect, you should first just hide the element you just added (or have style="display:hidden") and then use fadeIn on it.
Add an event handler like this:
modal.load(function() { ...event handling code here...; });
If you don't wrap it in a function(){} it will run immediately instead of when the event fires.