Develop Reference

Access element inside colorbox

$.colorbox({ href: previewLink, iframe: true, width: "90%", height: "90%" });
I am using the above code to call colorbox. Once the colorbox is displayed I would like access and element inside the colorbox and then change the css.
However I am unable to access elements inside the colorbox.
I tried the following:
$(function () {
'use strict';
setInterval(
function () {
console.log("logging...");
var elements = document.getElementsByClassName("className");
if (elements.length > 0) {
console.log("Found element");
}
}, 1000);
});

Don't use timeout for this purpose, always look for events. The colorbox haves onOpen event(CTRL+F "Callbacks"), which I think fits your needs:
$.colorbox({
href: previewLink,
iframe: true,
width: "90%",
height: "90%",
onOpen: function()
{
debugger;
$("#colorbox").find(); // Find desired element
}
});
Fiddle.
Furthermore, why are you using getElementsByClassName if you already have jQuery on your page? Why not .find() ?

Can't load AJAX content in jQuery dialog

I got this dynamically created JQueryUI dialog from this thread that loads content via Ajax from <a href='2.html'>. But I found there is an issue with the following code. Even though AJAX request is successfully made as shown in Console, the content isn't able to append to the dialog container. Can anyone find out what's problem with the load function at this line:
dialog.load($(this).attr('href') + ' #content').dialog
I have tried
dialog.append($(this).data('source') + ' #content').dialog
dialog.text($(this).data('source') + ' #content').dialog
and they work.
Code:
var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$(document).ready(function () {
$(document).ready(function () {
$('button').click(function () {
$(this).next('.area').append('<a id="open_dia_'+Date.now().toString()+'" class="open_dia" title="this title" href="2.html">Click</a>');
});
$(document).on('click', '.open_dia', function (evt) {
var dialogid = 'dialog_'+$(this).attr('id');
var dialog = null;
if ($('#'+dialogid.toString()).length == 0)
{
dialog = $('<div id="'+dialogid+'"></div>').append(loading.clone());
dialog.load($(this).attr('href') + ' #content').dialog({
title: $(this).attr('title'),
width: 500,
height: 300
});
}
else
{
dialog = $('#'+dialogid.toString());
}
dialog.dialog('open');
return false;
});
});

You can do it in this way:
Create a div, and a div inside that you'll use it to append the content.
<div id="dialogDiv" title="this title" style="display:none;">
<div id='dialogDivDynamic'></div>
</div>
convert your first div in the dialog:
$("#selectionResult").dialog({
modal: true,
width: '900px',
buttons: [{ text: "Close", click: functionToCloseDialog() }]
});
append the content to your second div:
$('#dialogDivDynamic').append("This is my new content");
function functionToCloseDialog() {
$('#dialogDiv').dialog('close');
}

It seems that there is an space before your hash... Try this way:
dialog.load($(this).attr('href') + '#content').dialog({
title: $(this).attr('title'),
width: 500,
height: 300
});

Clicking on element from jQuery dialog generated by function

I am having a rather strange issue with jQuery/Javascript. (This happens in IE, FF and Chrome)
I have a (asp.net) webpage as follows:
Header with lots of buttons (generated at PreRender)
Hidden div with buttons doing postbacks (generated OnLoad) & a div to use as a dialog
Page with an iFrame
Lets say I have a Button with '1234_stuff' as its CLIENTID in the Hidden div.
I have a button in the Header that has a OnClientClick = "$('#1234_stuff').click();return false;";
When I click the button that is in the header this works perfectly. Good.
I have an other button in the header (lets call it PopupStarter) that has a OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";
The javascript Popup function is as follows:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
$('#' + buttonid).click();
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
When I click the 'PopupStarter' button the jQuery dialog shows as expected, no trouble there. However... when I click the ClickMe button nothing happens (besides closing the dialog).
I would think I did something wrong: so I tried it with a timer:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
setTimeout(""$('#"" + buttonid + ""').click();"", 100);
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
This works!! Now that is odd. So I called the parent jQuery
parent.$('#' + buttonid).click();
This also does not work.
And to top it all off, when I enter each of the lines manually in the console of the browser they all work!

Try using this:
$(document).on('click', '#' + buttonid, function(){
Your functions here;
});
Any items that do not exist on page load, will need to have the event listeners applied to the document, the body, or any parent selector that existed in the DOM on page load. Javascript does not attach listeners to objects that are not present when the DOM is loaded. Hope this helps!

How to open colorbox from inside a iframe on top of parent window

I have a page with an iframe. The link inside an iframe should open colorbox. It works fine.
But it opens the colorbox inside the iframe. Is it possible to open the iframe over the parent window.
I appreciate any help.
$(function() {
$('#ajax').colorbox({iframe: true });
});

You should be able to trigger it in the top frame with
top.$.fn.colorbox({ params });
Although you'll need to spoon-feed it the data you want showing.

Had the same problem. solved by putting a function in the parent page like the one below:
<script>
$(document).ready(function(){
function call_colorBox(params) {
$.colorbox(params);
}
})
</script>
then call the colorbox function in your iframe using:
<script>
top.parent.call_colorBox({ width: "80%", height: "80%", iframe: true, href:"http://www.google.com" });
</script>

above code is not working for me..
top.parent.$.colorbox({
iframe: true,
width: "75%",
height: "75%",
href: "frmTATABomPartsUnique.aspx?Parts=Common",
title: "UNIQUE PARTS",
onComplete: function () {
$("#cboxClose").attr("title", "Close");
}
});
This code working...

ui Dialog works once in IE

I hope someone can help with this problem. I am using ui Dialog that pops up on clicking a link with the same class. The problem is that the link work great once but if i click it again or another link with the same class then only the overlay loads but not the content box in IE only. It works great in firefox.
My script includes an ajax post, if i remove the ajax code then the box works fine on every click.
My code:
$().ready(function() {
$('#dialog').dialog({
autoOpen:false,
title: $(this).attr("title"),
modal: true, width: 450, height:"auto", resizable: false,
close: function(ev, ui) { $(this).remove(); },
overlay: {
opacity: 0.5,
background: "black"
}
});
$(".mybutton").click(function(){
$.post($(this).attr("href"), { },
function(data) {
$('#dialog').html(data);
}
);
$('#dialog').dialog('open');
return false;
});
});
I have multiple links with the class "mybutton" and a div with the id #dialog . I am also using the latest version of jQuery and ui.
Any help would be greatly appreciated. Thanks
I am using IE8, jQuery 1.3.2, jQuery UI 1.7.1

The post is done asynchronously by default. It looks like you expect it to be synchronous. Try moving the open of the dialog into the callback after the data is set rather than in the click function -- which may execute before the callback returns.

move the open into the callback...
$('#dialog').html(data).dialog('open');

I was having the same problem. I resolved it by managing the state of the Dialog myself...creating a new one and disposing of it each time.
function makeDialog()
{
var html = '';
html += '<div>My dialog Html...</div>';
return $(html).dialog(
{
position: 'center',
modal: true,
width: 518,
height: 630,
autoOpen: false,
close: function() { $j(this.remove(); }
});
}