2012-08-03 14 views
12

में विभिन्न घटकों के लिए अलग-अलग अजाक्स स्थितियां मेरे वेबपृष्ठ पर मैं वैश्विक AJAX स्थिति का उपयोग करता हूं जो कि मोडल है। यही है, जब कोई AJAX कॉल होता है, तो उपयोगकर्ता को अन्य क्रियाएं करने से अवरुद्ध किया जाता है और उसे प्रतीक्षा करने के लिए मजबूर किया जाता है। यहाँ की तरह:प्राइमफेस

http://www.primefaces.org/showcase-labs/ui/ajaxStatusScript.jsf

हालांकि, इस तरह के व्यवहार पृष्ठ पर सभी घटकों के लिए आवश्यक न हो। उदाहरण के लिए, स्वत: पूर्ण करने के लिए यह स्वतः पूर्ण घटक के बगल में नॉन-अवरुद्ध करने के लिए अच्छा होगा। RichFaces में, स्वत: पूर्ण घटक द्वारा स्थिति विशेषता थी।

प्राइमफेस (3.4 एसएनएपीएसएचओटी) में, क्या पृष्ठ पर दो अलग-अलग AJAX स्थितियों को स्वतंत्र रूप से आवश्यक रूप से ट्रिगर करने का तरीका है?

धन्यवाद, लुकास

उत्तर

9

आप वैश्विक विशेषता है कि क्या ajaxStatus या नहीं को गति प्रदान करने के लिए उपयोग कर सकते हैं। उदाहरण के लिए, यह गलत की स्थापना इस तरह ajaxStatus ट्रिगर नहीं करेगा:

<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}" 
completeMethod="#{autoCompleteBean.complete}" global="false"/> 

अन्य घटकों के लिए जहां ajax के साथ अद्यतन कर रहे हैं।

<p:inputText value="#{autoCompleteBean.txt1}"> 
    <f:validateLength minimum="2" /> 
    <p:ajax global="false" update="email" event="keyup"/> 
</p:inputText> 

अद्यतन:: आप इस तरह की कुछ बात कर सकते हैं

<p:dialog widgetVar="status" modal="true" closable="false"> 
    Please Wait 
</p:dialog> 

<p:inputText value="#{autoCompleteBean.txt1}"> 
    <f:validateLength minimum="2" /> 
    <p:ajax global="false" onstart="status.show()" oncomplete="status.hide()" update="email" event="keyup"/> 
</p:inputText> 
+1

अच्छी तरह से है, लेकिन मैं विभिन्न ajax स्थिति को गति प्रदान करने के लिए क्या चाहते हैं:

<p:commandButton id="previewBtn" onstart="showLoading('.contentPreview')" oncomplete="hideLoading('.contentPreview')" value="Preview" update="previewText" actionListener="#{lazyResultBean.loadPreviewContent(result.url)}"> </p:commandButton> 

जावास्क्रिप्ट कार्य के लिए कोड इस प्रकार लग रहा है? मैं इसे पूरी तरह से बंद नहीं करना चाहता। मैं अलग-अलग व्यवहार करना चाहता हूं जो अलग-अलग व्यवहार करता है – lukas

+0

मुझे समाधान देने में भी दिलचस्पी है ... क्या आपको कुछ ऐसा अच्छा लगता है जो अच्छी तरह से काम करता है? – simonC

+2

प्राइमफेस 5.1 में यह विशेषता 'ग्लोबल' नहीं है। कोई उपाय। स्वत: पूर्ण घटक के लिए। –

6

Primefaces 5.1 में आप रवि के साथ एक चेतावनी दिखाई देगी: आप दो का दर्जा चाहते हैं तो इस तरह अपने खुद के संवाद लिख सकता हूँ समाधान और यह काम नहीं करेगा।

27-Mar-2015 14:35:41.877 WARNING [http-apr-8080-exec-2] org.primefaces.component.autocomplete.AutoCompleteRenderer.encodeScript The process/global/onstart/oncomplete attribute of AutoComplete was removed. Please use p:ajax with the query event now 

Primefaces 5.1 के लिए सही समाधान स्वत: पूर्ण टैग के अंदर

<p:ajax event="query" global="false"/> 

जोड़ना है।

+0

यह सबसे हालिया और सही उत्तर है (आज!)। – Cold

+0

यह 6.1 में काम नहीं करता है। स्वत: पूर्ण बस पूछताछ बंद कर देता है। – James

2

मैं एक ही समस्या यह मेरा समाधान (सुपर सरल लेकिन बहुत लचीला नहीं) था:

आप पृष्ठ आप के लिए दो <h:panelGroup> तत्वों, एक जोड़ने की जरूरत के कुछ भाग के लिए एक लोड हो रहा है indikator जोड़ना चाहते हैं लोडिंग संकेतक और लोड सामग्री के लिए एक।

उदा .:

<h:panelGroup styleClass="contentPreview content"> 
     <h:outputText id="previewText" styleClass="updatePreview" value="#{lazyResultBean.previewContent}" /> 
    </h:panelGroup> 
    <h:panelGroup styleClass="contentPreview loading"> 
     <p:graphicImage style="width: 15px; height: 15px;" name="/images/ajax-loader.gif" /> 
    </h:panelGroup> 

महत्वपूर्ण सही styleClass लोड हो रहा है संकेतक और content सामग्री के लिए के लिए के loading स्थापित करने के लिए है। दोनों पैनलों में भी एक कक्षा है जो वे साझा करते हैं, इस मामले में contentPreview कक्षा।

लोडिंग संकेतक और सामग्री के बीच स्विच करने के लिए आपको बस एक जावास्क्रिप्ट फ़ंक्शन कॉल करने की आवश्यकता है। संकेतक छिपाने और सामग्री दिखाने के लिए showLoading('.contentPreview') लोडिंग इंडिकेटर hideLoading('.contentPreview') दिखाने के लिए।

उदा।:

function showLoading(clazz) { 
    console.log('showLoading' + clazz); 
    var loadingElements = $(clazz + '.loading'); 
    loadingElements.each(function (index, el) { 
     el.style.display = 'block'; 
    }); 

    var contentElements = $(clazz + '.content'); 
    contentElements.each(function (index, el) { 
     el.style.display = 'none'; 
    }); 
    } 
function hideLoading(clazz) { 
    console.log('hideLoading' + clazz); 
    var loadingElements = $(clazz + '.loading'); 
    loadingElements.each(function (index, el) { 
     el.style.display = 'none'; 
    }); 

    var contentElements = $(clazz + '.content'); 
    contentElements.each(function (index, el) { 
     el.style.display = 'block'; 
    }); 
    } 
संबंधित मुद्दे