Jquery 插件 timepicker 在切换 jquery 选项卡并返回 asp.net mvc 部分视图后不会重新绑定

发布于 2024-10-27 02:29:30 字数 5739 浏览 1 评论 0原文

目前我正在致力于在 asp.net mvc 3 的选项卡上显示不同的输入表单。每个选项卡都有多个子部分视图。 [见下图]
其中 1 个部分视图包含用于创建会话的表单，其上方是另一个部分视图，其中包含已创建的会话列表（尚未）。在顶部切换选项卡并再次返回时，Francois Gelinas 开发的 jquery timepicker 插件（称为 jquery.ui.timepicker.js）无法重新绑定/选择另一个选项卡后重新初始化，然后返回到编辑课程和程序默认值选项卡。
我使用的是 razor 引擎，而不是默认的 Web 引擎...

母版页/文件 _Layout.cshtml

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  <html>  
  <head>  
   <meta http-equiv="X-UA-Compatible" content="IE=8" />    
   <title>@ViewBag.Title</title>  
   <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"  type="text/javascript">   </script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript">   </script>   
   <script src="@Url.Content("~/Scripts/jquery.livequery.js")" type="text/javascript">  </script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.timepicker.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.js")" type="text/javascript"></script>  

   <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />  
   <link href="@Url.Content("~/Content/jquery-ui-1.8.11.custom.css")" type="text/css" rel="stylesheet" />  
   <link href="@Url.Content("~/Content/jquery-ui-timepicker.css")" type="text/css" rel="stylesheet" />  

   <script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>

Index.cshtml <<这是由主 mvc 应用程序菜单上的创建按钮调用的
它会创建您在上图中看到的 3 个选项卡。

@using MvcHtmlHelpers;
<link href="@Url.Content("~/Content/BoxBackgrounds.css")" rel="stylesheet" type="text/css" />


@{
    ViewBag.Title = "Index";
 }

<h2>Index</h2>
<div id="tabs">
 <ul>
   <li >@Html.TabLink("Edit Student Defaults", "EditStudentDefaults", "Creation") </li>
   <li>@Html.TabLink("Edit Exam and Certification Defaults", "EditCertAndExamDefaults", "Creation") </li>
  <li>@Html.TabLink("Edit Course and Program Defaults", "EditCourseAndProgramDefaults", "Creation")</li>
 </ul>
</div>

<script type="text/javascript" language="javascript">

$(document).ready(function() {
    $("#tabs").tabs({
    cache: false
   });

 });

EditCourseAndProgramDefaults.cshtml <<部分视图选项卡，其中包含部分视图。

@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel
<table width="100%" class="ConfigStudentsGradient" cellspacing="0" border="0" frame="void" style="border-collapse:collapse">
 <tr>
     <td>
        @Html.Partial("ListSessions")
     </td>
     <td>
        @Html.Partial("ListCourses")
     </td>
     <td>
        @Html.Partial("ListPrograms")
    </td>


 </tr>
 <tr>
     <td>
        @Html.Partial("AddSession")
     </td>
     <td>
         @Html.Partial("AddCourse")
     </td>
     <td>
         @Html.Partial("AddProgram")
     </td>

 </tr>

</table>

AddSession.cshtml <<使用时间选择器的部分视图

@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel  
@using (Html.BeginForm()) {
<script type="text/javascript">
 $(document).ready(function () {
     $('#StartTime').timepicker({
         showPeriod: true,
         showLeadingZero: false
     });
 });

@Html.ValidationSummary(true)
<fieldset>
    <legend>Session</legend>
        <table>
<tr>
                <td>
                    <span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime"  }) </span>


                    @Html.ValidationMessageFor(model => model.SessionStartTime)
                </td>

我已经研究这个主题几天了。我尝试了以下想法/选项方法...

尝试
使用 livequery
在输入字段的每个 onclick 事件后重新创建绑定
我尝试查看其他人如何使用另一个控件（如 datepicker，因为这个插件与它非常相似。

我知道发生了什么：当我切换回选项卡时，时间选择器正在失去其绑定。我发现在 firebug 中创建了一个隐藏的时间选择器对象，并且当切换选项卡时它不会消失...但是，当再次选择选项卡时，我似乎无法重新绑定或回忆重新创建的原始方法。我知道 document.ready 仅在第一次加载部分视图时被调用 1x...
我尝试执行以下操作：在

<script type="text/javascript">
    $(document).ready(function() {
        initJQueryWidgets();
    });

    function initJQueryWidgets() {
        $("[ID$=StartTime1]").timepicker({
                showPeriod: true,
                showLeadingZero: false,
                zIndex: 1
            });
    }


</script>

我也尝试过在上面脚本括号中的页面顶部，

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
         initJQueryWidgets();
    });

