jQuery - जब कोई बंद/नष्ट हो जाता है तो संवाद गायब हो जाते हैं

Question

मैं एक ऐसा एप्लिकेशन बना रहा हूं जो jQuery UI डायलॉग्स का व्यापक उपयोग करता है। मैं एक ऐसे मुद्दे में भाग गया जो एक साथ कई संवाद खोलते समय होता है, और वास्तव में यह पता नहीं लगा सकता कि इसे कैसे ठीक किया जाए, यदि संभव हो तो।

मूल रूप से, यह इस प्रकार है:

उपयोगकर्ता संवाद खोलता है A (शीर्ष: 100px, ऊँचाई: 300px)
उपयोगकर्ता संवाद खोलता है B (शीर्ष: 100px, ऊँचाई: 300px)
उपयोगकर्ता संवाद बंद करता है A
डायलॉग A शिफ्ट होने के बाद खोले गए सभी डायलॉग्स। जैसे: डायलॉग B top प्रॉपर्टी सब्सट्रैक्ट डायलॉग A height (100px - 300px = -200px): डायलॉग गायब हो जाते हैं।

मैं फायरबग निरीक्षण और वेब डेवलपर का उपयोग करके उस निष्कर्ष पर पहुंचा हूं।

यदि डायलॉग B (डायलॉग A के बाद खोला गया) को पहले बंद किया जाता है, तो समस्या नहीं होती है। मैंने एक वेनिला यूआई के साथ भी कोशिश की है (यानी: jQuery के लोड के अलावा कोई स्टाइलशीट नहीं), और यह अभी भी होता है। एक संवाद बंद होने पर एक ट्रिगर प्रतीत होता है कि मैं ओवरराइड नहीं कर सकता।

का उपयोग करना position: fixed; (जैसा कि @TheVillageIdiot द्वारा सुझाया गया है) इसे ठीक करता है, लेकिन संवाद नष्ट होने पर भी ऐसा होता है।

यहाँ एक उदाहरण है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>

    <link type="text/css" rel="stylesheet" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

</head>
<body>

<div id="dialog-1">

</div>
<div id="dialog-2">

</div>

<script type="text/javascript">
$('#dialog-1').dialog({
    close: function() {
        $(this).dialog('destroy');      
    },
    height: 300,
    position: [100, 100],  
    show: 'scale',
    hide: 'drop',
    resizable: false,
    title: 'A',
});

$('#dialog-2').dialog({
    close: function() {
        $(this).dialog('destroy');      
    },
    height: 300,
    position: [100, 100],
    show: 'scale',
    hide: 'drop',
    resizable: false,
    title: 'B',
});
</script>

</body>
</html>

आपके सुझावों का स्वागत है।

javascript jquery jquery-ui dialog jquery-ui-dialog

1

netcoder 20 जुलाई 2011, 21:54

1

आपको कोड दिखाना चाहिए। शायद करीबी संचालकों में कुछ गड़बड़ है?

–

spacevillain

20 जुलाई 2011, 21:59

मुझे लगता है कि जब शीर्ष संवाद बंद हो जाता है तो अन्य इसके बाद फिर से प्रवाहित होते हैं। क्या आपने संवादों के लिए position:fixed का उपयोग करने का प्रयास किया है?

–

TheVillageIdiot

20 जुलाई 2011, 22:00

@spacevillain: मैं करूँगा, लेकिन ईमानदारी से, यह jQuery UI डायलॉग का सबसे बुनियादी उपयोग है।

–

netcoder

20 जुलाई 2011, 22:07

@TheVillageIdiot: यह काम करता है, लेकिन मुझे समस्या मिली (लेकिन समाधान हालांकि नहीं)। यहां तक कि जब स्थिति fixed होती है, जब संवाद नष्ट हो जाता है, तब भी ऐसा होता है।

–

netcoder

20 जुलाई 2011, 22:12

जोड़ा गया उदाहरण कोड (आप वास्तव में इसे वैसे ही आजमा सकते हैं)।

–

netcoder

20 जुलाई 2011, 22:15

Answer 1

यह शायद इसलिए है क्योंकि आपके संवाद position: absolute में नहीं हैं, इसलिए संवाद B की स्थिति (यानी शीर्ष:X) की गणना अपेक्षाकृत संवाद A की स्थिति (शीर्ष: Y) से की जाती है।

