Ajax ComboBox Position Error
Bonjour,
Après plusieurs jours de recherche, on n'a pas trouvé une solution pour ce problème, je m'adresse à vous si jamais quelqu'un peut m'aider.
Alors j'explique un peu mon problème;
- J'ai une MasterPage qui contient toutes les autres page.
- J'ai une page EquipmentCopy.aspx : Qui contient un lien "PopUp" qui fait apparaitre le div sous forme de popup avec la fonction dialog() du jquery (jquery-1.7.min.js et jquery-ui-1.8.min.js)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<a id="Click_PopUp" href="#" onclick="$('#Div_PopUp').dialog({ modal: true });">PopUp</a>
<br />
<br />
<br />
<div id="Div_PopUp">
<Control:Search ID="Search_Control" runat="server" />
<br />
<br />
<br />
<table>
<tr>
<td>
<asp:Button ID="Button_AllCopy" runat="server" OnClick="Button_AllCopyClick" />
</td>
<td>
<asp:Button ID="Button_EquationCopy" runat="server" OnClick="Button_EquationCopyClick" />
</td>
</tr>
</table>
</div> |
- Cette page contient un UserControl SearchControl.ascx : Qui contient un Ajax(4.1.51116.0) ComboBox, dans un UpdatePanel:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table>
<tr>
<asp:UpdatePanel ID="UpdatePanel_Sites" UpdateMode="Always" runat="server">
<ContentTemplate>
<td>
<asp:Label ID="Label_Sites" runat="server" AssociatedControlID="ComboBox_Sites" />
</td>
<td>
<AjaxControlToolkit:ComboBox ID="ComboBox_Sites" runat="server" OnSelectedIndexChanged="ComboBox_Sites_SelectedIndexChanged"
AutoPostBack="true" AutoCompleteMode="Suggest" CssClass="ComboBoxSites">
</AjaxControlToolkit:ComboBox>
</td>
</ContentTemplate>
</asp:UpdatePanel>
</tr>
</table> |
- Le problème c'est quand je clique sur le lien EquipmentCopy->PopUp, il fait bien apparaitre la fenêtre PopUp mais quand je clique sur ComboBox sa liste apparait ailleurs :calim2:
-Quelque solutions sont proposées sur internet mais rien qui marche. Après ce que je sais, ça vient d'utiliser une MasterPage qui fait planter le calcule de scripts ajax du coup je suis parti à faire repositionner moi même à la main avec une fonction javascript, je l'ai réussi, ça marche avec chrome, firefox mais devinez quoi? Et oui ca marche pas avec IE ^^ ce qui n'est pas étonnant non :bravo:
Alors ce que j'ai fait:
-j'ai ajoute une action d'ouverture dans le dialog() :
Code:
1
2
|
<a id="Click_PopUp" href="#" onclick="$('#Div_PopUp').dialog({ modal: true, open: function(event, ui) { test(event, ui);} });">PopUp</a> |
-Dans test(event, ui) j'ajoute une fonction de clique sur le bouton du ComboBox
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<script type="text/javascript">
function test(event, ui) {
$("#ContentPlaceHolderMain_Search_Control_ComboBox_Sites_Button").click(function () {
//Div
var div = $("#Div_PopUp");
var parentTop = div[0].parentNode.offsetTop;
var parentLeft = div[0].parentNode.offsetLeft;
//Textbox site
var textbox = $("#ContentPlaceHolderMain_Search_Control_ComboBox_Sites_TextBox");
var textboxOffset = textbox.offset();
//Options list
var list = $("#ContentPlaceHolderMain_Search_Control_ComboBox_Sites_OptionList");
var listOffset = list.offset();
//Calculate new css value
var top = (textboxOffset.top - parentTop) - 20;
var left = (textboxOffset.left - parentLeft) - 6;
//Add css value
//list.css('top', top + "px");
//list.css('left', left + "px");
list[0].style.top = top + "px";
list[0].style.left = left + "px";
});
</script> |
-Je récupère le div du dialog, je récupère le textboxt du combobox, je calcule la bonne position et je l'affecte au style de la liste.
-Ce qui ne marche pas avec IE :/
Any Ideas ?? Merci
