JavaScript / JQuery: Create Label, TextBox, Select List Dynamically

Below are some JavaScript/JQuery function to create HTML Control dynamically on the fly.

1. Create Label

function CreateLabel(containerId, labelId, html) {
    if (containerId && labelId) {
        var label = document.createElement('label');
        label.innerHTML = html;
        label.id = labelId;
        $('#' + containerId).append(label).trigger('create');
    }
}

2. Create TextBox

function CreateTextBox(containerId, inputId) {
    if (containerId && inputId) {
        var input = document.createElement('input');
        input.type = 'text';
        input.id = inputId;
        input.name = inputId;
        $('#' + containerId).append(input).trigger('create');
    }
}

3. Create Select Menu

function CreateDropDownList(containerId, selectId, placeHolderText, optionTextArray, optionValueArray) {
    if (containerId) {
        var select = document.createElement('select');
        select.id = selectId;
        select.name = selectId;
        if (placeHolderText && placeHolderText != '') {
            var dfOpt = document.createElement('option');
            dfOpt.value = '';
            dfOpt.text = placeHolderText;
            select.options.add(dfOpt);
        }
        
        for (i = 0; i < optionTextArray.length && i < optionValueArray.length; i++) {
            var opt = document.createElement('option');
            opt.value = optionValueArray[i];
            opt.text = optionTextArray[i];
            select.options.add(opt);
        }
        $('#' + containerId).append(select).trigger('create');
    }
}

Create Mini Select Menu for JQuery Mobile

function CreateMiniDropDownList(containerId, selectId, placeHolderText, optionTextArray, optionValueArray) {
    if (containerId) {
        var select = document.createElement('select');

        var select = document.createElement('select');
        var attr = document.createAttribute("data-mini");
        attr.value = "true";
        select.setAttributeNode(attr);
        var attr = document.createAttribute("data-inline");
        attr.value = "true";
        select.setAttributeNode(attr);

        select.id = selectId;
        select.name = selectId;
        if (placeHolderText && placeHolderText != '') {
            var dfOpt = document.createElement('option');
            dfOpt.value = '';
            dfOpt.text = placeHolderText;
            select.options.add(dfOpt);
        }
        
        for (i = 0; i < optionTextArray.length && i < optionValueArray.length; i++) {
            var opt = document.createElement('option');
            opt.value = optionValueArray[i];
            opt.text = optionTextArray[i];
            select.options.add(opt);
        }
        $('#' + containerId).append(select).trigger('create');
    }
}
Advertisements
JavaScript / JQuery: Create Label, TextBox, Select List Dynamically

JavaScript / JQuery: Create Horizontal Radio Button

In my course of project, I find a need to use JavaScript/JQuery to dynamically add element to my HTML. Below is a function to create JQuery Mobile horizontal radio button.

.trigger(‘create’) is need to refresh JQuery Mobile UI otherwise the UI will appear in native HTML.
containerId: normally is the <div> ID.
elementId: the ID & name f the CheckBox
eventName: onchange event name for event handler to identify
textArray, valueArray: Text-Value pair of the list of radio box

function CreateHorizontalRadioButtons(containerId, elementId, eventName, textArray, valueArray) {
    var div = document.getElementById(containerId);

    var content = '&lt;fieldset data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot; &gt;';

    for (i = 0; i &lt; textArray.length &amp;&amp; i &lt; valueArray.length; i++) {
        content += '&lt;input type=&quot;radio&quot; name=&quot;' + elementId + '&quot; id=&quot;' + elementId + String(i) + '&quot; value=&quot;' + valueArray[i] + '&quot; onchange=&quot;SelectedRadioIndexChanged(\'' + eventName + '\', this)&quot; /&gt;';
        content += '&lt;label for=&quot;' + elementId + String(i) + '&quot;&gt;' + textArray[i] + &quot;&lt;/label&gt;&quot;;
    }

    content += '&lt;input type=&quot;radio&quot; name=&quot;' + elementId + '&quot; id=&quot;' + elementId + String(valueArray.length) + '&quot; value=&quot;&quot; onchange=&quot;SelectedRadioIndexChanged(\'' + eventName + '\', this)&quot; /&gt;';
    content += '&lt;label for=&quot;' + elementId + String(valueArray.length) + '&quot;&gt;Unknown&lt;/label&gt;';
    content += '&lt;/fieldset&gt;'
    $('#' + containerId).append(content).trigger('create');
}

