Home/ Questions/Q 6037219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T06:02:29+00:00

I’m writing a tool that will generate HTML based on JSON data, and puts

  • 0

I’m writing a tool that will generate HTML based on JSON data, and puts the output in a textarea for easy copy/paste. I am using jquery templates for generating the HTML but I’m having trouble putting the result in the textarea, because .tmpl() returns a jQuery object (collection of DOM elements).

EDIT:

After testing with a simpler version, I found that $(“#HtmlPageTemplate”).tmpl().html(); does work. So the problem lies with the actual template. Any suggestions on making the following template work?

<script id="HtmlPageTemplate" type="text/x-jquery-tmpl">
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" >
        <head>
           <title>API - ${ObjectName}</title>
           <link rel="stylesheet" href="styles/meyer-reset.css" type="text/css" media="all" />
           <link rel="stylesheet" href="scripts/google-code-prettify/src/prettify.css" type="text/css" media="all" />
           <link rel="stylesheet" href="jquery-ui-1.8.13.custom/css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="all" />
           <link rel="stylesheet" href="styles/api-documentation.css" type="text/css" media="all" />
           <script src="jquery-ui-1.8.13.custom/js/jquery-1.5.1.min.js">{{html "</sc"+"ript>"}}
           <script src="jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js">{{html "</sc"+"ript>"}}
           <script src="scripts/google-code-prettify/src/prettify.js">{{html "</sc"+"ript>"}}
           <script>
               $(function(){
                   if ("onhashchange" in window) { // event supported?
                       window.onhashchange = function () {
                           SelectTabByAnchor(window.location.hash);
                       }
                   }
                   else { // event not supported:
                       var storedHash = window.location.hash;
                       window.setInterval(function () {
                           if (window.location.hash != storedHash) {
                               storedHash = window.location.hash;
                               SelectTabByAnchor(storedHash);
                           }
                       }, 100);
                   }

                   function SelectTabByAnchor(anchor){
                       var tab = -1;

                       if(anchor.substr(0, 10) == "#Property-"){
                           tab = 0;
                       }
                       else if(anchor.substr(0, 8) == "#Method-"){
                           tab = 1; 
                       }
                       else if(anchor.substr(0, 7) == "#Event-"){
                           tab = 2;
                       }

                       if(tab > -1){
                           $("#PropertiesMethodsEventsContainer").tabs("select", tab);
                           //window.location.href = window.location.hash;
                           window.location.hash = window.location.hash;
                       }
                   }

                   $("a").click(function(event){
                       var anchor = $(this).attr("href");
                       SelectTabByAnchor(anchor);
                       // Stop the .Item event from showing/hiding the details
                       event.stopPropagation();
                   });

                   $(".Item").click(function(){
                       $(this).next().toggle();
                   }).hover(function(){
                       $(this).addClass("ui-state-hover");
                   },
                   function(){
                       $(this).removeClass("ui-state-hover");
                   });

                   prettyPrint();
                   $("#PropertiesMethodsEventsContainer").tabs();

                   if(window.location.hash){
                       //SelectTabByAnchor(window.location.hash);
                       $("a[href=\"" + window.location.hash + "\"]:first").trigger("click");
                   }

               });
               {{html "</sc"+"ript>"}}
        </head>
        <body>
            {{tmpl "#ClassTemplate"}}
        </body>
        </html>
    </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’d probably like to display the actual generated HTML (if that’s what you’re generating). Anyway. By using .html() you can always access HTML string of any jQuery object. Hence you can easily do this to get the jQuery object in your text area:

    $("#textareaID").val($("#templateID").tmpl(objToUse).html());

    This should put generated HTML inside your textarea.

    This JSFiddle proves it works as expected. Document ready functionality is at the end of the script block (which is rather long since I had to add jQuery .tmpl() plugin). But it only does what I’ve written above. It only sets text area value based on generated template HTML.

    The problem you may be having that this technique returns the content of the jQuery element which may in you case be empty. If this is the case, than use this code to get whole generated code template instead:

    $("#TimingTemplate").tmpl().wrap("<div></div>").parent().html();
    • 0