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.
Unfortunately, activation email could not send to your email. Please try again.

Initialize on data attributes

Thread ID:

Created:

Updated:

Platform:

Replies:

124865 Jul 5,2016 06:10 AM Jul 18,2016 01:10 AM JavaScript 6
loading
Tags: General
Wouter
Asked On July 5, 2016 06:10 AM

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


Wouter
Replied On July 5, 2016 06:22 AM

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

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On July 7, 2016 09:02 AM

 
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. 


Wouter
Replied On July 13, 2016 08:48 AM

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.

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On July 14, 2016 02:42 AM

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.   


Wouter
Replied On July 14, 2016 03:49 AM

Thanks! Thats what I was after.

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On July 18, 2016 01:10 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;