Unable to get javascript to do button click from child iframe

Question

I'm playing around with the Jquery UI dialog. I have a page with a gridview, a button that refreshes the gridview and a link. When you click a link, a dialog window popup up with the details of the record.

When I press save on the child page, I have the child page calling a javascript function from the parent page. In this function, it tried to do the button click event but it doesn't seem to be working.

If you look at the showThanks function below, The alert works, the button text changes but the button click doesn't work.

Could this be a security feature? Both pages are on the same page right now.

hmm any clue?

Thanks

Edit - if you click the button manually, it changes the grid (in the button event handler). Yet, the jquery doesn't seem to be going in the button's event handler and the grid doesn't change.

Parent page html

<asp:GridView ID="gv" runat="server" />
<asp:Button ID="btnRefresh" runat="server" />
<a id="popoutUsers" href="popup.aspx?page=Bob" class="OpenNewLink">CLICK ME</a>
<script type="text/javascript">
    $(function () {
        $('.OpenNewLink').click(function () {

            var url = $(this).attr('href');
            var dialog = $('<div id="modal"></div>').appendTo('body')
            $('<iframe id="site" src="' + url + '" />').dialog({
                modal: true
                , close: function (event, ui) {
                    // remove div with all data and events
                    dialog.remove();
                }
            });

            return false;

        });

        showThanks = function () {
            alert("Thanks");
            var button = $("#btnRefresh");
            button.val("hello"); //This works
            button.click(); //Nothing seems to happen
            // button.trigger("click"); (Tried trigger as well but no luck)
        };

    });

</script>

Child page

<div>
    Why hello there
    <asp:Button ID="btnBob" runat="server" Text="click me" />
</div>
<script type="text/javascript">
    $(function () {
        $('#btnBob').click(function (e) {
            e.preventDefault();
            window.parent.showThanks();
            window.parent.$('.ui-dialog-content').filter(function () { return $(this).dialog('isOpen'); }).dialog('close');
            return false;
        });
    });
</script>

No, it isn't. I have clientIDMode set to static in the web.config. All the child's javascript runs as it will close the popup window. For some reason, the button.click of showThanks doesn't want to run. — Lareau
– Lareau, Commented May 10, 2012 at 11:26
I see no event handler for the click event. If you add this to the parent, does it alert? $("#btnRefresh").click(function(){alert("howdy");}); — Mark Schultheiss
– Mark Schultheiss, Commented May 10, 2012 at 11:39
Hi Mark, the howdy alert happens but the button event doesn't seem to fire in the code behind. I tried $("#btnRefresh").click(function () { alert("howdy"); return true; }); but same issue. — Lareau
– Lareau, Commented May 10, 2012 at 11:49

Community · Accepted Answer · 2017-05-23 11:56:28Z

1

So decided to do a new round of google searching and found this link Html Button that calls JQuery and does not post back

I changed my button to the following (added the UseSubmitBehavior)

and now it works. Hopefully I didn't waste people's time...

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered May 10, 2012 at 12:07

Lareau

2,0211 gold badge29 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kingdango Over a year ago

Consider marking your own answer so this question shows as answered.

Collectives™ on Stack Overflow

Unable to get javascript to do button click from child iframe

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related