Login/Register
How to create a dynamic component from Javascript
Asked Answered
Solved javascriptjqueryhtmlcssjquery-easyui
H

1

8

I am trying to create a ComboBox in with html and Javascript. So I got to start the idea with this link. MultiSelect Combo (MultiSelect ComboBox)

In this link I take all the resources and placed in my local and got the desired result. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="CSS/easyui.css">
    <script type="text/javascript" src="JS/jquery.min.js"></script>
    <script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Custom Format in ComboBox</h2>
    <p>This sample shows how to custom the format of list item.</p>
    <div style="margin:20px 0"></div>
    <div style="margin-bottom:20px">
            <input class="easyui-combobox" name="language" style="width:26%;" data-options="
                    url: 'JSON/combobox_data1.json',
                    method: 'get',
                    valueField: 'id',
                    textField: 'text',
                    panelWidth: 350,
                    multiple:true,
                    formatter: formatItem,
                    label: 'Language:',
                    labelPosition: 'top'
                    ">
        </div>
    <script type="text/javascript">
        function formatItem(row){
            var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
                    '<span style="color:#888">' + row.desc + '</span>';
            return s;
        }
    </script>
</body>
</html>

Now I want my Inputbox to be Dynamic, So I can use it anywhere and any number of times by passing div and others required attributes.

What I tried here is
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="CSS/easyui.css">
    <script type="text/javascript" src="JS/jquery.min.js"></script>
    <script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="JS/NewCombo.js"></script>
</head>
<body>
    <h2>Custom Format in ComboBox</h2>
    <p>This sample shows how to custom the format of list item.</p>
    <div style="margin:20px 0"></div>
    <script type="text/javascript">
        var myCombo = new NewCombo({
            url: 'JSON/combobox_data1.json',
            method: 'get',
            valueField: 'id',
            textField: 'text',
            panelWidth: 350,
            multiple:true,
            //formatter: formatItem,
            label: 'Language:',
            });
    </script>
</body>
</html>

And JS Code is Js Code

NewCombo = function(args){
    var mydiv =   "<div style="margin-bottom:20px">"+"
            <input class="easyui-combobox" name="language" style="width:26%;" data-options="
                    url: 'JSON/combobox_data1.json',\
                    method: 'get',\
                    valueField: 'id',\
                    textField: 'text',\
                    panelWidth: 350,\
                    multiple:true,\
                    formatter: formatItem,\
                    label: 'Language:',\
                    labelPosition: 'top'\
                    ">"+"
        </div>"
}

ut What chalanges I am facing is

  1. Not able to create correct input tag element which causing error.

Here example :

In first case :

input tag is

"<input class="easyui-combobox" name="language" style="width:100%;" data-options="url: "JSON/combobox_data1.json",method: "get",valueField: "id",textField: "text",                    panelWidth: 350,multiple:true,label: "Language:",labelPosition: "top">"

In second case input tag is :

"<div id="chart_line" style="width:26%; background-color: lightblue;"><input class="easyui-combobox" name="language" style="width:100%;" data-options="                    url: " json="" combobox_data1.json",="" method:="" "get",="" valuefield:="" "id",="" textfield:="" "text",="" panelwidth:="" 350,="" multiple:true,="" label:="" "language:",="" labelposition:="" "top"=""></div>"

Now Please help me how to fix this.

Hypocrite answered 6/6, 2017 at 9:33 Comment(11)
You may use jquery, has an option to append html to div id with $("#divId").html("<html></html>") – Forsythia
In my JS code ? – Hypocrite
yes, but you need to import jquery library if not imported first ! – Forsythia
Ya, What worrying me I imported my jquery library in html. Cheking how to import in javascript. – Hypocrite
Try rewriting this question in a much simpler way. The idea I have about what you want is a broken idea and thus I (probably others) can't help you. You need to split the problem down into small sections, what was your original idea, what you have tried and why you tried it the way you did and why is that not working together with the errors/warnings you got? – Rubetta
@Rubetta I updated my question – Hypocrite
Much better, the first problem I can see is the function and implementation is wrong. See fixed one here and see if it solve the problem. – Rubetta
@Hypocrite please see my answer below and if it works for you. – Ifc
@ZachSadler Sure let me try this – Hypocrite
Not answering the question, but I recommend the select2 jQuery plugin for combo boxes and select boxes. I had good experience with it. select2.github.io/examples.html – Antirachitic
Depending on which browsers you want to support you might want to use Template Literals from ES2015 (developer.mozilla.org/en/docs/Web/JavaScript/Reference/…). These would make your templating js code much more concise. – Ostiary
I
13

Try using the setAttribute method to add a data-options attribute dynamically:

document.getElementById('combobox1').setAttribute('data-options', '{GENERATED OPTIONS}');
Ifc answered 8/6, 2017 at 13:19 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.