How to trigger iframe post from parent click event

Question

I am using Jquery multiple file upload control to upload the multiple files. It is very good plug in, All operations are working fine.

I want to load that plug in iframe and i should trigger the global start post back method from parent window

Following is my sample code

LibraryDocs.aspx(parent interface)

> <iframe style="width: 90%; height: 300px" id="multipleFileUploadFrame"
> src="../Secure/MultipleFileUpload.htm" runat="server" />

> <asp:Button ID="postCompleteButton" runat="server" Text="Post Complete" />

Here is my MultipleFileUpload.htm

<div id="fileupload">
        <form id="multipleUpload" action="../Secure/MultipleUploadHandler.ashx" method="POST"
        enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
                <span>Add files...</span>
                <input id="file" type="file" name="files[]" multiple />
            </label>
            <button id="startUpload" type="submit" class="start">
                Start upload</button>
            <button type="reset" class="cancel">
                Cancel upload</button>
            <!--<button type="button" class="delete">Delete files</button>-->

        </div>
        </form>
        <div class="fileupload-content">
            <table class="files">
            </table>
            <div class="fileupload-progressbar">
            </div>
        </div>
    </div>

So my problem is after clicking postCompleteButton button in parent window it should fire the post event(start button) in child window which is in iframe

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

If both pages are in the same origin, you can reffer to this, otherwise use library like easyXDM (http://easyxdm.net/wp/). It will allow you to exchange messages or setup remote procedure calls between the iframe and the container windows. Check this page from the documentation - remote procedure calls

edited May 23 '17 at 10:25

Community

1
1

answered Oct 30 '13 at 13:05

dobrinov

594
4
11

Thax dobrinov for your response, I tried to do this, Since it is in same origin i used the first method, But unfortunately it didn't work for me. Isn't there any Jquery solution for this rather than using javascript. – KDS Oct 30 '13 at 20:25

score 0 · Accepted Answer · answered Oct 30 '13 at 12:40

If you are using jQuery, you can access the iframe DOM using

$('#<%= multipleFileUploadFrame.ClientID %>').contents()

With this in mind, to click the Start upload button in the iframe, use

$('#<%= multipleFileUploadFrame.ClientID %>').contents().find('#startUpload').click();

Please keep in mind that this will only work if the parent and iframe source is on the same domain as the browser will adhere to the same origin policy

How to trigger iframe post from parent click event

2 Answers2