Mango Mango - 6 months ago 28
Javascript Question

get the data selected from Jquery dialog to the parent page

I've used JQuery dialog to open a popup which contains image

<script type="text/javascript">
jQuery(document).ready( function(){
jQuery("#btnAddWidget").click( showDialog );

$myWindow = jQuery('#widgetDialog');

$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Add Widget',
overlay: { opacity: 0.5, background: 'black'}
});
}
);

var showDialog = function() {
$myWindow.show();
$myWindow.dialog("open");
}

var closeDialog = function() {
$myWindow.dialog("close");
}
</script>


In the dialog

<div class="headerlinks">
<input id="btnAddWidget" name="addWidget" value="Add Widget" type="button" />
<div id="widgetDialog" style="display:none">
<img border="0" id="imgRMS" src="sample.jpg" />
<input id="btnAddToDashboard" name="addToDashboard" value="Add To Dashboard" type="button" />
</div>
</div>


In the parent page

<div id="dashboard" class="dashboard">
<div id="w1" class="column"></div>
</div>


On click of "Add to Dashboard" I want the image to be placed in the respective div
w1
of the parent page.
Can anyone suggest something on this..???

Answer
$("#btnAddToDashboard").click(function(e){
    $("#w1").append($("<img>").attr("src",$(this).prev().attr("src")));
});

Fiddle