तो मान लीजिए कि डायलॉग B की निरपेक्ष स्थिति top: 20px है, और डायलॉग A top: 10px है, डायलॉग की असाइन की गई CSS स्थिति B top: 10px होगी क्योंकि यह डायलॉग के सापेक्ष है A. इसलिए जब संवाद A नष्ट हो जाता है, तो संवाद की स्थिति B (top: 10px) उस तत्व के सापेक्ष हो जाती है जो संवाद A से पहले था, सबसे अधिक संभावना है, इसलिए ऊपर की ओर जा रहा है आपकी खिड़की।

समाधान काफी सरल है: अपने डायलॉग CSS position एट्रिब्यूट को absolute पर सेट करें। jQuery UI को स्थिति को ठीक से पकड़ना और गणना करना चाहिए।

पुनश्च: यह सुनिश्चित करने के लिए कि आपने jQuery को ओवरराइड किया है, यह सुनिश्चित करने के लिए कि आपने jQuery UI CSS स्टाइलशीट को लोड करने के बाद बाद अपनी CSS पूर्ण स्थिति को परिभाषित किया है।

1

Tommy Lacroix 21 जुलाई 2011, 06:38

Answer 2

यूआई के दृष्टिकोण से, मैं इस तथ्य से थोड़ा चिंतित हूं कि आप एक साथ कई संवादों को सक्रिय कर रहे हैं। यूआई पैटर्न में, कई अध्ययनों ने निष्कर्ष निकाला है कि एक मोडल संवाद बहुत विघटनकारी है, इसलिए आदर्श रूप से इसका उपयोग ऐसी स्थिति में किया जाना है जहां आपको कुछ होने या उपयोगकर्ता को चेतावनी देने के लिए बाकी प्रक्रिया को पूरी तरह से बाधित करना होगा। उत्तराधिकार में संवाद के बाद संवाद करना संभवतः एक पैटर्न में बेहतर ढंग से पूरा किया जा सकता है जैसे कि एक गैर-मोडल वातावरण में एक जादूगर।

वैकल्पिक रूप से, कई अधिसूचना विजेट हैं जो इस तरह का काम काफी अच्छी तरह से करते हैं। उदाहरण के लिए:

http://www.erichynds.com/examples/jquery-notify/

http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/

ठीक है, कहा जा रहा है, मैंने इसे कुछ बार किया है, विशेष रूप से जब मैं किसी उपयोगकर्ता को सतर्क कर रहा हूं कि एक प्रक्रिया हो रही है और फिर उन्हें बता रहा है कि प्रक्रिया सफल/असफल हो गई है। दोनों को फेंकने और एक को नष्ट करने के बजाय, समाधान यह था कि एक को फेंक दिया जाए, उसे नष्ट कर दिया जाए, फिर क्रमिक रूप से दूसरों को तुरंत चालू कर दिया जाए। यह jQuery डायलॉग कोड में बटन क्लिक के माध्यम से किया जा सकता है, उदाहरण के लिए जहां आपको उपयोगकर्ता इंटरैक्शन की आवश्यकता होती है, या यह सर्वर-साइड स्क्रिप्ट द्वारा स्वचालित रूप से किया जा सकता है जो यूआई को एक को नष्ट करने और एक प्रक्रिया के बारे में सूचित करते समय दूसरे को बनाने के लिए "बताता है" . किसी भी तरह से, एक ही तत्व को कई बार बनाने के इरादे से एक स्क्रिप्ट को तुरंत चालू करना और फिर इसे "स्टैक" करने की अपेक्षा करना सभी ब्राउज़र मुद्दों (खांसी, खांसी आईई) के साथ बग आमंत्रित कर रहा है।

-1

bpeterson76 20 जुलाई 2011, 22:10

मैं आपकी चिंता की सराहना करता हूं, लेकिन मेरे संवाद मोडल नहीं हैं। मैं अलर्ट के लिए इसका उपयोग नहीं कर रहा हूं, यह एक कार्यक्षेत्र की तरह है (आप एक साथ कई संवाद खोल सकते हैं)।

–

netcoder

20 जुलाई 2011, 22:16

jQuery - जब कोई बंद/नष्ट हो जाता है तो संवाद गायब हो जाते हैं

2 जवाब

संबंधित सवाल

नए सवाल