CODEWITHSUNDEEP
javascriptjqueryasp.netjquery-uiiframe
Lareau
Lareau

Reputation: 2011

Unable to get javascript to do button click from child iframe

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>

Upvotes: 1

Views: 1380

Answers (1)

Lareau
Lareau

Reputation: 2011

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...

Upvotes: 1

Related Questions