title: How to get fancybox working with html actionlink in mvc4 razor
body: <p>I am trying to show a fancybox modal popup when a dynamically created html actionlink is clicked from within a table.  I am using MVC4 with razor.  I have tried multiple things from reading posts on stackoverflow and other sites, but nothing is working.  I am fairly new to MVC4 and javascript/jquery.</p>
  
  <p>The current error I am getting is: object doesn't support property or method 'fancybox' when loading the Search page.</p>
  
  <p><strong>_Layout.cshtml page:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      @*&lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;*@
      &lt;meta name="viewport" content="width=device-width" /&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/Scripts/js")
  &lt;link rel="stylesheet" href="~/Content/style.css" type="text/css" /&gt;
      &lt;!-- Add jQuery library --&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="~/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /&gt;
  &lt;script type="text/javascript" src="~/fancybox/jquery.fancybox.pack.js?v=2.1.5"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="~/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /&gt;
  &lt;script type="text/javascript" src="~/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="~/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="~/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /&gt;
  &lt;script type="text/javascript" src="~/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.7"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $("#divForm").fancybox({
          'autoScale': false,
          'autoDimensions': true,
          'transitionIn': 'none',
          'transitionOut': 'none',
          'hideOnOverlayClick': false,
          'hideOnContentClick': true,
          'showCloseButton': true,
          'type': 'ajax'
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;div id="body"&gt;
          @RenderSection("featured", required: false)
          &lt;section class="content-wrapper main-content clear-fix"&gt;
              @RenderBody()
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;footer&gt;
          &lt;div class="content-wrapper"&gt;
              &lt;div class="float-left"&gt;
                  &lt;p&gt;&amp;copy; @DateTime.Now.Year - PipelineRx&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
      @Scripts.Render("~/bundles/jquery")
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Search Controller</strong></p>
  
  <pre><code>public ActionResult Index()
  {
      return View();
  }
  
  public ActionResult Popup()
  {
      return View();
  }
  </code></pre>
  
  <p><strong>Index.cshtml</strong>
  Contains actionlinks in the rows</p>
  
  <pre><code>@using (Html.BeginForm("Index", "Search", FormMethod.Get, new { name = "searchForm", id = "searchForm" }))
  {
  &lt;div&gt;
      &lt;table id="orderSheetList" class="table-standard"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Last Name&lt;input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'LastName','True');" /&gt;
                      &lt;input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'LastName','False');" /&gt;
                  &lt;/th&gt;
                  &lt;th&gt;First Name&lt;input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'FirstName','True');" /&gt;
                      &lt;input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'FirstName','False');" /&gt;
                  &lt;/th&gt;
                  &lt;th&gt;Received Date Time&lt;input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'ReceivedDateTime','True');" /&gt;
                      &lt;input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'ReceivedDateTime','False');" /&gt;
                  &lt;/th&gt;
                  &lt;th&gt;Client Name&lt;input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'ClientFullName','True');" /&gt;
                      &lt;input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'ClientFullName','False');" /&gt;
                  &lt;/th&gt;
                  &lt;th&gt;XML&lt;/th&gt;
                  &lt;th&gt;Transaction ID&lt;input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'TransactionID','True');" /&gt;
                      &lt;input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'TransactionID','False');" /&gt;
                  &lt;/th&gt;
                  &lt;th&gt;ID&lt;input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'ID','True');" /&gt;
                      &lt;input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'ID','False');" /&gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @foreach ( item in Model.Orders)
              {
              &lt;tr class="clickable"&gt;
                  &lt;td&gt;
                      @Html.Encode(item.LastName)&lt;/td&gt;
                  &lt;td&gt;
                      @Html.Encode(item.FirstName)&lt;/td&gt;
                   &lt;td&gt;
                      @Html.Encode(item.DateTime)&lt;/td&gt;
                  &lt;td&gt;
                      @Html.Encode(item.ClientFullName)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @*@Html.Encode(item.XML)*@
                      @Html.ActionLink("XML", "Popup", "Search", null, new {Class = "fancybox"})
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.Encode(item.TransactionID)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.Encode(item.ID)&lt;/td&gt;
              &lt;/tr&gt;
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  }
  </code></pre>
  
  <p><strong>Popup.cshtml</strong>
  A page for the fancybox which will be modified later.</p>
  
  <pre><code>&lt;text&gt;
          &lt;script type="text/javascript"&gt;
              $(function () {
                  $.fancybox.open({ "content": "This is a popup" });
              });
          &lt;/script&gt;
  &lt;/text&gt;
  
  &lt;div id="divForm"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>