Home/ Questions/Q 6248473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T13:03:53+00:00

I am doing a a lot of repeating segments of code for a mobile

  • 0

I am doing a a lot of repeating segments of code for a mobile html app. To asve download time, I have been trying to reduce html code and automate with jQuery, but jquery is getting quite verbose. Here is example. Can this type of thing be made less verbose and more efficient?

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>   
<script type="text/javascript">

tplCnf = "\n\n\
        <center>\n\
        <div data-role='content' data-theme='b'>\n\
                <fieldset data-role='controlgroup' data-type='horizontal'>\n\
                    <input type='radio' name='FMT' id='' value='S' checked='checked' /><label   name='FMT' for=''>Serial</label>\n\
                    <input type='radio' name='FMT' id='' value='P' /><label                     name='FMT' for=''>Parallel</label>\n\
                    <input type='radio' name='FMT' id='' value='O' /><label                     name='FMT' for=''>Other</label>\n\
                </fieldset>\n\
        </div>\n\
        </center>";

$(document).ready(function()
{
    /* This is used to populate configuration types */          
    var groups = ['A','B','C','D','E','F'];

    /* add data config type types */
        for (var myLetters in groups){
            // clone fragment of html
            myTmpl = $(tplCnf); 

            // create a unique name for Configuratin radio boxes and corresponding labels
            myTmpl.find('input[name="FMT"]')                
                .attr("name", "FMT-"+groups[myLetters]);                
            myTmpl.find('label[name="FMT"]')                
                .attr("name", "FMT-"+groups[myLetters]);

            // apply id name to first configuration radio box 
            name1 = "preConfigRadio-" + groups[myLetters] + "1";            
            myTmpl.find('input[name="FMT-"+ groups[myLetters]]:eq(0)')
                .attr("id", name1)
            myTmpl.find('label[name="FMT-"+ groups[myLetters]]:eq(0)')
                .attr("for", name1);

            // apply id name to second configuration radio box 
            name2 = "preConfigRadio-" + groups[myLetters] + "2";            
            myTmpl.find('input[name="FMT-"+ groups[myLetters]]:eq(1)')
                .attr("id", name2);
            myTmpl.find('label[name="FMT-"+ groups[myLetters]]:eq(1)')
                .attr("for", name2);

            // apply id name to third configuration radio box 
            name3 = "preConfigRadio-" + groups[myLetters] + "3";
            myTmpl.find('input[name="FMT-"+ groups[myLetters]]:eq(2)')
                .attr("id", name3);
            myTmpl.find('label[name="FMT-"+ groups[myLetters]]:eq(2)')
                .attr("for", name3);

            // then append
            myTmpl.appendTo("#placeholder"+groups[myLetters]).trigger('create');                                    
        }
});

</script>   

</head> 
<body>  

<!-- ***   Navigation bar   *** -->
<div data-role="page"  id="preHelpTab">
<div data-role="header" data-position="inline">

<input type="hidden" id="preBeginRequestDtls" name="BeginRequestDtls" value=""  />

        <div id='groupA' class='preGroups'> 
        This is Group A
            <div id='placeholderA' ></div>  

        </div>

        <div id='groupB' class='preGroups'> 
        This is Group B
            <div id='placeholderB' ></div>  
        </div>

        <div id='groupC' class='preGroups'> 
        This is Group C
            <div id='placeholderC' ></div>  
        </div>

        <div id='groupD' class='preGroups'> 
        This is Group D
            <div id='placeholderD' ></div>  
        </div>

        <div id='groupE' class='preGroups'> 
        This is Group E
            <div id='placeholderE' ></div>  
        </div>

        <div id='groupF' class='preGroups'> 
        This is Group F
            <div id='placeholderF' ></div>  
        </div>
</div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The logic looks good but you can improvise on the performance of the code by caching the local variables instead of finding them multiple times. Take a look at this

    $(document).ready(function()
{
    /* This is used to populate configuration types */          
    var groups = ['A','B','C','D','E','F'], inputs, label, name;

    /* add data config type types */
        for (var myLetters in groups){
            // clone fragment of html
            myTmpl = $(tplCnf); 

            // create a unique name for Configuratin radio boxes and corresponding labels
            inputs = myTmpl.find('input[name="FMT"]')                
                .attr("name", "FMT-"+groups[myLetters]);                
            lables = myTmpl.find('label[name="FMT"]')                
                .attr("name", "FMT-"+groups[myLetters]);

            for(var i =0;i<3;i++){
               name = "preConfigRadio-" + groups[myLetters] + (i+1);            
               inputs.eq(i).attr("id", name)
               labels.eq(i).attr("for", name);
            }

            // then append
            myTmpl.appendTo("#placeholder"+groups[myLetters]).trigger('create');                                    
        }
});
    • 0