Question

In ASP.NET MVC, I am trying to show a jqueryUI modal dialog, by calling a function that resides in an external js file. The reason for this is that i want to have a js method written somewhere and just call it with some parameters, instead of copypasting it on every page.

this is my CustomFunctions.js file:

function CustomFunctions() { };

CustomFunctions.prototype.loadModalDialog = function (dialogDivID, callerElementDivID, dialogSize, actionControllerName, container)
{
  var dialogElement = $('#' + dialogDivID);
  var callerElement = $('#' + callerElementDivID);
  dialogElement.dialog
  (
    {
        autoOpen: false,
        show: "slide",
        width: dialogSize,
        resizable: false,
        modal: true
    }
  );

callerElement.click(function() 
{
    dialogElement.load("@Url.Action(" + actionControllerName +")", function() 
    {
        $(container).dialog('open');
    });
    return false;
})

}

now, on my List.cshtml view, I have written the following:

@Html.ActionLink(
        "click me", 
        "List", 
        new {string.Empty},
        new { onclick = "Javascript:showModal();" }
        );

@Scripts.Render("~/bundles/custom");
<script>
    function showModal()
    {
        var custom = new CustomFunctions();
        custom.loadModalDialog("my-dialog", "show-modal", 400, "List", this);
    }
</script>

The problem is that the modal dialog does not pop. On client side debugging, it enters the loadModalDialog, it finds all variables properly, it goes through all the js code, throws no error (which puzzles me) but does not show the dialog.

Am I missing something?
Thanks,

Answer 1

this will not work in an external js file

“@Url.Action(” + actionControllerName +”)”

this works when inline with the the template because the tempplate is prased and rendered before it’s sent to the client. when this is put into an exteneral js file it’s a literal string.

custom.loadModalDialog(“my-dialog”, “show-modal”, 400, “List”,
this /*probably not what you’d expect*/);

passing this at this point in the code is passing either the document or window object. you then try to call dialog('open') on the container, which is not the dialog object you are expecting.

There is also the issue of calling jquery outside of the document.ready event. unless showModal() is called after the page loads the jquery functions will not work.

Any of the latest bowsers have a javascript/console for debugging js.