Question

I have som problems regarding getting javascript to fire correctly inside dialog.

Below is the code from my scripts.js wich i currently use to load a dialog

function LoadDialog(url, title) {
    var DialogBox = $('<div class="dialog-container"></div>').dialog({ modal: true, autoOpen: false, resizeable: true }).dialog({ width: 500, height: 'auto' });
    DialogBox.html('<div class="ajax-load"><img src="/Content/loading.gif" alt="loading"></div>').dialog({ buttons: null, title: 'Loading..' });
    DialogBox.dialog('open').load(url, function () {
        DialogBox.dialog({ title: title, Buttons: null, position: 'center', close: function (ev, ui) { $(this).dialog("destroy"); } });
    });
}

$(function () {
    $('.as-dialog').click(function (e) { LoadDialog($(this).attr('href'), $(this).attr('title')); return false; });
});

Though no javascript code fires by default inside the dialog. For example i load a small form with unobtrusive validation into the dialog. No body, head etc, only a container div and the form itself. By default validation dont work and if i add event handlers for the form under script.js $(function(){}) it dont fire. If i add the following js references and codeblock to be loaded with the form it works with one problem:

<script src="/Scripts/libs/jquery.validate.min.js"></script>
            <script src="/Scripts/libs/jquery.validate.unobtrusive.js"></script>
            <script type="text/javascript">
                $(function () {
                    $('#form_Create').submit(function (e) {
                        e.preventDefault();
                    });
                });
            </script>

The non functioning regarding the code above is that validation will always work but if i open the dialog, close it, then open it again, the preventdefault will stop working and the form will post. Could this perhaps be a multiple load of script issue or something? Though since no ‘doc ready’ code works in dialog if placed in scripts.js (standard javascript functions work though) i dont really have another option.
Is there a better way to work with javascript inside dynamically loaded files or do i have to place the entire forms in the parent page to be able to work against them reliably?
Any input on how you should handle this?

Answer 1

The below method to open the dialog seems to have solved my primary problem:

var Box = $('#dialog-container');
    if (Box.length === 0) {
        Box = $('<div id="dialog-container"></div>').appendTo('body');
    } else { Box.empty(); }

Unsure atm if the empty() is needed because it seems that load does this anyway. But with this code i can open the dialogs how many times i like and the codeblock will still execute.

Though my issue / question regarding if i have to live with calling some script files from the loaded pages or there is a better way of enabling scriptrunning from the parental loaded files. But atleast everything seems to work well now.