JS loading problem under Mac OS X SU

RichMorin · 14 Aug 2010, 16:22

I'm having a JavaScript loading problem under Mac OS X SketchUp.

My plugin generates an HTML file and then displays it, ala:


foo_path = @file_base + '/dhtml/foo.html'
write_html(foo_path)
dialog.set_file(foo_path)
dialog.show()

The generated file looks like:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <!-- foo.html -->

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />

    <script src="../../lib/jQuery/jquery-1.4.2.min.js"
            type="text/javascript"></script>
    <script src="foo.js"
            type="text/javascript"></script>
  </head>

  <body>
    <h1>Foozle</h1>

    <form action="???">
      <div class="show_hide">
        <h2>Bar</h2>
  ...

Finally, here's my JavaScript:


// foo.js

$(document).ready(
  function() {
    alert(1)
    var fc  = $('div.show_hide > ;first-child'      )
    var oc  = $('div.show_hide > ;not(;first-child)')
    var sw  = ' (<a href="#">show</a>)';
    fc.append(sw)
    oc.hide();

    $('a', fc).click(
      function(event) {
        var div  = $(this).parent().parent()
		    var fc   = $('> ;first-child',       div)
		    var fca  = $('a',                    fc)
		    var oc   = $('> ;not(;first-child)', div)

        if (fca.text() == 'show') {
          fca.text('hide'); oc.show();
        }
        else {
          fca.text('show'); oc.hide();
        }
      }
    );
  }
);

If I bring up the file in Firefox, the alert fires and all of the JS code works as expected. However, in the WebDialog that SU brings up, none of the JS seems to be executing. Help?

thomthom · 14 Aug 2010, 16:24

Try it in Safari - as it also use the Webkit engine. See if it reports any errors.

RichMorin · 14 Aug 2010, 16:29

Indeed, it fails under Safari, as well. Now what?

thomthom · 14 Aug 2010, 16:36

See if you can catch any errors in the error console

Might have to enable the Developer Tools: http://developer.apple.com/safari/library/documentation/appleapplications/conceptual/safari_developer_guide/2safaridevelopertools/safaridevelopertools.html

RichMorin · 14 Aug 2010, 16:52

I already had the Developer Tools enabled. Clicking on "Enable Extensions" allows my JavaScript to run under Safari, but of course this doesn't help the WebDialog under SketchUp.

So, I suppose I can either:

try to figure out what requires the extensions
wait for Google to add the extensions to SketchUp

It looks like it doesn't like the :not() syntax. The following version works under Safari, but still fails (ie, no JS activity) under SU:


$(document).ready(
  function() {
//  alert(1);

    var fc  = $('div.show_hide > ;first-child'      );
    var oc  = fc.nextAll();
    var sw  = ' (<a href="#">show</a>)';
    fc.append(sw);
    oc.hide();

    $('a', fc).click(
      function(event) {
        var div  = $(this).parent().parent();
		    var fc   = $('> ;first-child',       div);
		    var fca  = $('a',                    fc);
        var oc   = fc.nextAll();

        if (fca.text() == 'show') {
          fca.text('hide'); oc.show();
        }
        else {
          fca.text('show'); oc.hide();
        }
      }
    );
  }
);

In fact, even this doesn't work under SU:


$(document).ready(
  function() {
    $('h3').addClass('blue');
  }
);

Tracking this down with a number of cases, it appears that $(document).ready() never fires, whether in the HTML file or the invoked JS file.

Dan Rathbun · 14 Aug 2010, 20:55

%(#804000)[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">]

Do you need XHTML Strict ???
.. or can you try HTML 4.01 Strict .. or Transitional ??

Dan Rathbun · 14 Aug 2010, 21:22

I am SO surprised that Google Corporate has not yet made Sketchup "support" Google Chrome as THE WebDialog engine for Sketchup.

Dan Rathbun · 14 Aug 2010, 21:25

.

You could try your own ready trap:

see this post: Re: PC v MAC webdialog populate

RichMorin · 14 Aug 2010, 22:30

I'm only using Strict because ThomThom recommends it. That said, changing DOCTYPE to Transitional does not make any difference.

Following the advice of a JS hacker, I changed the way I was telling the code to run in my JS file. Specifically, I added onload="main()" to the body tag and used main() as the name of the function in my foo.js file.

I then performed a minimal test, without jQuery, to see if I could get that working. After adding id="foo" to my (only) h1 header, I tried:


function main() {
  var foo = document.getElementById('foo');
  foo.innerHTML = 'Hello, World!';
}

This worked under SketchUp, proving that it could use JS from a file. I then added a number of lines of code (that worked in Firefox and Safari), to see what transpired:


function main() {
  var foo = document.getElementById('foo');
  foo.innerHTML = 'Hello, World!';
  alert('main 1');
  $('h3').addClass('blue');        //T - Ignored

  var fc  = $('div.show_hide > ;first-child');
  var oc  = fc.nextAll();
  var sw  = ' (<a href="#">show</a>)';

  fc.append(sw);                   //T - Ignored
  oc.hide();                       //T - Ignored
  ...
}

As the comments indicate, at least some of my jQuery methods are being ignored by the WebDialog. I'm not sure how to proceed at the moment. One possibility is that the version of jQuery I'm using (1.4.2) is incompatible with SU 7.1. If anyone can speak to this question, please do!

thomthom · 15 Aug 2010, 00:05

@dan rathbun said:

%(#804000)[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">]

Do you need XHTML Strict ???
.. or can you try HTML 4.01 Strict .. or Transitional ??

XHTML4 vs HTML4 doesn't really make a difference. Not unless you send the XHTML as XML.

Strict vs Transitional will make a difference - though personally I prefer strict as I find the rendering more predictable as transitional appear to have more cross platform quirks.

thomthom · 15 Aug 2010, 00:09

@richmorin said:

Following the advice of a JS hacker, I changed the way I was telling the code to run in my JS file. Specifically, I added onload="main()" to the body tag and used main() as the name of the function in my foo.js file.

That is odd... using jQuery's load event didn't work - but the old onload did?
I've not had any problems with the jQuery's event.

@richmorin said:

One possibility is that the version of jQuery I'm using (1.4.2) is incompatible with SU 7.1. If anyone can speak to this question,

I use that version of jQuery. I also used 1.3.x - had no problems in SU6-7.1 on either Windows or OSX.

This is puzzling...
I've not been fully able to wrap my head around what your code does - or intend to do.

Dan Rathbun · 15 Aug 2010, 00:20

It's not a baseref issue? All the script files ARE getting loaded while running inside SU ?

RichMorin · 15 Aug 2010, 19:50

It turns out that the relative paths to my library JS (and probably CSS) were working under the browsers, but not under SU. !@#$%^ (Thanks, Dan!)

Dan Rathbun · 15 Aug 2010, 20:10

@richmorin said:

It turns out that the relative paths to my library JS (and probably CSS) were working under the browsers, but not under SU. !@#$%^ (Thanks, Dan!)

Ok that's a common booboo, nothing too bad.

There's a fix we talked about in another thread where we were brainstorming how to set up a "mini" 3Dwarehouse for Eric's SketchTHIS.net website:
Re: Download to Sketchup button