与同一页面上的两个jquery datepickers冲突

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

这里是设置:我有两个jquery datepickers，在jquery标签内，在jquery模态对话框窗口内:

\---/\---/\---/_______________
/                            /
\                            \
/  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? :)

第一个datepicker正常工作，但是当我尝试在第二个datepicker中点击一个日期时，它只会激活第一个日期。你遵循了吗?:)

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

综上所述，单击datepicker2中的日期会激活datepicker1。

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

我不知道为什么会发生这种情况——它们有不同的id和名称，如下所示。

To create the datepickers I'm just using:

要创建我正在使用的datepickers:

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

The fields are simply:

字段是简单:

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

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

我使用的是jQuery v1.9.0和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!!

有什么想法吗?需要说明的是，由于我的雇主的限制，我无法发布实际的代码，但是如果您需要任何说明，我可以回答大多数问题。非常感谢您的帮助!!

9 个解决方案

#1

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

更新:看起来下面描述的行为在这里的另一个stackoverflow问题中得到了解决:防止jQuery UI对话框将焦点设置为第一个文本框

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:

我所做的是:我在表单中添加了另外两个文本输入字段(它们是必需的)，并对布局进行了重新排序，以便其中一个新的输入字段是“first”元素(在左上角)，如下所示:

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

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.

突然问题消失了!但是，我注意到一个有趣的行为:当我在datepicker中选择一个日期时，光标会立即跳转回第一个文本字段。如果这发生在我的datepickers没有文本字段的情况下，这种行为意味着光标会立即跳转到第一个datepicker，这可能会导致我的问题。

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.

我不知道为什么会这样。我尝试为各种textfields/datepickers设置tabindex参数，但这并没有改变行为。

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!!

不管怎么说，我很感激每个参与进来的人的意见——这是个奇怪的问题，但我永远不会忘记现在该怎么解决它。感谢大家的帮助!!

9 个解决方案

#1

更多相关文章

随机推荐