केंडो विंडो में नई सामग्री लोड करने का उचित तरीका क्या है?

Question

मेरे पास एक केंडो विंडो है जिसमें इसके अंदर एक फॉर्म है। इस फॉर्म में इनपुट तत्व हैं जो इसके भीतर आबादी वाले रिकॉर्ड के डेटा के साथ हैं। उपयोगकर्ता विंडो बंद कर सकता है और देखने के लिए एक अलग रिकॉर्ड का चयन कर सकते हैं। जब उपयोगकर्ता ऐसा करता है, तो मुझे एक ही रूप के साथ फिर से केंडो विंडो दिखाने की आवश्यकता होती है लेकिन विभिन्न रिकॉर्ड डेटा के साथ। यहाँ मैं वर्तमान में क्या कर रहा

if (!$("#winContainer").data("kendoWindow")) { 
     $("#winContainer").kendoWindow({ 
      modal: true, 
      width: "969px", 
      height: "646px", 
      title: "View Record", 
      content: "record.jsp" 
     }); 
    } else { 
     $("#winContainer").data("kendoWindow").refresh({url: 'record.jsp'}); 
    } 

    $("#winContainer").data("kendoWindow").center().open(); 

रूप record.jsp के भीतर निहित है, और मैं JSON डेटा है कि मैं पहले से सर्वर से प्राप्त (जावास्क्रिप्ट record.jsp में संदर्भित के माध्यम से) के साथ पॉप्युलेट करें। मुझे यह सुनिश्चित करने की ज़रूरत है कि विंडो तब तक प्रदर्शित न हो जब तक कि नए रिकॉर्ड डेटा को फॉर्म में पॉप्युलेट नहीं किया जाता है। क्या यह करने का सही तरीका है या क्या कोई बेहतर तरीका है?

Answer 1

इसके बजाय हर बार एक नई विंडो बनाने या उसकी सामग्री को ताज़ा करने के, मैं सिफारिश करते हैं:

1. एक खिड़की बनाना,
2. प्रत्येक उपयोगकर्ता एक नया रिकार्ड चयन करता है, खिड़की के लिए नए डेटा बाँध और फिर इसे खोलें।

इस तरह आप केवल एक बार पेज लोड करने के लिए की जरूरत है।

आप पृष्ठ record.jsp आपके मूल पृष्ठ के एक केंडो यूआई टेम्पलेट के रूप में परिभाषित होने की सोच सकते हैं।

उदाहरण:

निम्नलिखित उपयोगकर्ता चयन रिकॉर्ड को देखते हुए:

var data = [ 
    { text1: "text1.1", text2: "text1.2" }, 
    { text1: "text2.1", text2: "text2.2" }, 
    { text1: "text3.1", text2: "text3.2" }, 
    { text1: "text4.1", text2: "text4.2" } 
]; 

और एक फार्म के निम्न HTML के साथ एक टेम्पलेट के रूप में परिभाषित किया गया:

<script id="record-jsp" type="text/x-kendo-template"> 
    <div> 
     <p>This is your form with some sample data</p> 
     <label>text1: <input type="text" data-bind="value: text1"></label> 
     <label>text2: <input type="text" data-bind="value: text2"></label> 
    </div> 
</script> 

हमारी जावास्क्रिप्ट होगा कुछ जैसे:

// Window initialization 
var kendoWindow = $("<div id='window'/>").kendoWindow({ 
    title : "Record", 
    resizable: false, 
    modal : true, 
    viewable : false, 
    content : { 
     template: $("#record-jsp").html() 
    } 
}).data("kendoWindow"); 

बाइंड खिड़की और यह उद्घाटन करने के लिए डेटा:

function openForm(record) { 
    kendo.bind(kendoWindow.element, record); 
    kendoWindow.open().center(); 
} 

और अंत में डेटा के साथ समारोह लागू। आप अभी भी बाहरी पृष्ठ का उपयोग कर पसंद करते हैं, बस द्वारा template: $("#record-jsp").html() को बदलने की जरूरत:

openForm(data[0]); 

आप इसे इस JSFiddle

नोट पर चल रहा है देख सकते हैं url: "record.jsp"