Javascript functions don't work after MVC Upgrade

Question

I have upgraded a solution from MVC 3 to MVC 4.

I have 2 specific JavaScript functions that does not work anymore after upgrade.

1. Tabs

This is how the tabs now render

I suspect it has to do with the JavaScript version with the new framework? I am not sure.

Code:

<script type="text/javascript">
$(function () {
    $("#tabs").tabs();

    $('.taberize').each(function () {
        var e = $(this);
        var panels = e.parents('.ui-tabs-panel');
        if (panels.length == 0) { return; }
        var tabId = $(panels[0]).attr('id');
        e.attr('href', e.attr('href') + '#' + tabId);
    });

    $(".container").each(function (e) {
        var height = $(document).height() - 230;
        $(this).height(height);
    });
});

---

2. On Row Hover function

The On-Row-Hover function does not work anymore, I have a "Action Menu" on the left side of my WebGrid, and on row hover, it display functions like Edit and Details menu... this is done in JavaScript.

 <script type="text/javascript"> var prevRow = null; $('#gridData table tbody tr').not(':first').hover(function() { $('#myMenu').hide(); if (prevRow != this) { if (prevRow != null) { $(prevRow).css("background",""); $('.actionButtons', $(prevRow)).hide(); } $(this).css("background","#EDEFFF"); $('.actionButtons', $(this)).show(); prevRow = this; } }, function() { if (!$('#myMenu').is(":visible")) { if (prevRow != null) { $(prevRow).css("background",""); $('.actionButtons', $(prevRow)).hide(); prevRow = null; } } }); $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, function(action, el, pos) { contextMenuWork(action, el.parents('tr')[0].id , pos); }); function contextMenuWork(action, id) { switch (action) { case "insert": { if($.browser.msie&&$.browser.version.substr(0,1)<8){var url='@Url.Action("Create", "Account")';document.location=url}else{CreateNewAccount()} break; } case "createtask": { var url = '@Url.Action("CreateFromAccount", "UserTask")' + '/' + id; document.location = url; break; } case "linkassessment": { var url = '@Url.Action("CreateFromAccount", "Questionnaire")' + '/' + id; document.location = url; break; } case "details": { var url = '@Url.Action("Details", "Account")' + '/' + id; document.location = url; break; } case "edit": { var url = '@Url.Action("Edit", "Account")' + '/' + id; document.location = url; break; } case "createperson": { if($.browser.msie&&$.browser.version.substr(0,1)<8){var url='@Url.Action("Create", "Person")';document.location=url}else{CreateNewPerson(id)} break; } case "createopportunity": { var url = '@Url.Action("Create", "Opportunity")' + '/' + id; document.location = url; break; } } } }); </script> <div id="gridData"> <ul id="myMenu" class="contextMenu" style="display: none"> <li class="insert"><a href="#insert" id="create">Create New</a></li> <li class="detail"><a href="#details">Details</a></li> <li class="edit"><a href="#edit">Edit</a></li> </ul> </div> <table> <tr> <th class="field-actions-account" style="width: 75px"> <a href="#">Actions</a> </th> <tr id="@Html.Encode(item.AccountID)"> <td> <div class="actionButtons" style="display:none"> <a href="@Url.Action("Edit", new { id = item.AccountID }) " style="text-decoration:none" title="Edit"><img src="@Html.Raw(@Url.Content("~/Content/img/document-pencil-icon.png"))" alt="Edit" title="Edit" style="border:none"/> </a> <a href="@Url.Action("Details", new { id = item.AccountID }) " style="text-decoration:none" title="Details"><img src="@Html.Raw(@Url.Content("~/Content/img/testDetailsIcon.gif"))" alt="Details" title="Details" style="border:none" /> </a> <img src="@Html.Raw(@Url.Content("~/Content/img/options.gif"))" alt="More Options" class="openmenu" title="More Options"/> </div> 

Answer 1

put your javascript code in section like this:

  @section Head
  {
    <script type="text/javascript">
    $(function () {
    $("#tabs").tabs();

    $('.taberize').each(function () {
      var e = $(this);
      var panels = e.parents('.ui-tabs-panel');
      if (panels.length == 0) { return; }
      var tabId = $(panels[0]).attr('id');
      e.attr('href', e.attr('href') + '#' + tabId);
    });

    $(".container").each(function (e) {
       var height = $(document).height() - 230;
       $(this).height(height);
      });
    });
   </script>
  }

then be sure your "@RenderSection("Head", false) is under your @Scripts.Render("~/bundles/jquery") in your layout like this :

@Scripts.Render("~/bundles/jquery")
@RenderSection("Head", false)

and finally check your BundleConfig class has a code like this file :

 public static void RegisterBundles(BundleCollection bundles)
{
  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
             "~/Scripts/jquery-{version}.js"));
}

Answer 2

问题是，以某种方式修改了jquery.validate文件，这导致了我的问题。