Web2py - अजाक्स प्रभाव जोड़ना

इस अध्याय में, हम एकीकरण के उदाहरणों पर चर्चा करेंगे jQuery के साथ प्लगइन्स web2py। ये प्लगइन्स प्रपत्र और तालिकाओं को उपयोगकर्ता के लिए अधिक इंटरैक्टिव और मैत्रीपूर्ण बनाने में मदद करते हैं, इस प्रकार आपके एप्लिकेशन की उपयोगिता में सुधार करते हैं।

विशेष रूप से, हम सीखेंगे

• इंटरेक्टिव ऐड ऑप्शन बटन के साथ मल्टी-सलेक्ट ड्रॉप-डाउन कैसे सुधारें,

• स्लाइडर के साथ इनपुट फ़ील्ड को कैसे बदलें, और

• कैसे सारणीबद्ध डेटा का उपयोग कर प्रदर्शित करें jqGrid तथा WebGrid।

हालाँकि web2py एक सर्वर-साइड डेवलपमेंट घटक है, welcome मचान ऐप में आधार शामिल है jQueryपुस्तकालय। इस मचान web2py अनुप्रयोग "वेलकम" में एक फ़ाइल शामिल है जिसे कहा जाता हैviews/web2py_ajax.html।

देखने की सामग्री इस प्रकार है -

<script type = "text/javascript"><!--

   // These variables are used by the web2py_ajax_init function in web2py_ajax.js 
      (which is loaded below).
		
   var w2p_ajax_confirm_message = "{{= T('Are you sure you want to delete this object?')}}";
   var w2p_ajax_disable_with_message = "{{= T('Working...')}}";
   var w2p_ajax_date_format = "{{= T('%Y-%m-%d')}}";
   var w2p_ajax_datetime_format = "{{= T('%Y-%m-%d %H:%M:%S')}}";
   
   var ajax_error_500 = '{{=T.M('An error occured, please [[reload %s]] the page') %
	
      URL(args = request.args, vars = request.get_vars) }}'
		
//--></script>

{{
   response.files.insert(0,URL('static','js/jquery.js'))
   response.files.insert(1,URL('static','css/calendar.css'))
   response.files.insert(2,URL('static','js/calendar.js'))
   response.files.insert(3,URL('static','js/web2py.js'))
   response.include_meta()
   response.include_files()
}}

फ़ाइल जावास्क्रिप्ट और AJAX कार्यान्वयन के कार्यान्वयन के होते हैं। web2py उपयोगकर्ता को अन्य AJAX पुस्तकालयों जैसे कि प्रोटोटाइप, एक्सटीजेएस का उपयोग करने से रोकेगा, क्योंकि यह हमेशा देखा जाता है कि ऐसे पुस्तकालयों को लागू करना आसान है।

JQuery के प्रभाव

का डिफ़ॉल्ट रेंडरिंग <select multiple = "true">..</select>यह विशेष रूप से उपयोग करने के लिए सहज नहीं माना जाता है, विशेष रूप से, जब गैर-सन्निहित विकल्पों का चयन करना आवश्यक होता है। इसे एचटीएमएल की कमी नहीं कहा जा सकता है, लेकिन अधिकांश ब्राउज़रों का खराब डिजाइन। कई चुनिंदा की प्रस्तुति को जावास्क्रिप्ट का उपयोग करके अधिलेखित किया जा सकता है। इसे jQuery प्लगइन नाम से लागू किया जा सकता हैjquery.multiselect.js।

इसके लिए, एक उपयोगकर्ता को प्लगइन डाउनलोड करना चाहिए jquery.muliselect.js से http://abeautifulsite.net/2008/04/jquery-multiselect, और संबंधित फाइलों को इसमें रखें static/js/jquery.multiselect.js तथा static/css/jquery.multiselect.css।

उदाहरण

