jQueryUI स्वत: पूर्ण संवाद और zIndex

Question

के साथ काम नहीं कर रहा है मैं एक संवाद बॉक्स में jQueryUI स्वत: पूर्ण के साथ एक दिलचस्प समस्या में भाग गया।

मेरे संवाद एचटीएमएल इस तरह दिखता है:

<div id="copy_dialog"> 
    <table> 
     <tbody> 
      <tr> 
       <th>Title:</th> 
       <td><input type="text" class="title" name="title"></td> 
      </tr> 
      <tr> 
       <th>Number:</th> 
       <td><input type="text" name="number"></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

जब मैं ऊपर एचटीएमएल पर jQueryUI स्वत: पूर्ण चलाने के लिए, यह सही काम करता है।

जब मैं FireBug में

$('#copy').click(function() 
{ 
    $('#copy_dialog').dialog({ 
     autoOpen: true, 
     width: 500, 
     modal: false, 
     zIndex: 10000000, 
     title: 'Duplicate', 
     buttons: { 
      'Cancel': function() 
      { 
       $(this).dialog('close'); 
      }, 
      'Save': function() 
      { 
       $(this).dialog('close'); 
      } 
     } 
    }); 

    return false; 
}); 

तो संवाद का उपयोग करके इसे खोलने के ऊपर, मैं स्वत: पूर्ण अभी भी काम कर रहा है देख सकते हैं। यह परिणाम मांग रहा है और प्राप्त कर रहा है, लेकिन अब मैं इनपुट फ़ील्ड के नीचे विकल्पों की एक सूची नहीं देखता हूं।

मेरा विचार यह है कि यह डायलॉग बॉक्स पर ज़िन्डेक्स के साथ कुछ करने के लिए है जो स्वत: पूर्ण मेनू देता है, लेकिन मुझे निश्चित रूप से पता नहीं है। मैं अभी भी क्या हो रहा है के सटीक विवरण का शोध कर रहा हूं, लेकिन मुझे उम्मीद है कि यहां किसी के लिए मेरे लिए कुछ विचार होगा।

मैंने संवाद से ज़िन्डेक्स को हटाने का प्रयास किया और मेरा स्वत: पूर्ण दिखने लग रहा है। दुर्भाग्य से, मुझे मेन्यूबार के डरावनी उच्च ज़िन्डेक्स को प्राप्त करने के लिए उस ज़िन्डेक्स मान की आवश्यकता है, जिसे मैं नहीं बदल सकता (कोड के उस क्षेत्र तक पहुंच नहीं है)। तो यदि स्वत: पूर्ण में zIndex जोड़ने का कोई तरीका है, तो यह शानदार होगा; तब तक, मैं शायद संवाद से zIndex को हटा दूंगा और सुनिश्चित करूँगा कि यह मेनूबार क्षेत्र के आसपास दिखाई नहीं दे रहा है।

Answer 1

"#copy_dialog" को appendTo विकल्प सेट करने का प्रयास करें:

$(/** autocomplete-selector **/) 
    .autocomplete("option", "appendTo", "#copy_dialog"); 

यह विकल्प निर्दिष्ट जो तत्व स्वत: पूर्ण मेनू में जोड़ा जाता है। संवाद में मेनू को जोड़कर, मेनू को सही जेड-इंडेक्स का उत्तराधिकारी होना चाहिए।

Answer 2

मैं स्वत: पूर्ण और zindex के साथ एक समान समस्या हो रही याद है, और appendTo विकल्प निर्दिष्ट करने के द्वारा इसे ठीक करने के लिए किया था: $(selector).autocomplete({appendTo: "#copy_dialog"})

यह भी उपयोगी है यदि आप एक तैनात तत्व के अंदर एक स्वत: पूर्ण है। मेरे पास जो विशिष्ट समस्या थी वह एक निश्चित स्थिति तत्व के अंदर एक स्वतः पूर्ण था जो मुख्य शरीर स्क्रॉल करते समय जगह पर रहा। स्वतः पूर्ण रूप से प्रदर्शित हो रहा था लेकिन फिर तय रहने के बजाय शरीर के साथ स्क्रॉल किया गया।

Answer 3

