We Keep Coding

Pass information from 'inline' colorbox to parent page

This is more of a theoretical question about scope than anything too specific to my code but I'll give an example of what I'm trying to do anyway.
When a user selects something from a dropdown menu, colorbox overlays the screen and presents a hidden <div> on the opening page. No iframe is being used or no external html page being loaded. The <div> presented lives on the same page but is populated on the fly with a selection of images.
Colorbox presents the selection of images wrapped in <div>s. I want the user to be able to select an image and, depending on what they select, populate a form on the page underneath.
How can I get variables from the colorbox inline presentation to a function on the opening page?
I've tried a few things and looked at a few similar examples and nothing seems to work. The examples I've seen are from iframe loads not inline.
function presentDifferentPrintings(cardPresentInfo) {
// prevent submission until we're done here
allowSubmitField = document.querySelector('#allowSubmit');
allowSubmitField.value = 'false';
// clear current hidden overlay div
$( "div" ).remove( ".singleCardInOverlay" );
// iterate through each printing, get set names, multiverseIDs and release dates to present
var printingsNum = cardPresentInfo.printings.split("{|}");
printingsNum.reverse(); // we want to see the latest cards first
$.each(printingsNum, function(index, setCode) {
var setName = setNameCardIsFromField(setCode);
var thisMultiverseID = getMVIDfromSetCode(cardPresentInfo['name'], setCode);
var thisID = getIDfromSetCode(cardPresentInfo['name'], setCode);
// create HTML for each card presentation
var presentSingleCardHTML = "<div class='singleCardInOverlay' id='ovDiv"+thisID+"' onClick(fillInDetailsFromOverlay('"+thisID+"');) >";
presentSingleCardHTML += '<img id="overlayImage" src="<?=$localCardImagePresentFolder?>'+thisMultiverseID+'.jpg" />';
presentSingleCardHTML += '<p class="singleCardTextInOverlay">'+thisMultiverseID+' - '+setName+'</p>';
presentSingleCardHTML += '</div>';
// attach new div to hidden div if we have multiverseid
if (thisMultiverseID != '') {
$(presentSingleCardHTML).appendTo("#hiddenOverlayDiv");
}
});
$.colorbox({ inline:true, href:"#hiddenOverlayDiv", width:'80%', height:'80%', transition: "fade", opacity:0.85, returnFocus: true, trapFocus: true });
}
And here's a very simplified version of the function I'm trying to call that lives on the page that summoned the colorbox:
function fillInDetailsFromOverlay(thisID) {
alert('success');
}
Any ideas?

Solution! After taking a nice break and playing cards with my kid ........
The way I got this working was to call my colorbox with a function assigned to the onComplete event hook that is built in. Instead of using the javascript onClick thingo in the div tag, I'm now listening for a click on any of the images with the 'singleCardInOverlay' class and passing the id for that div (which corresponds to the image selected) to the function.
Amazing what taking a break can do for your coding. I hope this helps someone.
$.colorbox({
inline:true,
href:"#hiddenOverlayDiv",
width:'80%',
height:'80%',
transition: "fade",
opacity:0.85,
returnFocus: true,
onComplete: function() {
$(".singleCardInOverlay").click(function(){
fillInDetailsFromOverlay(this.id);
});
},
trapFocus: true
});

How can i Increase/Decrease FancyBox2 popup size after popup display and appending data which is return by an AJAX call

I have an application in which i am displaying a fancybox. After display fancybox i am making an ajax call and that call return some data. when i append that data into fancybox i am getting scrollbars. I want to resize fancybox whenever any data added/removed in fancybox dynamically. Please friends help me on this problem.

Thanks You All, finally i have found the solution, just add these replace this line in your fancybox origHeight = body.outerHeight(true); with origHeight = body.height()+10; and add this line too origWidth = body.width()+10;.
after that just set your height of fancybox to auto and call window.parent.jQuery.fancybox.update() after any append/ remove of your data. Like
$("a.fancy-view").click(function(){
var viewID = $(this).attr("id");
$("#"+viewID).fancybox({
type: 'iframe',
'autoSize': false,
'autoDimensions' : false,
href: $("#"+viewID).attr('href'),
width:600,
height:'auto',
'beforeLoad': function(){
$.fancybox.showLoading();
}
});
});
$(document).ready(function(){
$("#append").click(function(){
$("#mydiv").html(anyhtmldata);
window.parent.jQuery.fancybox.update();
});
});
after done i have found that for what i am looking i got it.

Animate on table that is generated dynamically