我尝试在输入框的 onClick 事件处理程序中调用 initJqueryWidgets

 <span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime", @onClick="initJqueryWidgets"  }) </span>

我一直收到的错误是 $("#StartTime").timepicker 不是一个函数 (?)()52（第 2 行）匿名()创建（第29行） [打破此错误] $("#StartTime").timepicker({showPeriod: true, showLeadingZero: false});

原文

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]
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 jquery timepicker plugin by Francois Gelinas known as jquery.ui.timepicker.js fails to rebind/reinitialize after selecting another tab and then returning to the tab Edit Course and Program Defaults.
I'm using the razor engine, instead of the default web engine...

The masterpage/file _Layout.cshtml

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  <html>  
  <head>  
   <meta http-equiv="X-UA-Compatible" content="IE=8" />    
   <title>@ViewBag.Title</title>  
   <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"  type="text/javascript">   </script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript">   </script>   
   <script src="@Url.Content("~/Scripts/jquery.livequery.js")" type="text/javascript">  </script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.timepicker.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.js")" type="text/javascript"></script>  

   <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />  
   <link href="@Url.Content("~/Content/jquery-ui-1.8.11.custom.css")" type="text/css" rel="stylesheet" />  
   <link href="@Url.Content("~/Content/jquery-ui-timepicker.css")" type="text/css" rel="stylesheet" />  

   <script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>

Index.cshtml << this is called by the create button on the main mvc application menu
It creates the 3 tabs you see in the picture above.

@using MvcHtmlHelpers;
<link href="@Url.Content("~/Content/BoxBackgrounds.css")" rel="stylesheet" type="text/css" />


@{
    ViewBag.Title = "Index";
 }

<h2>Index</h2>
<div id="tabs">
 <ul>
   <li >@Html.TabLink("Edit Student Defaults", "EditStudentDefaults", "Creation") </li>
   <li>@Html.TabLink("Edit Exam and Certification Defaults", "EditCertAndExamDefaults", "Creation") </li>
  <li>@Html.TabLink("Edit Course and Program Defaults", "EditCourseAndProgramDefaults", "Creation")</li>
 </ul>
</div>

<script type="text/javascript" language="javascript">

$(document).ready(function() {
    $("#tabs").tabs({
    cache: false
   });

 });

EditCourseAndProgramDefaults.cshtml << partial view tab with partial views inside it.

@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel
<table width="100%" class="ConfigStudentsGradient" cellspacing="0" border="0" frame="void" style="border-collapse:collapse">
 <tr>
     <td>
        @Html.Partial("ListSessions")
     </td>
     <td>
        @Html.Partial("ListCourses")
     </td>
     <td>
        @Html.Partial("ListPrograms")
    </td>


 </tr>
 <tr>
     <td>
        @Html.Partial("AddSession")
     </td>
     <td>
         @Html.Partial("AddCourse")
     </td>
     <td>
         @Html.Partial("AddProgram")
     </td>

 </tr>

</table>

AddSession.cshtml << partial view that uses the timepicker

@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel  
@using (Html.BeginForm()) {
<script type="text/javascript">
 $(document).ready(function () {
     $('#StartTime').timepicker({
         showPeriod: true,
         showLeadingZero: false
     });
 });

@Html.ValidationSummary(true)
<fieldset>
    <legend>Session</legend>
        <table>
<tr>
                <td>
                    <span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime"  }) </span>


                    @Html.ValidationMessageFor(model => model.SessionStartTime)
                </td>

I researched this topic for a couple of days now.
I tried the following ideas/options methods...

using the live
using livequery
trying to recreate the binding after each onclick event for the input field
i tried to see how others solved this problem using another control like the
datepicker, since this plugin is very similar to it.

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...
I tried doing the following:
in

<script type="text/javascript">
    $(document).ready(function() {
        initJQueryWidgets();
    });

    function initJQueryWidgets() {
        $("[ID$=StartTime1]").timepicker({
                showPeriod: true,
                showLeadingZero: false,
                zIndex: 1
            });
    }


</script>

I also tried
at the top ofthe page in the script bracket show above

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
         initJQueryWidgets();
    });

