title: Load jqueryui modal dialog from function in external js
body: <p>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. </p>
  
  <p>this is my CustomFunctions.js file:</p>
  
  <pre><code>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;
  })
  </code></pre>
  
  <p>}    </p>
  
  <p>now, on my List.cshtml view, I have written the following:</p>
  
  
  
  <pre><code>@Html.ActionLink(
          "click me", 
          "List", 
          new {string.Empty},
          new { onclick = "Javascript:showModal();" }
          );
  
  @Scripts.Render("~/bundles/custom");
  &lt;script&gt;
      function showModal()
      {
          var custom = new CustomFunctions();
          custom.loadModalDialog("my-dialog", "show-modal", 400, "List", this);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>Am I missing something? 
  Thanks,</p>