How to attach an event to a button in an iframe - javascript

Right now I have a jQuery UI dialog with an <iframe> inside of the dialog. When the user pushes a button, the dialog pops up with a form-editing screen in the iframe.
Well, I want to have two buttons in the inner form-editing screen, "cancel" and "ok". Cancel doesn't save changes and closes the dialog, ok saves changes and closes the dialog. Pretty simple..
So how do I attach an event to the cancel button inside of the iframe from the parent page? I would also assume that you would somehow need to attach an event to the iframe's DOM-ready or else the button would not yet exist.
How do you do this?
Also, the iframe is on the same-domain and such so there is no cross-domain worries
A simple example is here at jsbin with the iframe source

Ok so here is what I did to accomplish this. I added this code to the iframe page:
$(document).ready(
function()
{
$("#cancelbutton").click(
function()
{
parent.CloseDialog();
});
});
Then in the opening page I put this:
function CloseDialog()
{
$('#diag').dialog('close');
}
So rather than try to close the dialog from the frame I just call a method in the parent page that will take care of closing it. Same effect but a lot easier. Couldn't seem to get the frame to let me use the dialog method. But this worked.

Does this get you close?
DialogBox.html:
<body>
<input type="submit" value="Edit" id="editbutton" />
<div id="diag">
<iframe src="/" ></iframe>
</div>
<script>
$(document).ready(function(){
$('#diag').dialog({
height: 100,
width: 100,
autoOpen: false
});
$('#editbutton').click(function(){
$('#diag iframe').attr('src','modal.html');
$('#diag').dialog('open');
});
$("#diag iframe").load(function() {
$("#diag iframe").contents().find('#cancelbutton').click(function() {
//close dialog here
});
});
});
</script>
</body>

onclick="parent.window.close();"

Related

trigger iframe's button from parent page MVC

So, I have an iframe inside my application page (different domains) where the iframe has few fields and a hidden button that has a click event on there to do all the necessary stuffs (like the CRUD operation). The post is called via ajax, so there is not POST method on the iframe. The parent page has a button which is what should be used to when clicked, should trigger the click event inside the iframe. I did look into the postMessage and cross-origin and was able to find something that i have implemented on my solution. With that being added, when I click on the button on the parent page, nothing happens. I do not see any console error but nothing fires. This is what I have in my code.
<div id="main">
<iframe id="cardIframe" src="#($"https://localhost:44320/handlers?userId={Model.UserId}")"
width="100%" height="300px" style="border: none;" scrolling="no"></iframe>
<hr class="mb-4" />
#Html.UI().Button("Continue to Checkout", size: UIElementSize.Block, uiClass: UIElementClass.Primary, htmlAttributes: new { #class = "checkoutsubmit" })
<script type="text/javascript">
$('.checkoutsubmit').click(function (e) {
var iframe = document.getElementById('cardIframe').contentWindow;
window.iframe = iframe;
iframe.postMessage("createvault", "*");
});
</script>
And in my iframe application (http://localhost:43402)
<script type="text/javascript">
window.addEventListener("click", clickEvent, false);
function clickEvent(event) {
$('.processbraintree').trigger('click');
}
$('.processbraintree').click(function(e) {
..Do something
});
</script>
Not sure what am I doing wrong here. The fact that I do not see any error on the console doesn't help any. I have to have the iframe do the post of the form as it has all the braintree dropin ui stuffs. So, the parent has to be able to trigger the event inside of an iframe which currently does not happen right now.

how to prevent close dailogbox pop up when close dialog and refresh

Hi it is very simple question, but I didn't find the answer fit in my situation.
In my jQuery dialog I have buttons which is update and close. User click 'update button' then on code behind I need to update in database then close.
when user click the close button then I close the dialog. the dialog is load aspx page. I have two problems.
The problem is if user click close button which run javascript window.close(). It will pop up the windows "Do you want to close window...."
How can I refresh the parent page and close the dialog by clicking the 'update' button.
there is the code to load the dialog:
function openDialog(url, name, width, height) {
$("#dialog-box").load(url).dialog({
autoOpen: false,
resizable: true,
height: 425,
width: 600,
modal: true
});
$('#dialog-box').dialog('open');
return false;
}
I tried to use $("#dialog-box").dialog("close"); in my function which is called in code behind. but it show the error.
there is my function
function RefreshParentAndClose() {
$("#dialog-box").dialog("close");
}
there is the code I load the dialog on parent page
<div id="dialog-box" title=" "></div>
<td width="33%" align="right"><asp:button id="btnSelect" runat="server" causesvalidation="False" text="Select Locations"
OnClientClick="javascript:return openDialog('popLocation.aspx','select',600,500);" /></td>
Use below code for close
$("#dialog-box").dialog( "close" );
and to refrsh on close use
$("#dialog-box").dialog({
close: function( event, ui ) {
window.location.reload();
}
});
1) You could close the dialog by invoking its close() method:
function OnCloseClick() {
$("#dialog-box").dialog("close");
}
2) You just need to refresh the main page. On the subsequent load the dialog should not be opened (in case you do not load it automatically). More information about the method's parameter used below could be read from this answer on StackOverflow.
function OnUpdateClick() {
window.opener.location.reload(false);
}