Below is method to create horizontal radio button mini theme.

function CreateMiniHorizontalRadioButtons(containerId, elementId, eventName, textArray, valueArray) {
    var div = document.getElementById(containerId);

    var content = '&lt;fieldset data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot; data-mini=&quot;true&quot; &gt;';

    for (i = 0; i &lt; textArray.length &amp;&amp; i &lt; valueArray.length; i++) {
        content += '&lt;input type=&quot;radio&quot; name=&quot;' + elementId + '&quot; id=&quot;' + elementId + String(i) + '&quot; value=&quot;' + valueArray[i] + '&quot; onchange=&quot;SelectedRadioIndexChanged(\'' + eventName + '\', this)&quot; /&gt;';
        content += '&lt;label for=&quot;' + elementId + String(i) + '&quot;&gt;' + textArray[i] + &quot;&lt;/label&gt;&quot;;
    }

    content += '&lt;/fieldset&gt;'
    $('#' + containerId).append(content).trigger('create');
}
JavaScript / JQuery: Create Horizontal Radio Button

JavaScript / JQuery: Set element visibility

Below are functions to set visibility of an element through JavaScript for JQuery Element.

Set element’s visibility

function SetElementVisibility(id, visibility)
{
    if (visibility == 'visible')
        $('#' + id).show();
    else if (visibility == 'hidden')
        $('#' + id).hide();
}

Set visibility of element’s parent. Usually use to set the containing <div> tag’s visibility.

function SetContainerVisibility(id, visibility)
{
    if (visibility == 'visible')
        $('#' + id).parent().show();
    else if (visibility == 'hidden')
        $('#' + id).parent().hide();
}
JavaScript / JQuery: Set element visibility

JavaScript / JQuery: Check/Uncheck RadioBox

Below method allows you check/uncheck JQuery Mobile checkbox. The refresh line is needed for JQuery to re-render the JQuery Mobile UI otherwise it will native HTML UI.

function SetRadioChecked(id, v)
{
    var el = document.getElementById(id);

    if (el) {
        if (v == '0') {
            el.checked = false;
            $('#' + id).checkboxradio('refresh');
        }
        else if (v == '1') {
            el.checked = true;
            $('#' + id).checkboxradio('refresh');
        }
    }
}
JavaScript / JQuery: Check/Uncheck RadioBox

JavaScript: Clear ListView or all contents in a div

If  you need to all items in a HTML ListView or div using JavaScript, below is a useful function to do so.
The function basically get the element and if the element exist proceed to remove all of its child nodes.

function ClearList(listId) {
    var el = document.getElementById(listId)

    if (el) {
        while (el.hasChildNodes()) {
            el.removeChild(el.childNodes[0]);
        }
    }
}
JavaScript: Clear ListView or all contents in a div

JavaScript/JQuery: Open/Close Popup

I was having this problem the other where I was using JQuery Mobile popup but I couldn’t close/open it dynamically using JavaScript. Below is the syntax solution to this problem.

This was my popup html tag

...
<div data-role="popup" id="popupLocation" data-theme="a" style="padding: .5em .5em .5em .5em; min-width:20em;">
   <div id="div-location-back-btn">
      <button data-icon="carat-l" onclick="RaiseEvent('TRAVERSE-UP-LOCATION')" data-inline="true">Back</button>
   </div>
   <ul id="location-tree" data-role="listview" data-filter="true" data-filter-placeholder="Search location" data-inset="true" style="min-width:210px;"></ul>
</div>
...

JavaScript function to open popup.

function OpenPopup(popupId) {
   $('#' + popupId).popup('open');
}

JavaScript: Function to close popup.

function ClosePopup(popupId) {
   $('#' + popupId).popup('close');
}
JavaScript/JQuery: Open/Close Popup