इस समस्या का पीछा करते हुए मैंने पाया कि appendTo को संवाद खोले जाने से पहले सेट करना होगा। ऐसा लगता है कि स्रोत प्रॉपर्टी को सेट (या संशोधित) करने के लिए लागू होता है।

$("#mycontrol").autocomplete({appendTo:"#myDialog",source:[..some values]}) 
$("#mycontrol").autocomplete("option","source",[...some different values]) // works 

// doesn't work if the lines above come after 
$("#myDialog").dialog("open") 

यह केवल एक संवाद का खुलासा हो सकता है कि कौन सा संवाद खुला रहता है, या तत्व को सही तरीके से संबोधित नहीं करता है। लेकिन ऑर्डर चीजें होती हैं, इससे कोई फर्क नहीं पड़ता।

Answer 4

jQuery UI 1.10 का उपयोग करते समय, आपको ज़ेड-इंडेक्स (http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option) के साथ गड़बड़ नहीं करना चाहिए। appendTo विकल्प काम करता है, लेकिन प्रदर्शन की सीमा तक प्रदर्शन को सीमित कर देगा।

इसे ठीक करने के लिए: स्वत: पूर्ण .insertAfter (संवाद: सुनिश्चित करें कि स्वत: पूर्ण तत्व के साथ सही डोम क्रम में है।माता-पिता())

उदाहरण संवाद क्लिक करने के बाद z- सूचकांक समस्या के लिए

var autoComplete, 
    dlg = $("#copy_dialog"), 
    input = $(".title", dlg); 

// initialize autocomplete 
input.autocomplete({ 
    ... 
}); 

// get reference to autocomplete element 
autoComplete = input.autocomplete("widget"); 

// init the dialog containing the input field 
dlg.dialog({ 
     ... 
}); 

// move the autocomplete element after the dialog in the DOM 
autoComplete.insertAfter(dlg.parent()); 

अद्यतन

स्वत: पूर्ण के z- सूचकांक (संवाद पर एक क्लिक के बाद बदल रहा है जैसा कि मैटेको द्वारा रिपोर्ट किया गया)।

बेला देखें: https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete 
input.autocomplete({ 
    source: ..., 
    open: function() { 
     autoComplete.zIndex(dlg.zIndex()+1); 
    } 
}); 

Answer 5

यह लिंक मेरे लिए काम किया वैकल्पिक हल के नीचे इसे ठीक करने लगता है।

https://github.com/taitems/Aristo-jQuery-UI-Theme/issues/39

Am jQuery-ui-1.10.3 का उपयोग कर।

मैंने jquery संवाद के "खुले" ईवेंट के अंदर स्वत: पूर्ण combobox कॉन्फ़िगर किया।

Answer 6

संलग्न करें: मेनू को कौन सा तत्व जोड़ा जाना चाहिए। जब मान शून्य है, इनपुट फ़ील्ड के माता-पिता "UI-front" की कक्षा के लिए चेक किए जाएंगे। यदि "ui-front" वर्ग वाला कोई तत्व पाया जाता है, तो मेनू उस तत्व में जोड़ा जाएगा। मूल्य के बावजूद, यदि तत्व नहीं मिला है, तो मेनू को शरीर में जोड़ा जाएगा।

इसका मतलब है कि <div id="copy_dialog" class="ui-front"> चाल करेगा। appendTo विकल्प का उपयोग करने की आवश्यकता नहीं है, जो मेरे लिए काम नहीं करता है।

Answer 7

जेड-इंडेक्स को बदलने से पहली बार ड्रॉप-डाउन खोला जाता है, एक बार बंद हो जाता है, संवाद विंडो को पता चलता है कि इसे "धोखा दिया गया" और इसके जेड-इंडेक्स को अपग्रेड किया गया है।

मेरे लिए संवाद और ऑटो-पूर्ण बनाने के आदेश को बदलने के लिए वास्तव में एक परेशानी थी (बड़ी वेबसाइट, पेजों के टन) सोचें, लेकिन मौके से मेरा अपना ओपनपॉप फ़ंक्शन था जो खोला गया था। डायलॉग। इसलिए मैं हर बार जब संवाद 1 उद्घाटन और जब स्वत: पूर्ण बंद कर दिया है पर ध्यान केंद्रित करने अर्थात निम्न हैक

