We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Initialize on data attributes

I prefer to initialize controls based on html, however this is not working if a page gets loaded via ajax. If I create the control with javascript after the ajax page load the component renders with all the default values instead of the specified values from the data attributes.

Demo, new area gets prepended before the editor, waits are purely to demonstrate the effects


6 Replies

WO Wouter July 5, 2016 10:22 AM UTC

PS: The rte is merely used as an example. The question is : how can I instantiate dynamically loaded controls based on data attributes?


DT Dhivyalakshmi Thirumurugan Syncfusion Team July 7, 2016 01:02 PM UTC

 
Hi Wouter, 
 
Thanks for contacting Syncfusion support. 
We have analyzed your sample and you have used jQuery clone() method. The clone method only clones the DOM element, so we cannot expect it copies the model value of RTE(properties). For setting the model values, first we need to take that instance of the corresponding RTE and save that model values in variable, then should pass it to the RTE rendering. Please find the code below.
setTimeout(function () { 
// Creates the RTE 

var obj=$("#CorrectLoaded").data("ejRTE"); 
var rte=obj.model; 
$("#IncorrectLoaded").ejRTE(rte); 
var rteObj = $("#IncorrectLoaded").data("ejRTE"); 

rteObj.setHtml($("#IncorrectLoaded").val() + 
              "<br />RTE is created, but with de defaults :( \n<br />RTE Instance is: <br /><pre>" + 
              JSON.stringify(rteObj, function (key, val) { 
                             if (val != null && typeof val == "object") { 
                                           if (seen.indexOf(val) >= 0) { 
                                                          return; 
                                           } 
                                           seen.push(val); 
                             } 
                             return val; 
              })+"</pre>"); 

}, 9000); 

We have prepared the sample as per your requirement and please find the sample below.
Sample Link: http://jsplayground.syncfusion.com/c1uiv3cf
If we have misunderstood your query, then please get back us with more details, so that we will help you better.
 
Please let us know if you have any queries. 
 
Regards, 
Dhivyalakshmi. 



WO Wouter July 13, 2016 12:48 PM UTC

The clone method was used as a substitute for ajax loading. What I meant was that the html is not there at page load. Here is a simple example: http://jsplayground.syncfusion.com/ylls4te2
I know that adding the data-role beforehand fixes the problem, but I want to instantiate manually but still use the configuration via the data attributes.


DT Dhivyalakshmi Thirumurugan Syncfusion Team July 14, 2016 06:42 AM UTC

Hi Wouter, 
 
Thanks for the update. 
 
For instantiating the RTE control manually. Please check the below code.   
 
<div id="renderDiv">   
     
              <textarea id="FollowUp"      
                cols="96"   
                data-ej-showfooter="true"    
                data-ej-showhtmlsource="true"    
                data-ej-tools-clear="[&quot;clearFormat&quot;,&quot;clearAll&quot;]"    
                data-ej-tools-clipboard="[&quot;cut&quot;,&quot;copy&quot;,&quot;paste&quot;]"    
                data-ej-tools-copypaste="[&quot;cut&quot;,&quot;copy&quot;,&quot;paste&quot;]"    
                data-ej-tools-doaction="[&quot;undo&quot;,&quot;redo&quot;]"                              
                data-ej-tools-links="[&quot;createLink&quot;,&quot;removeLink&quot;]"    
                data-ej-tools-lists="[&quot;unorderedList&quot;,&quot;orderedList&quot;]"                           
                data-ej-toolslist="[&quot;lists&quot;,&quot;clipboard&quot;,&quot;doAction&quot;,&quot;clear&quot;,&quot;links&quot;]" >   
              </textarea>   
</div>   
  
  
   <script type="text/javascript" class="jsScript">   
    $(function() {           
  
        $("#FollowUp").attr("data-role", "ejrte");   
        ej.widget.init($("#renderDiv"));   
                                
    });   
    </script>   
  
  
In the above code, we have created the wrapper around the RTE and passed that wrapper id to ej.widget.init() function. Because ej.widget.init(“#rendrDiv”) is used to initiate the control which is given within that wrapper.   
   
We have prepared the sample for your reference. Please check the sample link below.   
   
Please let us know if you have any queries.  

  
Regards,   
Dhivyalakshmi.   



WO Wouter July 14, 2016 07:49 AM UTC

Thanks! Thats what I was after.


DT Dhivyalakshmi Thirumurugan Syncfusion Team July 18, 2016 05:10 AM UTC

Hi Wouter,    
  
Thanks for the update.    
  
We are glad to hear that your issue has been resolved. Please get back to us if you need any further assistance.    
  
Regards,    
Dhivyalakshmi. 


Loader.
Up arrow icon