जब उपयोगकर्ता मेरे मामले ईएससी में एक कुंजी दबाता है तो मैं मॉडलविंडो को बंद करने में सक्षम होना चाहता हूं।

मेरे पास कीप्रेस के लिए जावास्क्रिप्ट श्रोता है जो रद्द करें बटन की आईडी के क्लिक ईवेंट को कॉल करता है:

jQuery("#"+modalWindowInfo.closeButtonId).click();

क्या यह करने का यह सही तरीका है?

मैं सोच रहा हूं क्योंकि यह क्रोम में काम करता है लेकिन एफएफ में नहीं, लेकिन यह मेरे विशिष्ट कार्यान्वयन के कारण हो सकता है।

6
SlappyTheFish 18 फरवरी 2011, 17:25

3 जवाब

सबसे बढ़िया उत्तर

इसे करने का 'सही' तरीका सर्वर को कॉल करना है, फिर इसे प्रतिक्रिया के साथ बंद करना है। आप इसे अजाक्स व्यवहार के साथ कर सकते हैं:

ModalTestPage.java

public class ModalTestPage extends WebPage {
    public ModalTestPage(PageParameters parameters) {
        super(parameters);

        final ModalWindow modal = new ModalWindow("modal");
        modal.setContent(new Fragment(modal.getContentId(), "window", this));
        add(modal);

        add(new AjaxLink<Void>("link") {
            @Override
            public void onClick(AjaxRequestTarget target) {
                modal.show(target);
            }
        });

        add(new CloseOnESCBehavior(modal));
    }

    private static class CloseOnESCBehavior extends AbstractDefaultAjaxBehavior {
        private final ModalWindow modal;
        public CloseOnESCBehavior(ModalWindow modal) {
            this.modal = modal;
        }    
        @Override
        protected void respond(AjaxRequestTarget target) {
            modal.close(target);
        }    
        @Override
        public void renderHead(Component component, IHeaderResponse response) {
            response.renderJavaScriptReference("https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js");
            response.renderJavaScript("" +
                "$(document).ready(function() {\n" +
                "  $(document).bind('keyup', function(evt) {\n" +
                "    if (evt.keyCode == 27) {\n" +
                getCallbackScript() + "\n" +
                "        evt.preventDefault();\n" +
                "    }\n" +
                "  });\n" +
                "});", "closeModal");
        }
    }
}

ModalTestPage.html

<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

  <a wicket:id="link">SHOW</a>
  <div wicket:id="modal"></div>

<wicket:fragment wicket:id="window">
  Press ESC to dismiss
</wicket:fragment>
</body>
</html>
7
SlappyTheFish 23 फरवरी 2011, 19:36
यह एक बहुत साफ तरीका लगता है - धन्यवाद! मैंने आपके समाधान का एक संस्करण लागू किया है (मैं एक "संस्करण" कहता हूं क्योंकि मेरे कार्यान्वयन को कई मोडलविंडो के साथ काम करना चाहिए, इसलिए जेएस में मैं खुली खिड़कियों की एक सूची रखता हूं ताकि ईएससी के लगातार प्रेस अगले मोडल विंडो को बंद कर दें) और यह काम करता है क्रोम लेकिन एफएफ में मुझे अभी भी http अनुरोध के बगल में फ़ायरबग में "निरस्त" मिलता है। मैंने modal.close() पर ब्रेकपॉइंट लगाया जो ट्रिगर हो जाता है लेकिन फ़ायरबग पहले ही रिपोर्ट करता है कि अनुरोध निरस्त कर दिया गया है।
 – 
SlappyTheFish
22 फरवरी 2011, 18:23
साज़िश का गहरा जाना; getCallbackScript() से लौटाए गए जेएस के दोनों तरफ अलर्ट() डालकर इसे एफएफ में काम करता है।
 – 