$("#dialog").dialog({ focus: function() { 
    var dialogIndex = parseInt($(this).parent().css("z-index"), 10); 
    $(this).find(".ui-autocomplete-input").each(function (i, obj) { 
     $(obj).autocomplete("widget").css("z-index", dialogIndex + 1) 
    }); 
}); 

के साथ आया था, प्रत्येक स्वत: पूर्ण सूची के z- सूचकांक अद्यतन हो जाता है।

Answer 8

'appendTo' विकल्प हमेशा काम नहीं करता है।

सबसे गंभीरता से, यह संवाद की ऊंचाई से पहले प्रदर्शित नहीं होगा, बल्कि यदि आप किसी तृतीय पक्ष उपयोगिता (जैसे डेटाटेबल्स संपादक) का उपयोग कर रहे हैं, तो आपके पास हमेशा एक संवाद, इनपुट, आदि पर नियंत्रण नहीं होता है। बनाए जा रहे हैं, जब वे डोम से जुड़े होते हैं, उनके पास क्या आईडी हैं, आदि।

यह लगता है हमेशा काम:

$(selector).autocomplete({ 
    open: function(event, ui){ 
     var dialog = $(this).closest('.ui-dialog'); 
     if(dialog.length > 0){ 
      $('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1); 
     } 
    } 
}); 

Answer 9

की कोशिश की यहाँ सब कुछ (कुछ में विफल रहा है जब भी मैं आइटम पर होवर करें और फिर से वापस जाने के), लेकिन यह केवल एक चीज कि मेरे लिए काम किया है उल्लेख किया सभी मामलों में:

$("selector").autocomplete({ 
    ... 
    appendTo: "body", // <-- do this 
    close: function (event, ui){ 
     $(this).autocomplete("option","appendTo","body"); // <-- and do this 
    } 
});  

Answer 10

user1357172 के solution मेरे लिए काम किया लेकिन मेरी राय में यह दो imprevements की जरूरत है। appendTonull पर सेट है

, तो हम क्योंकि हमारे autocomplete पहले से ही इसे से जुड़े किया जाना चाहिए, .ui-dialog के बजाय निकटतम .ui-front तत्व पा सकते हैं। फिर हमें के साथ सभी मौजूदा तत्वों को बदलने के बजाय संबंधित विजेट (संबंधित उल सूची) के लिए केवल z-index को बदलना चाहिए। हम elem.autocomplete('widget')

समाधान का उपयोग करके संबंधित विजेट पा सकते हैं:

elem.autocomplete({ 
    open: function(event, ui){ 
     var onTopElem = elem.closest('.ui-front'); 
     if(onTopElem.length > 0){ 
      var widget = elem.autocomplete('widget'); 
      widget.zIndex(onTopElem.zIndex() + 1); 
     } 
    } 
}); 

BTW यह समाधान काम करता है, लेकिन यह थोड़ा hacky लग रहा है, तो यह शायद सबसे अच्छा एक नहीं है।

Answer 11

मेरे लिए क्या काम किया गया उपरोक्त पद का संयोजन था। मैंने शरीर के बजाय myModal आईडी जोड़ा और साथ ही साथ बंद ईवेंट भी जोड़ा।

$("selector").autocomplete({ 
    ... 
    appendTo: "#myModalId", // <-- do this 
    close: function (event, ui){ 
     $(this).autocomplete("option","appendTo","#myModalId"); // <-- and do this 
    } 
}); 

Answer 12

open:function(event){ 

     var target = $(event.target); 
     var widget = target.autocomplete("widget"); 
     widget.zIndex(target.zIndex() + 1); 

}, 

Answer 13

1. बनाएं संवाद
2. सक्रिय करें स्वत: पूर्ण

यह संकेत देता है jQuery के लिए स्वत: पूर्ण एक संवाद में है और यह जानकारी z- को संभालने के लिए उपलब्ध है अनुक्रमित।

Answer 14

सुपर सरल समाधान। स्वत: पूर्ण के लिए जेड-इंडेक्स बढ़ाएं। जब यह सक्रिय होता है तो मुझे पूरा यकीन है कि आप इसे शीर्ष पर चाहते हैं :)

.ui-autocomplete { 
z-index: 2000; 
}