jQuery Colorbox a form in popup window won't work

I am using colorbox to popup a window with an edit form but when click submit nothing happens. What actually happens is the page just reloads without submitting any data. So here is how I call the popup:
$(document).ready(function() {
$('.itemPopup').colorbox({ transition:'none', width:'90%', height:'90%'});
});
The form works perfectly fine outside the popup.
Can anyone share any ideas why is this happening?
Thanks
$(document).ready(function() {
$('.itemPopup').colorbox({ transition:'none', width:'90%', height:'90%'
,onComplete:function() {
$("#buttonClick").click
}
});
});
write you action in oncomplete block.

How to close colorbox window after submit, and refresh image on parent page?

I am using colorbox for a modal display, which opens for the user when clicking on an image to update it. Once the user uploads a new image and hits submit on the colorbox modal, the modal should close and refresh the image on the parent page.
I am using the following onClick event within the submit button:
<input onClick='window.parent.location.reload(true);' type='submit' value='Submit' name='save_button' id='save_button'>
This closes the modal and refreshes the parent page.php. But for some reason, it does not refresh the old image to show the new image the user just uploaded.
EDIT: Added Colorbox Code
The script that calls the color box was conflicting with other javascript code, so I added the following script above the colorbox code, and changed the $ to jQuery in the code:
<script>jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("iframe").hide();
});
$('input').hide();
</script>
<script>
jQuery(document).ready(function(){
jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%"});
});
</script>
Any ideas?
The browser creates a cache for faster browsing and if your image src[location] is the same after your page refresh, the browser shows you the previous copy of the image. You have to change target of the the image src attribute each reload or do the same via a function, like this:
$('img').each(function(){
$(this).attr('src',$(this).attr('src')+Datetime.now());
});
Here is the code, specific to colorbox script, which ended up working for me. I added onClosed:function(){ location.reload(true); } in the last part of the script below:
<script>jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("iframe").hide();
});
$('input').hide();
</script>
<script>
jQuery(document).ready(function(){
jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%", onClosed:function(){ location.reload(true); } });
});
</script>
Then I added the onClick event inside the submit button code:
<input type='submit' value="Submit' onClick='parent.jQuery.fn.colorbox.close();'>
This closes the colorbox modal while refreshing the parent page, along with the image for all current versions of FF, IE, Opera, and Chrome. It refreshes page, but not the image in Opera.
Very likely the image is cached in the browser, give your image control an ID and call window.parent.document.getElementID("image").src += "?" + [some random number, or maybe the miliseconds]; this will cause it to go back to the server for and reload the image.
EDIT
more fleshed out script:
<script language="javascript" type="text/javascript">
function onSubmitClick(){
parent.jQuery("#img")[0].src += "?" + Math.floor(Math.random()*1001);
//note the above will append a random number between 0 and 1000 to the src.
parent.jQuery.colorbox.close()
}
</script>
<input onClick='onSubmitClick();' type='submit' value='Submit' name='save_button' id='save_button'>
<img src="pic.jpg" id="img">
I also realized a failing in my suggestion is that when the page is reloaded it's just going to load the same image from cache again. So this script is written without the page refresh.

Refreshing the main page after closing a modal window

On a given webpage I have a link that opens a modal window using Thickbox. In that window I have a form which I use to save some data. After I submit the form, I close the modal window. Now my question is: can I refresh the main page after closing the modal window?
Thank you.
Call this after the form is submitted and before the window is closed:
window.opener.location.reload();
Suppose this is the div you show in modal mode. You have to call tb_remove() to close the modal window. So just use location.reload(); before that call.
<div id="modalContent" style="display:none">
<form>
...
</form>
<p style="text-align:center">
<input type="submit" id="Login"value="Click to close"
onclick="window.opener.location.reload();tb_remove()" />
</p>
</div>
Actually Thickbox is no longer being maintained, so it might be better to use a different modal window. That being said, I know Facebox allows you to bind box open and close events like this:
$(document).bind('close.facebox', function() {
// do something here
})
If using facebox simply add window.location.reload(); around line 148, so you end up with something like...
close: function() {
$(document).trigger('close.facebox');
window.location.reload();
return false
}
If still using Thickbox I'm sure it's just as easy. Do a search for "close" and add the code.
You can do this easily with the tinybox plugin:
http://sandbox.scriptiny.com/tinybox2/
var parentWindow = window;
$('#submit-deed-button').click(function() {
TINY.box.show({iframe:'submit_deed.html', closejs:function(){parentWindow.location.reload()}, post:'id=16',width:385,height:470,opacity:20,topsplit:3, boxid:'tinybox_container'})
});
The key is to pass in the parent window to the function as a JS var then you call location.reload() on that object

Categories