Javascript events and recursion issue

Question

I am using jQuery Dialog to load other pages into a dialog on the main page. The other pages may have anchor tags, and I am using the completed event of the load function to select all of the anchor tags in the div into which the content was loaded. I then wire up the anchor tags click event handler so that the content is loaded into the div which is contained on the main page. This works, however only twice. When you run the sample code below, Partial1 appears in the dialog. When I click on the Partial2 link in the dialog, Partial1 is loaded into the dialog, however, this time when I click on the Partial2 link, it loads in the main page. What am I doing wrong and/or failing to grasp?

Home/Index:

<a href="/Home/Partial1" id="help">Partial 1</a>

<div id="dialog" style="display: none">

</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#help").click(function () {
            adjustNestedAnchors($(this));
            $("#dialog").dialog().show();
            return false;
        });

        function adjustNestedAnchors(element) {
            $("#dialog").load($(element).attr("href"),
                function (response, status, xhr) {
                    if (status != "error") {
                        $("#dialog a").click(function () {
                                $("#dialog").load($(this).attr("href"), adjustNestedAnchors($(this)));
                                return false;
                        });
                    }
                });
        }
    });
</script>

Home/Partial1

This is a sample partial view, which has a link back to <a href="/Home/Partial2">Partial2</a>.

Home/Partial2

This is a sample partial view, which has a link back to <a href="/Home/Partial1">Partial1</a>.

ruakh · Accepted Answer · 2013-06-24 04:00:53Z

2

The problem is that this line:

$("#dialog").load($(this).attr("href"), adjustNestedAnchors($(this)));

will call adjustNestedAnchors on the link before calling load on the div, so there's nothing that adjusts the nested anchors after the content has been loaded.

Instead, I believe what you want is something like this:

<a href="/Home/Partial1" id="help">Partial 1</a>

<div id="dialog" style="display: none">

</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#help").click(function () {
            loadDialog(this);
            $("#dialog").dialog().show();
            return false;
        });

        // load link in dialog, and adjust its links to load inside it
        function loadDialog(link) {
            $("#dialog").load($(link).attr("href"), function (response, status, xhr) {
                $("#dialog a").click(function () {
                    loadDialog(this);
                    return false;
                });
            });
        }
    });
</script>

(Disclaimer: not tested.)

Note that I've renamed adjustNestedAnchors to loadDialog, which I think is a more accurate description of its primary function.

edited Jun 24, 2013 at 4:00

answered Jun 23, 2013 at 18:43

ruakh

185k29 gold badges292 silver badges324 bronze badges

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

1 Comment

codechurn Over a year ago

This works great! Thank you for pointing out my error and the function name suggestion!

Collectives™ on Stack Overflow

Javascript events and recursion issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related