与同一页面上的两个 jquery 日期选择器发生冲突 [英] Conflict with two jquery datepickers on same page

问题描述

这里是设置:我有两个 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               /
                            
/                            /
                            
/____________________________/

第一个日期选择器正常运行，但是当我尝试单击第二个日期选择器中的日期时，它只会激活第一个.你遵循那个了吗?:)

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.

我不知道为什么会这样 - 它们有不同的 ID 和名称，如下所述.

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.

现在，至于为什么它以这种方式工作，我不知道.我尝试为各种文本字段/日期选择器设置 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 日期选择器发生冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！