I then tried calling the initJqueryWidgets in the onClick even handler for the input box

 <span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime", @onClick="initJqueryWidgets"  }) </span>

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});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恍梦境° 2024-11-03 02:29:31

timepicker 在 DOM 中创建一个实例一次，并在每次显示时使用该实例（内联显示除外），这就是您在 DOM 中看到它的原因，这并不意味着它与输入分离。

如果时间选择器现在在单击时显示，则可能意味着存在 zIndex 问题或丢失了其单击事件。

(document).ready(function () {
 $('#StartTime').timepicker({
     showPeriod: true,
     showLeadingZero: false,
     zIndex: 9999
 });

});

如果 #StartTime 失去了它的绑定，您必须在再次绑定它之前删除它的“hasTimePicker”类。

今晚我将调查日期选择器在这种情况下如何反应，并使其也适用于时间选择器，当我找到解决方案时将进行更新。

The timepicker create an instance in the DOM once and use this instance every time it is displayed except for inline display, that's why you see it in your DOM, it does not mean that it detached from the input.

If the timepicker is now showing on click, that probably mean that there is a zIndex problem or it lost its click event.

(document).ready(function () {
 $('#StartTime').timepicker({
     showPeriod: true,
     showLeadingZero: false,
     zIndex: 9999
 });

});

If the #StartTime is loosing it's binding, you have to remove the "hasTimePicker" class to it before binding it again.

I'll investigate tonight as to how the datepicker react in this situation and make it work on the timepicker too, will update when I find the solution.

回复收藏 0 原文

深海蓝天 2024-11-03 02:29:31

我通过删除加载其他 jquery 版本的调用来修复它！单击选项卡时检查 Firebug 控制台，并查看正在处理哪些 get 命令。确保仅链接 1 个版本的 jquery！哇！另外，我发现在部分视图中删除所有脚本链接引用，并将其放入母版页中，更容易跟踪和更正。

特别感谢 Francois Gelinas 抽出时间提供帮助，同时也感谢 Black Box Operations 的帮助。

回复收藏 0 原文

℉服软 2024-11-03 02:29:31

当未查看每个选项卡时，Jquery 选项卡通常会禁用包含每个选项卡元素的 div。也就是说，如果 Jquery 找不到该元素，则它无法创建日期选择器，因此您必须在选择选项卡时触发一个事件，首先检查该元素是否存在，然后创建日期选择器因此。

$('#tabs a#idOfTabContainingStartTime').bind('click', function(){
    if( $("#StartTime").length ){
         $('#StartTime').timepicker({
             showPeriod: true,
             showLeadingZero: false
         });
    }
}

如果这不能解决您的问题，那么可能是因为 Jquery 对整个 tabs/div/hiding 的事情有点满意。当您选择另一个选项卡时，您当前查看的选项卡将被隐藏，但 Jquery 也喜欢隐藏选项卡中的所有内容，因此您可能必须创建另一个调用来检查当前隐藏的任何元素在选项卡内并迭代显示它们。

$('#tabs a#idOfTabContainingStartTime :hidden').each(function(){
    $(this).show();
});

Jquery tabs often disable the div containing the elements for each tab when it's not being viewed. That said, if Jquery can't find the element then it can't create the date picker, so you'll have to fire off an event when the tab is selected to first check to see if the element exists then create the date picker accordingly.

$('#tabs a#idOfTabContainingStartTime').bind('click', function(){
    if( $("#StartTime").length ){
         $('#StartTime').timepicker({
             showPeriod: true,
             showLeadingZero: false
         });
    }
}

If that doesn't solve your problem, then it's probably because Jquery gets a bit trigger happy with the whole tabs/div/hiding thing. When you select another tab the tab you were currently viewing is hidden, but Jquery also likes to hide everything within the tab as well, so you may have to create another call that checks for any elements currently being hidden within the tab and iteratively show them.

$('#tabs a#idOfTabContainingStartTime :hidden').each(function(){
    $(this).show();
});

回复收藏 0 原文

~没有更多了~

关于作者

浅暮の光

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

Jquery 插件 timepicker 在切换 jquery 选项卡并返回 asp.net mvc 部分视图后不会重新绑定

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

Jquery 插件 timepicker 在切换 jquery 选项卡并返回 asp.net mvc 部分视图后不会重新绑定

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。