Web Dialog works in IE,Chrome but does not work in Sketchup

Developers Ruby API
1

I built a web dialog. HTML sections (div, /div).
When I press the button, the section is hidden or displayed ( javascript function).
Inside Skechup, sections do not hide.
When I copy the source of the page and paste it into browser (Chrome, IE) everything works properly.
Do you have any ideas?

2

Post a sample of the HTML page code, in a code block please.

4

Try in Sketchup (2015.2.685 64bit) and next in chrome, please.
Code below:

> @html_doc = "<HEAD>
> <STYLE type='text/css'>
> 		body   { background-color: #f0f0f0;
> 				}
> 		.col_1 { 	color 			: black;
> 					border		    : #bebebe 1px solid;
> 					font-size		: 9pt; 
> 					font-family		: Calibri;
> 					background-color: #bebebe;
> 					font-weight		: bold;
> 					padding-left	: 8px;
> 				}
> 		.col_2 { 	color 			: black;
> 					border     		: none;
> 					font-size		: 9pt; 
> 					font-family		: Calibri;
> 					padding-top		: 0px;
> 					padding-right	: 0px;
> 					padding-bottom	: 3px;
> 					padding-left	: 0px;
> 					background-color: #ffffff;
> 					
> 				}
> 		.col_3 { 	color 			: black;
> 					border-left     : #bebebe 1px solid;
> 					border-right    : #bebebe 1px solid;
> 					border-bottom    : #bebebe 1px solid;
> 					font-size		: 9pt; 
> 					font-family		: Calibri;
> 					background-color: #f0f0f0;
> 				}
> 		.col_4 { 	color 			: black;
> 					border-left     : #bebebe 1px solid;
> 					border-right    : #bebebe 1px solid;
> 					border-bottom    : #bebebe 1px solid;
> 					font-size		: 9pt; 
> 					font-family		: Calibri;
> 					
> 				}
> 		
> 		table  {	border-collapse: collapse;
> 				}

> 	</STYLE>
> 	<meta charset='UTF-8'>
> <script type='text/javascript'>

> 	function set_arrow(id,sekcja,pic) {
> 							if (pic.split(/[\\\/]/).reverse()[0] == 'arrow_down.jpg') {
> 																						document.getElementById(id).src = 'arrow_up.jpg';
> 																						sekcja.hidden = false
> 																						}
> 							else												 	   {
> 																						document.getElementById(id).src = 'arrow_down.jpg';
> 																						sekcja.hidden = true
> 																					   }
> 							}
> </script>
> </HEAD>
> <div style = 'padding-top	: 5px;'>
> 	<table  width='100%' >
> 		<tr>
> 			<td width='90%' class='col_1' >General</td>
> 			<td width='10%' class='col_1'><input id = 'row1_scr' onclick='set_arrow(id,div_1,src)' type='image'  src='arrow_up.jpg' alt='Submit' width='13' height='13'></td>
> 		</tr> 
> 	</table> 
> </div>
> <div id =div_1>
> 	<table  width='100%'>
> 		<tr>
> 			<td width='6%'></td>
> 			<td width='47%' class='col_3' >Korpus typ:</td>
> 			<td width='47%' class='col_4'><input width='100%' type='text' class='col_2'></td>
> 		</tr>
> 		<tr>
> 			<td width='6%'></td>
> 			<td width='47%' class='col_3' >Korpus kolor:</td>
> 			<td width='47%' class='col_4'><input width='100%' type='text' class='col_2'></td>
> 		</tr> 
> 	</table> 
> </div>"

> my_dialog_view = UI::WebDialog.new('DCB', true, 'DCB', 250, 250, 350, 600, true)
> 						my_dialog_view.set_html( @html_doc )
> 						my_dialog_view.show

You will need two jpg files (I dont know attached correctly)


5

Insert:

<!DOCTYPE html>
<html>

at the top of the document string, and:

</html>

… at the bottom.

P.S.: Embedded TABs do not display well in forum code blocks.
Replace with spaces. If you want people to read your code, make it readable.

6

Second issue is there is no <body> element wrapping your page display elements.

7

Dan,

<!DOCTYPE html>
</html>
<body>
</body>

added, but stel dosn’t work in sketchup and works properly in chrome.
modyfided code below:

