How to Use datalist in sketchup webdialog box

rnpatel9789 · 16 Nov 2015, 13:57

Hello Everyone,

     I just want to use HTML datalist inside the sketchup webdialog box window if anyone have any idea how to use it please help me.

kaas · 16 Nov 2015, 14:37

More (visual) info is needed I think. What kind of datalist? What should it look like in the webdialog? What kind of actions must a user be able to do? etc etc.

sdmitch · 16 Nov 2015, 16:33

@rnpatel9789 said:

Hello Everyone,

     I just want to use HTML datalist inside the sketchup webdialog box window if anyone have any idea how to use it please help me.

Perhaps something like this

dataarray = ['a', 'b', 'c', 'd']; datalist = ""
dataarray.each{ |d| 
	datalist += "<option value='"+d+"' >"+d+"</option>" 
}
dlg = UI;;WebDialog.new("Dummy", false,"dummy",200,200,10,10,true)
html = <<-HTML
<body>
 Selection;<select id='list'>#{datalist}</select><br><br>
</body>
HTML
dlg.set_html(html)
dlg.show

rnpatel9789 · 21 Nov 2015, 11:39

hi sdmitch,

I doing something like what you posted but not with selection rather with input field to add behaviour something like autofill in search box. I am using a specific HTML file for the webdialog window and using javascript function to fill the data into the datalist. But In my case it seems the ".inner_html" in not working. I don't know what is the reason may sketchup is not supporting or something else.

Here's code sample:

In javascript:

function setData(projectnos, roomnames){
proj_no = projectnos.split(",");
var options = '';
for(var i = 0; i < proj_no.length; i++)
options += '<option value="'+proj_no[i]+'" />';
document.getElementById('proj').innerHTML = options;
}

In HTML:

If you have some solution for this then please help me it's very helpful for me.

Thank you

kaas · 21 Nov 2015, 11:53

Your html & javacript code is not valid.
The for-loops should have beginning and closing brackets.
The options have a value but no content.

Look for the complete syntax here:
http://www.w3schools.com/js/js_loop_for.asp
http://www.w3schools.com/tags/tag_option.asp

driven · 22 Nov 2015, 12:47

innerHTML gives you the tags, as well as text content, that you probably don't want...

            <script>
                    function showNew(key,val) {
                    (key).textContent=(val).value;
                    }
                    </script>

john