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?
Related
I have this function for tooltip (works fine):
$('.tooltip').jBox('Tooltip', {
closeOnMouseleave: true,
ajax: {
url: 'tooltips/tooltip.jsp',
reload: true,
getData: 'data-ajax',
setContent: true,
spinner: true
}
});
and then I have this function for loading a div content every ten seconds (works fine):
$('#responsecontainer').load('live.jsp');
var refreshId = setInterval(function() {
$('#responsecontainer').load('live.jsp');
}, 30000);
$.ajaxSetup({ cache: false });
} );
This links works fine everywhere, except in dynamically loaded div.
<a class="tooltip" data-ajax="id=5" href="tooltip.html"Link</a>
Does anyone know how to make this link work when it is in the contetnt of the dynamically loaded div? Thank you very much
jBox comes with an attach() method: https://stephanwagner.me/jBox/methods#attaching-jbox
You should use this method to attach your jBox and place your jBox in an variable:
var myJBox = new jBox('Tooltip', {
closeOnMouseleave: true,
attach: '.tooltip',
ajax: {
url: 'tooltips/tooltip.jsp',
reload: true,
getData: 'data-ajax',
setContent: true,
spinner: true
}
});
Then you can reattach the jBox anytime with myJBox.attach():
$('#responsecontainer').load('live.jsp', function () { myJBox.attach(); });
var refreshId = setInterval(function() {
$('#responsecontainer').load('live.jsp', function () { myJBox.attach(); });
}, 30000);
$.ajaxSetup({ cache: false });
} );
This way you make sure that jBox won't attach itself to an element multiple times.
You will need to reapply the tooltip as the DOM content is changed.
Create a function
function applyTooltip () {
$('.tooltip').jBox('Tooltip', {
closeOnMouseleave: true,
ajax: {
url: 'tooltips/tooltip.jsp',
reload: true,
getData: 'data-ajax',
setContent: true,
spinner: true
}
});
}
call the function on JQuery load callback
$('#responsecontainer').load('live.jsp', applyTooltip);
var refreshId = setInterval(function() {
$('#responsecontainer').load('live.jsp', applyTooltip);
}, 30000);
$.ajaxSetup({ cache: false });
} );
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
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) {
I have system that I'm modifying that uses jquery 1.5.1, which means .on doesn't exist.
I have a table and in this table I have multiple links listed in a row, and when the user clicks it opens a pop up window. I have the following code to create a pop up link.
<tr>
<td class="view_detail_label">
</td>
<td>
#Html.ActionLink(
training.Name.Name,
"AddSurvey",
new
{
employeeId = Model.Id,
trainingId = training.Id
},
new
{
#class = "addSurvey"
}
)
<div class="result" style="display:none;"></div>
</td>
</tr>
In the first function below I open a popup window and it works perfectly except when you close the popup you can not reopen it from the link again. To solve this I subscribed my event lively and used delegate and live function. But when tracking it from the console I cannot seen any output from the console statement : console.log($(this).next('.result'));.
$('.addSurvey').click(function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
//console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
return false;
});
$('a.addSurvey').live( 'click', function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
}); //end of live
Why is this the case I used delegate method too and it does not work either. My delegate
function:
$(document).delegate(".addSurvey", "click", function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
});//end of delegate
Thank you for your help.
*EDIT 1 After clesing the popup window when i click it it duplicates the responses somehow it is clicked as twice and when i refresh the page and click on it and then close the responses triples. What might cause this awkward situation? *
**EDIT2 I solved the above problem by using close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:#Model.Id}); }. By this I reload the the div table and can click on any pop up.
If you are using live then you do not need the first call. Try preventDefault() rather than return false.
$('a.addSurvey').live( 'click', function (e) {
e.preventDefault();
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
}); //end of live
Change to this:
$(".addSurvey").die().live("click", function (event) { event.stopPropagation();
.......rest of code.
Hello everyone I solved my problem as follows: on close action of the popup I reload the page from the server and re render it therefor now it works like a charm. Thanks everyone for your time and attention.
$('a.addSurvey').live('click', function (e) {
var $this = $(this);
e.preventDefault();
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true,
close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:#Model.Id}); }
}); //end of dialog
console.log($(this).next('.result'));
}, //enf of success function
complete: function () {
console.log("Complete");
},
error: function () {
console.log("Error");
}
}); //end of ajax call
}); //end o
use .on instead of live. live is deprecated..
$('a.addSurvey').on( 'click', function () {
}
on() method is the new replacement for the bind(), live() and delegate() methods. Please use on().
I am having a hell of a time trying to figure out why the code below crashes when the dialog is closed or cancelled. It errors on lines that use ($this) in the dialog button function.
For some reason if I hard code values into addTaskDialog.html(AddTaskForm); it works. I have even hardcoded the returned ajax form and it worked... This problem happens in all browsers.
$(function ()
{
/*
* Initializes AddTask Dialog (only needs to be done once!)
*/
var $dialog = $('<div></div>').dialog(
{
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
$dialog.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
$dialog.dialog('close');
}
});
/*
* Click handler for dialog
*/
$('#AddTask').click(function ()
{
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
$dialog.html(AddTaskForm);
$dialog.dialog('open');
}
});
});
});
});
Ok I think I know what is going on. On your success callback you are referencing $(this) in AddTaskDialogOptions the problem is that the in this scope $(this) no longer refers to $("#AddTask") so you will need to set a variable to keep a reference to $(this) like so:
var that;
$('#AddTask').click(function ()
{
that = $(this);
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
var addTaskDialog = $('<div></div>');
addTaskDialog.dialog(AddTaskDialogOptions);
addTaskDialog.html(AddTaskForm);
addTaskDialog.dialog('open');
}
});
});
var AddTaskDialogOptions = {
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
that.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
that.dialog('destroy').remove();
}
}
I figured it out. I'm not sure where I got this code, but it was causing the problems, so I took it out and it all works fine.
close: function ()
{
$dialog.dialog('close');
}