def aqq(path)

 wynik = "
 
 <!DOCTYPE html>
 <HEAD>
 <STYLE type='text/css'>
 body   { background-color: #f0f0f0;
 }
 .col_1 { 	color 			: black;
   border		    : #bebebe 1px solid;
   font-size		: 9pt; 
   font-family		: Calibri;
   background-color: #bebebe;
   font-weight		: bold;
   padding-left	: 8px;
 }
 .col_2 { 	color 			: black;
   border     		: none;
   font-size		: 9pt; 
   font-family		: Calibri;
   padding-top		: 0px;
   padding-right	: 0px;
   padding-bottom	: 3px;
   padding-left	: 0px;
   background-color: #ffffff;
 	
 }
 .col_3 { 	color 			: black;
   border-left     : #bebebe 1px solid;
   border-right    : #bebebe 1px solid;
   border-bottom    : #bebebe 1px solid;
   font-size		: 9pt; 
   font-family		: Calibri;
   background-color: #f0f0f0;
 }
 .col_4 { 	color 			: black;
   border-left     : #bebebe 1px solid;
   border-right    : #bebebe 1px solid;
   border-bottom    : #bebebe 1px solid;
   font-size		: 9pt; 
   font-family		: Calibri;
 	
 }
 		
 table  {	border-collapse: collapse;
 }

 	</STYLE>
 	<meta charset='UTF-8'>
 <script type='text/javascript'>

 	function set_arrow(id,sekcja,pic) {
 if (pic.split(/[\\\/]/).reverse()[0] == 'arrow_down.jpg') {
 document.getElementById(id).src = '#{path}arrow_up.jpg';
 sekcja.hidden = false
 }
 else  {
 document.getElementById(id).src = '#{path}arrow_down.jpg';
 sekcja.hidden = true
 }
 }
 </script>
 </HEAD>
 <body>
 <div style = 'padding-top	: 5px;'>
 <table  width='100%' >
  <tr>
   <td width='90%' class='col_1' >General</td>
   <td width='10%' class='col_1'><input id = 'row1_scr' onclick='set_arrow(id,div_1,src)' type='image'  src='#{path}arrow_up.jpg' alt='Submit' width='13' height='13'></td>
  </tr> 
 </table> 
 </div>
 <div id =div_1>
  <table  width='100%'>
   <tr>
    <td width='6%'></td>
    <td width='47%' class='col_3' >Korpus typ:</td>
    <td width='47%' class='col_4'><input width='100%' type='text' class='col_2'></td>
   </tr>
   <tr>
    <td width='6%'></td>
    <td width='47%' class='col_3' >Korpus kolor:</td>
    <td width='47%' class='col_4'><input width='100%' type='text' class='col_2'></td>
   </tr> 
 </table> 
 </div>
 </body>
 </html>"
end
 my_dialog_view = UI::WebDialog.new('DCB', true, 'DCB', 250, 250, 350, 600, true)
       img_file_path = Sketchup.find_support_file "arrow_up.jpg", "tools/"
       my_dialog_view.set_html(aqq(img_file_path.gsub("arrow_up.jpg", "")))
       my_dialog_view.show
8

… is not the start tag for the <HTML> element. (It is the DOCTYPE tag.)

(2) You seem to have put files in SketchUp’s “Tools” folder. This folder is for Trimble use only.

There is no way we can test your code without the images to use.
Wrap up your plugin in a zip or rbz archive, in a proper extension folder.

(3) You are using Ruby style string interpolation, ie "#{path}arrow_down.jpg" within your JavaScript.
Is this valid for JavaScript ?

(4) <div style = 'padding-top : 5px;'>. Inline styles are deprecated and may be ignored in certain document modes, or browser versions. (They have been identified as an attack vector by hackers.)

9

If the image files are in the same folder as the webpage, then you do not need a path in the HTML nor JavaScript. Just refer to the files by full name, like “right_arrow.jpg”.

If the image files are in a sub-folder of the webpage’s folder, just prepend the filename with the subfolder name, like “images/right_arrow.jpg”.

If the image files are in a sub-folder of the webpage’s parent folder, just prepend the filename with the relative pathname, like “…/images/right_arrow.jpg”.

If you really wish to use a base path in your html page, use the <BASE> element within the <HEAD> element.

Remarks
When used, the base element must appear within the head of the document, before any elements that refer to an external source.
If more than one base element occurs, only the first element will be recognized.
<base>: The Document Base URL element - HTML: HyperText Markup Language | MDN

Example:

<!DOCTYPE html>
<html>
<head>
  <base href="http://msdn.microsoft.com/workshop/author/dhtml/reference/"/>
</head>
<body>
  Click <a href="properties/href_2.asp">here</a> to learn about the href property.
</body>
</html>

Better to use the File class method:

File::dirname(img_file_path)