Hi i have a flexigrid to display some data on my site. Each row has a hyperlink that when the user hovers over it brings up a tool tip containing more information. However this only works for the first page on the table, when i change pages the tool tips stop working. I know this is because i use the tool tips in document.ready but i am unsure on how to solved the problem. any help would be appreciated. I've included a fiddle for the tool tips however the table does not have pagination. See fiddle ive included the code below too. This is called in document.ready
function tooltip(){
$('#tblOrder tr td a').on('mouseenter', function(event) {
var id = $('#tblOrder tr[id*="row"]').attr('id').substr(3);
$(this).qtip({
content: {
text: 'Loading.....',
ajax: {
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
data: {id: id},
success: function (data, status) {
this.set('content.text', data);
},
error: function (xhr) {
console.log(xhr.responseText);
}
}
},
show: {
event: event.type,
ready: true,
effect: function () {
$(this).slideDown();
}
},
hide: {
effect: function () {
$(this).slideUp();
}
}
}, event);
});
};
When you are updating the content inside of #tblOrder you should rebind the event handler or even easier bind the mouseenter event to #tblOrder and filter the event callback with a detailed selector. So instead of your code - use this:
$('#tblOrder').on('mouseenter', 'tr td a', function(event) {
Related
I am using Jquery jsTree where i load my data into jstree with json. Below is my code to populate my jsTree
$.ajax({
async: true,
type: "POST",
url: "MasterPageDataService.asmx/GetAllSites",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (jsonData) {
$("#divSitesTree").jstree({
'core': {
'data': jsonData
},
"plugins": ['dnd', "themes", "json_data", "ui"]
});},
});
I get the data populated perfectly.
Now i want to drag a node and drop it onto div element. I have made my div drop able to serve the purpose like this
$(".droppable").droppable({
drop: function (event, ui) {
alert('dropped');
// here i want the id of dropped node
}
});
I don't want to move the node from tree to anywhere , i just want to get the id of the node being dragged and dropped into div. But my problem is that m not even getting the drop event getting fired. e.g i don't get any alert at all.
I have googled the different solutions and tried this so far.
<script>
$(function () {
$('.drag')
.on('mousedown', function (e) {
return $.vakata.dnd.start(e, { 'jstree': true, 'obj': $(this), 'nodes': [{ id: true, text: $(this).text() }] }, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i>' + $(this).text() + '</div>');
});
$(document)
.on('dnd_move.vakata', function (e, data) {
var t = $(data.event.target);
if (!t.closest('.jstree').length) {
if (t.closest('.drop').length) {
data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');
}
else {
data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');
}
}
})
.on('dnd_stop.vakata', function (e, data) {
var t = $(data.event.target);
if (!t.closest('.jstree').length) {
if (t.closest('.drop').length) {
$(data.element).clone().appendTo(t.closest('.drop'));
}
}
});
});
</script>
But what it does, it simply appends the node(icon+text) in my div. But that is not what i want. I just want to get the Id of the node inside an event where i can perform further operation based over the id of the node.
How do I accomplish this task with jsTree? Please Help.
Luckily I have found the solution. Below is the script to get the id of the node being dragged and the id of the target where the node is being dropped
$(document)
.on('dnd_stop.vakata', function (e, data) {
var t = $(data.event.target);
if (!t.closest('.jstree').length) {
if (t.closest('.drop').length) {
alert(data.data.origin.get_node(data.element).id);//node id
alert(data.event.target.id) //target id
}}});});
I have an element with class.btn-confirm and handel click event like this in MasterLayout (ASP.NET MVC)
$(document).on('click', '.btn-confirm', function () {
$.ajax({
url: $('#url').data('deleteurl'),
type: "POST",
data: { code: $('.btn-confirm').data('code') },
success: function (data) {
ShowMessage(data.message, 'success');
},
error: function (responce) {
ShowMessage('error', 'error');
}
});
});
and I want override this event in Other Page like this :
$('.btn-confirm').unbind('click');
$('.btn-confirm').off('click');
$(document).on('click', '.btn-confirm', function ()
{
...}
but when I clicked on button , run two functions , I want disable first event handle.
I used unbind and off but it does not work.
If you bind the event on document you must then also unbind it on document
$(document).off('click', '.btn-confirm');
$(document).on ('click', '.btn-confirm', ...new function...
I have a page which uses colorbox to load an iframe(proprietary information).
I need to hide an element in the iframe(takes a few seconds to load) with a specific class.
I tried this with no success. The console messages are not hit. One they are hit, I can then hide them using jQuery css.
$(function () {
'use strict';
$(".className").ready(function () {
console.log("className on class ready");
$(".className").css("display", "none");
});
$(document).on("ready", ".className", function () {
console.log("className on document ready");
$(".className").css("display", "none");
});
});
Colorbox init:
function ShowColorbox(fileId) {
'use strict';
var colorboxUrl = getColorBoxUrl();
$.ajax({
type: "GET",
url: colorboxUrl,
dataType: "json",
timeout: 30000,
success: function (previewLink) {
$.colorbox({ href: previewLink, iframe: true, width: "90%", height: "90%" });
},
error: function (jqXhr, textStatus, errorThrown) {
alert("failed");
},
complete: function () {
// Do nothing
}
});
}
Plain CSS approach(did not work either):
<style>
.className .UITextTranformUpperCase {
display: none;
}
</style>
Your colorbox uses a dynamic url for content. You have to be sure that the content is loaded before finding elements.
You just have to set the fastIframe property to false and add an onComplete handler and it should work :
$.colorbox({
href: previewLink,
iframe: true,
width: "90%",
height: "90%",
fastIframe: false,
onComplete : function() {
$('#cboxIframe').contents().find('.className').hide();
}
});
Please just verify that your colorbox iframe has the id cboxIframe. If not, update the iframe selector
This is the way I have done it in the past:
$('iframe.yourclass').load(function(){
$iframe = $('iframe.yourclass').contents();
$iframe.find('.class-selector').css('display','none');
});
However if the iframe is on the same domain, can you not write simple css to target the element. Or maybe you do not have access to the css?
I am using the qtip2 Jquery plug-in to provide suggestions on keyup in an input but what I would like to do is instead of refreshing the entire tool-tip bubble every time the content is updated id rather just refresh the content of the tool-tip without closing it.
So effectively if there is no tool tip present it will show the tool-tip and call the content via Ajax but if there is an existing tool-tip it will just update the content of the existing tool tip.
http://jsfiddle.net/fDavN/11723/
Ok Iv updated my code and it kinda works but I am getting an error: typeError: $(...).updateContent is not a function.
Anbody know why?
$(document).ready(function() {
var title = 'KnowledgeBase Suggestions';
$('#name').on("keyup", function () {
if($(this).data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$(this).updateContent($(".qtip-content").html(data));
}
});
}
else {
$(this).qtip({
content: {
text: "Loading...",
ajax:{
url: 'http://qtip2.com/demos/data/owl', // Use href attribute as URL
type: 'GET', // POST or GET
data: {}, // Data to pass along with your request
success: function(data, status) {
// Process the data
// Set the content manually (required!)
this.set('content.text', data);
}
},
title: {
button: true,
text: title
}
},
position: {
my: 'top left',
at: 'center right',
adjust: {
mouse: false,
scroll: false,
y: 5,
x: 25
}
},
show: {
when: false, // Don't specify a show event
ready: true, // Show the tooltip when ready
delay: 1500,
effect: function() {
$(this).fadeTo(800, 1);
}
},
hide: false,
style: {
classes : 'qtip-default qtip qtip qtip-tipped qtip-shadow', //qtip-rounded'
tip: {
offset: 0
}
}
});
}
});
});
A stab in the dark as I don't know what updateContent does but you might have an issue with how you are referencing $(this)
try changing
$('#name').on("keyup", function () {
var $this = $(this);
if($this.data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$this.updateContent($(".qtip-content").html(data));
}
});
}
else {
....
the reason is this is a different this when inside the ajax callback
I am trying to display a popover for a element after a ajax call has been made. Everything works as far as the ajax request and getting the data the first time, except no data is displayed when mouseover event happens. But when you hover over it again, You can see the data in the popover. I looked around on here and the web and found similar situation but less complex than my situation (No mouseover event and ajax). I understand that popover seems not to be initialized when I first call it in my situation. But the thing is, that I only can show it after the ajax is being called and it has to be mouseenter. Can anyone modify or guide me to showing the popover on first try. Thanks for any help (Please note that there are two on my page I am just showing 1 of them).
Element
Access Count:
Javascript
$('#users').mouseenter(function () {
$.ajax({
type: "GET",
url: "/album/feature_getaccess",
data: { aID: modelID },
success: function (result) {
$('#users').popover({ content: result, html: true, placement: 'top', trigger: 'hover', delay: { show: 500, hide: 1500 } });
}
});
});
Works fine after the second mouse in.
Just remove the mouseenter stuff, the popover will still only appear on mouseenter, because you have it set to trigger: 'hover'
$.ajax({
type: "GET",
url: "/album/feature_getaccess",
data: { aID: modelID },
success: function (result) {
$('#users').popover({ content: result, html: true, placement: 'top', trigger: 'hover', delay: { show: 500, hide: 1500 } });
}
});