与同一页上的两个jquery datepickers冲突 [英] Conflict with two jquery datepickers on same page

查看:103
本文介绍了与同一页上的两个jquery datepickers冲突的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以这里是设置:
我有一个jquery选项卡里面有一个jquery模式对话框窗口中的两个jquery日期检查器:

So here is the setup: I have two jquery datepickers, inside a jquery tab, inside a jquery modal dialog window:

\---/\---/\---/_______________
/                            /
\                            \
/  DATEPICKER1               /
\                            \
/  DATEPICKER2               /
\                            \
/                            /
\                            \
/____________________________/

第一个datepicker正常运行,但是当我尝试在第二个datepicker中单击日期时,它只需激活第一个datepicker。你跟着吗:)

The first datepicker functions normally, but when I try to click a date in the second datepicker it simply activates the first one. Did you follow that? :)

总而言之,点击datepicker2中的日期激活datepicker1。

So to sum up, clicking a date in datepicker2 activates datepicker1.

我不知道为什么这是发生的 - 它们具有不同的ids和名称,如下所示。

I have no idea why this is happening - they have different ids and names, as outlined below.

创建我刚刚使用的日期检测器:

To create the datepickers I'm just using:

$(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
});

字段简单:

<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />

我正在使用jQuery v1.9.0和jQueryui v1.10.0。

I'm using jQuery v1.9.0 and jQueryui v1.10.0.

有什么想法吗?作为一个警告,由于雇主的限制,我无法发布实际代码,但如果您需要任何澄清,我可以回答大多数问题。任何和所有的帮助将非常感谢!!

Any thoughts on this? As a caveat, I am unable to post actual code due to restrictions from my employer, but I can answer most questions if you need any clarification. Any and all help would be greatly appreciated!!

推荐答案

更新:
看起来像下面描述的行为在另一个stackoverflow问题中被解决了:

阻止jQuery UI对话框将焦点设置为第一个文本框

UPDATE: It looks like the behavior described below was addressed in another stackoverflow question here:
Prevent jQuery UI dialog from setting focus to first textbox

对于重复的问题 - 如果我知道这是我会快速解决的问题!!!

Apologies for the "duplicate" question - if I had known this was the problem I would have figured it out quickly!!!

############# ################################################################################################## #################

################################################################################

那么这个决议很简单,也许有人可以启发我为什么这样以这种方式工作,因为我现在有点无知。

Well, the resolution is very simple, and perhaps someone can enlighten me as to why it works this way because I'm a bit clueless at the moment.

这是我做的:

我添加了另外两个文本输入字段表单(需要),并重新排列布局,以便其中一个新的输入字段是第一个元素(在左上角),如下所示:

Here's what I did:
I added another two text input fields to the form (they were needed) and reordered the layout so that one of those new input fields was the "first" element (in the top-left corner), like so:

\---/\---/\---/_______________
/                            /
\                            \
/  TEXTFIELD1   DATEPICKER1  /
\                            \
/  TEXTFIELD2   DATEPICKER2  /
\                            \
/                            /
\                            \
/____________________________/

突然,问题已经消失了!但是,我注意到一个有趣的行为:

当我在EITHER datepicker中选择一个日期时,光标会立即返回到第一个文本字段。
所以如果这个情况发生在我没有文本字段的日期检测器的时候,这个行为就意味着光标会立即跳回到第一个可能导致我遇到的问题的日期戳。

Suddenly the problem has vanished! However, I notice an interesting behavior:
When I select a date in EITHER datepicker, the cursor then immediately jumps back to the first text field. So if this were happening when I had the datepickers with no text fields, that behavior would mean that the cursor would immediately have jumped back to the first datepicker which could have cause the issue I was having.

现在,为什么它以这种方式工作,我不知道。我尝试为各种textfields / datepickers设置tabindex参数,但没有改变行为。

Now, as to WHY it works this way I have no idea. I tried setting the tabindex parameters for the various textfields/datepickers but that didn't change the behavior.

无论如何,我很感激所有人的输入 - 这是一个奇怪的问题,但我永远不会忘记如何解决它现在。感谢大家的帮助!!

Anyway, I appreciate the input from everyone who chimed in - this was a weird problem, but I'll never forget how to fix it now. Thanks everyone for your help!!

这篇关于与同一页上的两个jquery datepickers冲突的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