SlappyTheFish
22 फरवरी 2011, 18:34
मैंने इसे समझ लिया, एफएफ में ईएससी कुंजी वर्तमान अनुरोध को मार देती है, यही कारण है कि अनुरोध तुरंत निरस्त कर दिए गए थे। कीडाउन ईवेंट को e.preventDefault() पर कॉल करके निगला जा सकता है; मैं जवाब अपडेट कर दूंगा और इसे सही चिह्नित करूंगा - धन्यवाद!
 – 
SlappyTheFish
23 फरवरी 2011, 19:10
विकेट 1.4 के साथ यह काम करने के लिए, तीन छोटे बदलावों की आवश्यकता है: 1) ओवरराइड करने के लिए रेंडरहेड विधि को public void renderHead(IHeaderResponse response) के रूप में परिभाषित किया गया है 2) रेंडर जावास्क्रिप्ट रेफरेंस -> रेंडर जावास्क्रिप्ट रेफरेंस 3) रेंडर जावास्क्रिप्ट -> रेंडर जावास्क्रिप्ट
 – 
Jonik
28 अगस्त 2012, 11:35
+1, विज्ञापित के रूप में काम करता है। हालांकि मुझे लगता है कि जावा स्ट्रिंग्स (जो बदसूरत है) को जोड़कर इसे उत्पन्न करने से बचने के लिए अधिकांश जावास्क्रिप्ट कोड को .js फ़ाइल में साफ-सुथरा रखना संभव होगा ...
 – 
Jonik
28 अगस्त 2012, 11:39

ऊपर दिया गया उदाहरण अच्छा है, बहुत अच्छा है, हालांकि एक समस्या है जो कुछ प्रोग्रामिंग उपयोगकर्ताओं के लिए महत्वपूर्ण हो सकती है (मेरे लिए थी)।

वास्तविक करीब होने के लिए 2 अजाक्स अनुरोध हो रहे हैं - पहला CloseOnESCBehavior के साथ जारी किया गया है जो window.close कहता है। MW.close() जावास्क्रिप्ट को प्रस्तुत करेगा जो पहले सर्वर को कॉल करेगा कि वह अपने windowClosedCallback से पूछे, और केवल तब मोडल विंडो को बंद (छुपाएं) करेगा।

मैं इसके बजाय कुछ ऐसा करने का सुझाव दूंगा - मॉडलविंडो सीटीआर के कोड में:

    add(new AbstractBehavior() {
        @Override
        public void renderHead(IHeaderResponse response) {
            response.renderOnDomReadyJavascript(
                    " if($(document).data('wicketWindowCloseBound')) {return;} "
                            + " $(document).data('wicketWindowCloseBound', true); "
                            + " $(document).bind('keyup', function(evt) {\n"
                            + "    if (evt.keyCode == 27) {\n"
                            + getCloseJavacript()
                            + "\n"
                            + "        evt.preventDefault();\n"
                            + "        evt.stopPropagation();\n"
                            + "    }\n"
                            + "  });\n");

        }
    });
2
Alex C 3 जिंदा 2012, 13:41

साथ ही, आप विकेट Jquery UI का उपयोग कर सकते हैं

एचटीएमएल

<div wicket:id="dialog">[dialog]</div>

जावा

MessageDialog dialog = new MessageDialog("dialog", "Warning", "Is it ok?",
                        DialogButtons.OK_CANCEL, DialogIcon.WARN)
    {
        protected void onClose(AjaxRequestTarget target, DialogButton button)
        {
            if(button != null && button.equals(LBL_OK))
            {
                //do something here

                //note1: #equals() compare either DialogButton or String (button text)
                //note2: predefined button text are:
                //LBL_OK, LBL_CANCEL, LBL_YES, LBL_NO, LBL_CLOSE, LBL_SUBMIT
            }
        }   
    }

    this.add(dialog); //TODO: open it, using dialog.open(target);

और ESC कुंजी ठीक काम करती है। आपको यह दृष्टिकोण विकेट JQuery UI डेमो पेज

1
Rafael Rocha 4 जिंदा 2013, 03:52