I found out the solution to my problem... hopefully this will keep other
people from the headache of what I have had to go through in recent days...

It turns out that if the content type header has the charset: Content-Type:
[text/javascript;charset=Cp1252], IE will puke when trying to get the
response text.  With Webwork, this will automatically be done for you (at
least with the FreemarkerResult) unless you override the preProcess method
to not do this.

So, you need to make sure that the content type just reads: text/javascript

Joe

_____________________________________________
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Joe
Hudson
Sent: Tuesday, February 14, 2006 10:40 AM
To: rails-spinoffs@lists.rubyonrails.org
Subject: [Rails-spinoffs] problem with sortable lists and IE

* I sent this message previously from the wrong address so it didn't go
through so, I apologize in advance if a duplicate shows up *

Hello, I am very new to script.aculo.us and prototype but was trying to
implement some of the cool ajax functionality with Webwork.

I have been having a little trouble with the sortable element demo.  I have
the following code below:

<html>
        <head>
                <script src="/test/prototype.js"></script>
                <script src="/test/scriptaculous.js"></script>
                <script src="/test/effects.js"></script>
                <script src="/test/dragdrop.js"></script>
                <script src="/test/controls.js"></script>
        </head>
        <body>
<style type="text/css" media="screen">
    #list {
      margin:0;
      margin-top:10px;
      padding:0;
      list-style-type: none;
      width:250px;
    }
    #list li {
      margin:0;
      margin-bottom:4px;
      padding:5px;
      border:1px solid #888;
      cursor:move;
    }
  </style>

<ul id="list" style="padding: 2px">
        <li id="item_1">one</li>
        <li id="item_2">two</li>
        <li id="item_3">three</li>
        <li id="item_4">four</li>
        <li id="item_5">five</li>
        <li id="item_6">six</li>
        <li id="item_7">seven</li>
</ul>
<p id="list-info"></p>

<script type="text/javascript">

        Sortable.create('list', {
                onUpdate:function(){
                        new Ajax.Updater('list-info',
'http://demo.script.aculo.us/ajax/order', {
                                onComplete:function(request){
                                        new Effect.Highlight('list',{});
                                },
                                parameters:Sortable.serialize('list'),
                                evalScripts:true,
                                asynchronous:true})}});
</script>
        </body>
</html>

Now, this works great on both Firefox and IE.  But, if I replace the URL to
http://localhost:8080/test/ajax/order.action , it no longer works in IE.  I
have done a little test to see the difference of the 2 URLs and this is what
I see:

'http://demo.script.aculo.us/ajax/order' (the one that works on IE and
Firefox)
Headers
-------
Connection: [Keep-Alive]
Set-Cookie: [_session_id=ea173010d428691910201c65d7018760; path=/]
null: [HTTP/1.1 200 OK]
Date: [Tue, 14 Feb 2006 05:07:59 GMT]
Keep-Alive: [timeout=15, max=100]
Server: [Apache/2.0.52 (Gentoo/Linux) mod_fastcgi/2.4.2 mod_ssl/2.0.52
OpenSSL/0.9.7e DAV/2 SVN/1.1.3 PHP/4.3.10]
Content-Type: [text/html]
Transfer-Encoding: [chunked]
Cache-Control: [no-cache]

Content
------------
Updated order is: 1, 3, 2.


'http://localhost:8080/test/ajax/order.action' (the one that only works on
Firefox)
Headers
-------
X-Powered-By: [Servlet 2.4; JBoss-4.0.3RC2 (build: CVSTag=Branch_4_0
date=200508131404)/Tomcat-5.5]
null: [HTTP/1.1 200 OK]
Date: [Tue, 14 Feb 2006 04:15:16 GMT]
Server: [Apache-Coyote/1.1]
Content-Type: [text/html;charset=Cp1252]
Transfer-Encoding: [chunked]

Content
------------
The ordering has been updated



After doing some research, it looks like this is the problem (although I
have no idea why...)

Below is a snippet from prototype.js...

...
Object.extend(Object.extend(Ajax.Updater.prototype, Ajax.Request.prototype),
{
  initialize: function(container, url, options) {
    this.containers = {
      success: container.success ? $(container.success) : $(container),
      failure: container.failure ? $(container.failure) :
        (container.success ? null : $(container))
    }

    this.transport = Ajax.getTransport();
    this.setOptions(options);

    var onComplete = this.options.onComplete || Prototype.emptyFunction;
    this.options.onComplete = (function(transport, object) {
      this.updateContent();
      onComplete(transport, object);
    }).bind(this);

    this.request(url);
  },

  updateContent: function() {
    var receiver = this.responseIsSuccess() ?
      this.containers.success : this.containers.failure;
    alert("test 1");  // this will execute
    var response = this.transport.responseText;  // for whatever reason, the
script dies at this point
    alert("test 2")  // this will not execute
    if (!this.options.evalScripts)
      response = response.stripScripts();

    if (receiver) {
      if (this.options.insertion) {
        new this.options.insertion(receiver, response);
      } else {
        Element.update(receiver, response);
      }
    }

    if (this.responseIsSuccess()) {
      if (this.onComplete)
        setTimeout(this.onComplete.bind(this), 10);
    }
  }
});
...


I have done everything I can think of to try to understand what the problem
is but I am hoping that, given all the information I have been able to
retrieve, one of the more advanced developers will be able to help me.
Thank you very much for your time.

Joe Hudson
 << File: ATT00242.txt >> 

<<attachment: winmail.dat>>

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Reply via email to