title: Jquery plugin timepicker doesn't rebind after switching jquery tabs and returning in asp.net mvc partial views
body: <p>Currently I am working on displaying different input forms on tabs in asp.net mvc 3.
   Each tab has several child partial views. [See the image below]<br>
   1 of the partial views contains a form for creating Sessions, and above it is another  partial view with a list of sessions created (none yet)..
   When switching tabs at the top, and back again the <strong><em>jquery timepicker plugin by  Francois Gelinas</em></strong> known as <strong>jquery.ui.timepicker.js</strong> fails to rebind/reinitialize  after selecting another tab and then returning to the tab Edit Course and Program  Defaults.<br>
      I'm using the razor engine, instead of the default web engine...</p>
  
  <p>The masterpage/file  <strong>_Layout.cshtml</strong></p>
  
  <pre><code>  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;  
    &lt;html&gt;  
    &lt;head&gt;  
     &lt;meta http-equiv="X-UA-Compatible" content="IE=8" /&gt;    
     &lt;title&gt;@ViewBag.Title&lt;/title&gt;  
     &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"  type="text/javascript"&gt;   &lt;/script&gt;  
     &lt;script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"&gt;   &lt;/script&gt;   
     &lt;script src="@Url.Content("~/Scripts/jquery.livequery.js")" type="text/javascript"&gt;  &lt;/script&gt;  
     &lt;script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"&gt;&lt;/script&gt;  
     &lt;script src="@Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"&gt;&lt;/script&gt;  
     &lt;script src="@Url.Content("~/Scripts/jquery.ui.timepicker.js")" type="text/javascript"&gt;&lt;/script&gt;  
     &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.js")" type="text/javascript"&gt;&lt;/script&gt;  
  
     &lt;link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /&gt;  
     &lt;link href="@Url.Content("~/Content/jquery-ui-1.8.11.custom.css")" type="text/css" rel="stylesheet" /&gt;  
     &lt;link href="@Url.Content("~/Content/jquery-ui-timepicker.css")" type="text/css" rel="stylesheet" /&gt;  
  
     &lt;script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"&gt;&lt;/script&gt;  
  </code></pre>
  
  <p><strong>Index.cshtml</strong>  &lt;&lt; this is called by the create button on the main mvc application menu<br>
      It creates the 3 tabs you see in the picture above.</p>
  
  <pre><code>@using MvcHtmlHelpers;
  &lt;link href="@Url.Content("~/Content/BoxBackgrounds.css")" rel="stylesheet" type="text/css" /&gt;
  
  
  @{
      ViewBag.Title = "Index";
   }
  
  &lt;h2&gt;Index&lt;/h2&gt;
  &lt;div id="tabs"&gt;
   &lt;ul&gt;
     &lt;li &gt;@Html.TabLink("Edit Student Defaults", "EditStudentDefaults", "Creation") &lt;/li&gt;
     &lt;li&gt;@Html.TabLink("Edit Exam and Certification Defaults", "EditCertAndExamDefaults", "Creation") &lt;/li&gt;
    &lt;li&gt;@Html.TabLink("Edit Course and Program Defaults", "EditCourseAndProgramDefaults", "Creation")&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript" language="javascript"&gt;
  
  $(document).ready(function() {
      $("#tabs").tabs({
      cache: false
     });
  
   });
  </code></pre>
  
  <p></p>
  
  <p><strong>EditCourseAndProgramDefaults.cshtml</strong>  &lt;&lt; partial view tab with partial views inside it.</p>
  
  <pre><code>@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel
  &lt;table width="100%" class="ConfigStudentsGradient" cellspacing="0" border="0" frame="void" style="border-collapse:collapse"&gt;
   &lt;tr&gt;
       &lt;td&gt;
          @Html.Partial("ListSessions")
       &lt;/td&gt;
       &lt;td&gt;
          @Html.Partial("ListCourses")
       &lt;/td&gt;
       &lt;td&gt;
          @Html.Partial("ListPrograms")
      &lt;/td&gt;
  
  
   &lt;/tr&gt;
   &lt;tr&gt;
       &lt;td&gt;
          @Html.Partial("AddSession")
       &lt;/td&gt;
       &lt;td&gt;
           @Html.Partial("AddCourse")
       &lt;/td&gt;
       &lt;td&gt;
           @Html.Partial("AddProgram")
       &lt;/td&gt;
  
   &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>AddSession.cshtml</strong>  &lt;&lt; partial view that uses the timepicker</p>
  
  <pre><code>@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel  
  @using (Html.BeginForm()) {
  &lt;script type="text/javascript"&gt;
   $(document).ready(function () {
       $('#StartTime').timepicker({
           showPeriod: true,
           showLeadingZero: false
       });
   });
  </code></pre>
  
  <p></p>
  
  <pre><code>@Html.ValidationSummary(true)
  &lt;fieldset&gt;
      &lt;legend&gt;Session&lt;/legend&gt;
          &lt;table&gt;
  &lt;tr&gt;
                  &lt;td&gt;
                      &lt;span class="SessionStartTime"&gt;@Html.TextBoxFor(model =&gt; model.SessionStartTime, new {@id = "StartTime"  }) &lt;/span&gt;
  
  
                      @Html.ValidationMessageFor(model =&gt; model.SessionStartTime)
                  &lt;/td&gt;
  </code></pre>
  
  <p>I researched this topic for a couple of days now.
  I tried the following ideas/options methods...</p>
  
  <ol>
  <li>using the live </li>
  <li>using livequery</li>
  <li>trying to recreate the binding after each onclick event for the input field</li>
  <li>i tried to see how others solved this problem using another control like the
  datepicker, since this plugin is very similar to it.</li>
  </ol>
  
  <p>I know what is happening:   the timepicker is losing its binding, when i switch back to the tab.  I discovered in firebug there is a hidden timepicker object created, and it doesn't die when the tabs are switched... however, I cannot seem to rebind or recall the original method to recreate when the tab is selected again. I know document.ready is only called 1x when the partial view is 1st loaded...<br>
  I tried doing the following:
  in</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          initJQueryWidgets();
      });
  
      function initJQueryWidgets() {
          $("[ID$=StartTime1]").timepicker({
                  showPeriod: true,
                  showLeadingZero: false,
                  zIndex: 1
              });
      }
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I also tried 
  at the top ofthe page in the script bracket show above</p>
  
  <pre><code>Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
           initJQueryWidgets();
      });
  </code></pre>
  
  <p>I then tried calling the initJqueryWidgets in the onClick even handler for the input box</p>
  
  <pre><code> &lt;span class="SessionStartTime"&gt;@Html.TextBoxFor(model =&gt; model.SessionStartTime, new {@id = "StartTime", @onClick="initJqueryWidgets"  }) &lt;/span&gt;
  </code></pre>
  
  <p>The errors I consistently received were
  $("#StartTime").timepicker is not a function
  (?)()52 (line 2)
  anonymous()Creation (line 29)
  [Break On This Error] $("#StartTime").timepicker({showPeriod: true, showLeadingZero: false}); </p>