निम्नलिखित कोड को इससे पहले संबंधित दृश्य में जोड़ा जाना चाहिए {{extend ‘layout.html’}}

{{
   response.files.append('https://ajax.googleapis.com/ajax\
      /libs/jqueryui/1.8.9/jquery-ui.js')
   
   response.files.append('https://ajax.googleapis.com/ajax\
      /libs/jqueryui/1.8.9/themes/ui-darkness/jquery-ui.css')
   
   response.files.append(URL('static','js/jquery.multiSelect.js'))
   response.files.append(URL('static','css/jquery.\multiSelect.css'))
}}

निम्नलिखित को रखें {{extend 'layout.html'}} -

<script>
   jQuery(document).ready(function(){jQuery('[multiple]').multiSelect();});
</script>

यह स्टाइल करने में मदद करेगा multiselect दिए गए फॉर्म के लिए

नियंत्रक

def index():
   is_fruits = IS_IN_SET(['Apples','Oranges','Bananas','Kiwis','Lemons'], multiple = True)
   form = SQLFORM.factory(Field('fruits','list:string', requires = is_fruits))
   
   if form.accepts(request,session):response.flash = 'Yummy!'
return dict(form = form)

यह क्रिया निम्नलिखित दृश्य के साथ आजमाई जा सकती है -

{{
   response.files.append('https://ajax.googleapis.com/ajax\
      /libs/jqueryui/1.8.9/jquery-ui.js')
   
   response.files.append('https://ajax.googleapis.com/ajax\
      /libs/jqueryui/1.8.9/themes/ui-darkness/jquery-ui.css')
   
   response.files.append(URL('static','js/jquery.multiSelect.js'))
   response.files.append(URL('static','css/jquery.\multiSelect.css'))
}}

{{extend 'layout.html}}
<script>
   jQuery(document).ready(function(){jQuery('[multiple]'). multiSelect();});
</script>
{{= form}}

आउटपुट का स्क्रीनशॉट इस प्रकार है -

कुछ उपयोगी Jquery घटनाओं को निम्न तालिका में सूचीबद्ध किया गया है -

अनु क्रमांक।	घटना और उपयोग
1	onchange जब तत्व बदलता है तो चलाया जाए
2	onsubmit फॉर्म सबमिट होने पर चलाया जाएगा
3	onselect जब तत्व का चयन किया जाता है तो चलाया जा सकता है
4	onblur चलाने के लिए जब तत्व ध्यान केंद्रित खो देता है
5	onfocus जब तत्व केंद्रित हो जाए तो चलाया जाए

JQuery और Ajax-jqGrid

jqGrid एक अजाक्स-सक्षम जावास्क्रिप्ट नियंत्रण है जो jQuery पर बनाया गया है जो सारणीबद्ध डेटा का प्रतिनिधित्व और हेरफेर करने के लिए एक समाधान प्रदान करता है। jqGrid एक क्लाइंट-साइड समाधान है, और यह अजाक्स कॉलबैक के माध्यम से डेटा को गतिशील रूप से लोड करता है, इस प्रकार पृष्ठांकन, खोज पॉपअप, इनलाइन संपादन, और इसी तरह प्रदान करता है।

jqGrid को PluginWiki में एकीकृत किया गया है, लेकिन, यहाँ, हम इसे web2py प्रोग्राम के लिए एक स्टैंडअलोन के रूप में चर्चा करते हैं जो प्लगइन का उपयोग नहीं करते हैं। jqGrid अपनी खुद की एक पुस्तक की हकदार है, लेकिन यहां हम केवल इसकी बुनियादी विशेषताओं और सरलतम एकीकरण पर चर्चा करेंगे।

JqGrid का सिंटैक्स निम्नानुसार होगा -

def JQGRID(
   table, fieldname = None,
   fieldvalue = None, col_widths = [],
   colnames = [], _id = None, fields = [],
   col_width = 80, width = 700,
   height = 300, dbname = 'db'
):