I want to apply a plugin on a certain table that is being generated dynamically through a php script. This is the plugin : CLICK
Now from what i read in the comments i should You first need some form of server side component, say a PHP script, which generates the html table from the data in the database. Then pass the URL of this PHP script into a jQuery ajax call. In the "success" callback, set the innerHTML of some holding div to the response of the ajax call, then select this newly created DOM table element and put it into the plugin.
Hope that makes sense!
Here's what i got so far.
HTML
<div class="testin">
<script>
testin();
</script>
</div>
JS
function testin(){
var load = $.get('functions.php',{gameNo:"1",function:"testin"});
$(".testin").html('Refreshing');
load.error(function() {
console.log("Mlkia kaneis");
$(".testin").html('failed to load');
// do something here if request failed
});
load.success(function( res ) {
console.log( "Success" );
$(".testin").html(res);
});
load.done(function() {
console.log( "Completed" );
});
}
php
if($_GET['function']=="testin")
{
echo '<table class="template" style="display:none"><thead><tr><th>Game Name</th><th>Round</th><th>Player Name</th><th>Target Name</th><th>Shot Number Now</th><th>Shot Score So Far</th><th>Rank</th></tr></thead><tbody></tbody></table>';
$gamenumber = $_GET['gameNo'];
echo'<table border="1" class="actualTable"><tr><th>Game Name</th><th>Round</th><th>Player Name</th><th>Target Name</th><th>Shot Number Now</th><th>Shot Score So Far</th><th>Rank</th></tr>';
$sql = mysql_query("SELECT * FROM tbl_Round WHERE match_id='$gamenumber' ORDER BY round_name")
or die(mysql_error());
$i=1;
while($row = mysql_fetch_array($sql))
{
$tempSnumber = getcurrentshot($row['round_id'],$row['player_id']);
echo'<tr>';
echo'<td>'.$gamenumber.'</td>';
echo'<td>'.$row['round_name'].'</td>';
echo'<td>'.$row['player_id'].'</td>';
echo'<td>'.$row['target_name'].'</td>';
echo'<td>'.$tempSnumber.'</td>';
echo'<td>'.$row['round_score'].'</td>';
echo'<td>'.$i.'</td>';
echo'</tr>';
$i++;
}
echo'</table>';
}
The function fills the div just fine. I also create the template table in the php script.
Now my problem is how to invoke the plugin and what should i pass ass objects?
Invocation is like $(oldTableElement).rankingTableUpdate(newTableElement) but i'm confused due to the fact that it's being generated dynamically.
I'm new to JS so any help would be appreciated.

First off, I would put your javascript outside the div with class "testin".
Below you JS function you can add the jquery call like in the code below.
See this link for more info: http://api.jquery.com/on/
$(document).ready(function(){
$("table tr").on( "click", function() {
//your custom code goes here.
});
});
What this does is make sure then any element that matches the "table tr" will get an click handler, no matter when it gets created.

Using ajax javascript to load content into a div in web page

I am having a little problem using javascript-ajax here. In my page, I load in the content into one of the div with id content in an ajax manner, whenever the user clicks on links which have the class myajaxreq, and the contents are loaded into the div in a fade in manner. The javascript that I am using is this
$(document).ready(function(){
$("#content").load($('.myajaxreq:first').attr('href'));
});
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
$('#content').hide().load(myhref).fadeIn('slow');
return false;
});
All works great on localhost, but when i put it online and then when we click on these links, then: First the same content which was initially there in the div is loaded in fade in manner. After a few seconds, the new content is loaded.
I think I am missing some sort of
if(content document is ready)
then load in a fade in manner
and so on..
Please somebody help me out here !!

call fade in after success callback... try this
var jContent = $('#content').hide();
jContent.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
here the whole code (untested)
$(document).ready(function(){
var jContent = $("#content").load($('.myajaxreq:first').attr('href'));
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
jContent
.hide()
.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
return false;
});
});

jQuery bind on ajax load() event

I have a page which displays multiple blocks with results details. Inside each block I have some <a> tags with thickbox jQuery plugin attached: class="thickbox"
Here is an example of one kind of ampersant tag:
<a class="thickbox" title="Please Sign In" href="userloginredir.php?height=220&width=350&deal=3">
Problem comes when I added a jQuery pagination to the page because of too many results displaying on the page.
The div component with the results inside is updated through ajax load() event.
Below is the pagination script:
$(document).ready(function(){
//References
var pages = $("#menu_deals li");
var loading = $("#loading_deals");
var content = $("#content_deals");
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
//Manage click events
pages.live('click',function(){
//show the loading bar
showLoading();
//Highlight current page number
pages.css({'background-color' : ''});
$(this).css({'background-color' : 'yellow'});
//Load content
var pageNum = this.id;
var targetUrl = "ajax_search_results.php?page=" + pageNum + "&" + $("#dealsForm").serialize() + " #content_d";
content.load(targetUrl, hideLoading);
});
//default - 1st page
$("#1").css({'background-color' : 'yellow'});
var targetUrl = "ajax_search_results.php?page=1&" + $("#dealsForm").serialize() + " #content_d";
showLoading();
content.load(targetUrl, hideLoading);
});
When I added pagination (code above), the thickbox events are not recognized anymore and instead of poping out a window with the login form inside it opens the results in new page (is acting like clicking on a normal link)
From my jQuery knowledge this means that the components are not defined in the DOM because the content is updated after document ready triggered.
I'm trying to bind the load event with something like this:
content.bind('load', ???);
But I don't know how to pass the load params, targetUrl and the callback function hideLoading, when binding the load event.
Please help me out in this matter, it already took me more time than possible allowed.

tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
call that in the callback of the ajax.

You have used the hideLoading function as the callback, instead replace it with this where you intialise the thickbox and also hide the loading.
content.load(targetURL, function(){ tb_init('a.thickbox'); hideLoading(); });