Forum: Rails Spinoffs (closed, excessive spam) Ajax.Updater not working in IE, tried everything

hi,

i am basically using a button, Prototype/AJAX, and PHP to update a
user's location. something simple as typing 'Chicago, IL'. After the
script, it rewrites the result in a div tag.

here is the form i'm using:

<div id="hometown_result">Aurora, IL</div>

<form action="" method="post" name="form_hometown" id="form_hometown">
<input name="new_hometown" type="text" style="width:98%;"
maxlength="175" /><br /><br />
<input name="set_hometown" type="image" class="btn"
onclick="change_little_things(document.form_hometown.new_hometown.value,
'hometown', '32154'); return false;" value="Change Hometown" src="/
vm_images/build/set_hometown.jpg" />
</form>

here is the javascript:

function change_little_things(data, type, member_key)
{
  var b64data = Base64.encode(data);
  var url = 'php_ajax.php?type=' + type + '&data=' + b64data +
'&member_key=' + member_key;
  new Ajax.Updater( { success: type + '_result', failure: type +
'_result' }, url);
}

the php_ajax.php file runs a database call, updates the info, then
spits back the new location into the "hometown_result" div.

it works no problem at all on Firefox, Safari, etc.
but for whatever reason, it is not working on at all on internet
explorer and it's driving me crazy.
in a pinch i can rewrite it to update via a normal page refresh and
php script, but it would just be nice because it is such a small
update to do it via Ajax, and a somewhat for my own education as well.
i have searched google and everything, and i cannot find out what the
issue is.

i am a little new to prototype, but if i'm missing something simple,
please don't hesitate to call me an idiot.

thanks1
Dennis
thanks!

Hi,

Don't take this the wrong way, but unless you're using a different
version of Prototype than I've seen (I've only ever used 1.6 onward),
I think you really need to read through the docs a bit more
thoroughly:

http://www.prototypejs.org/api/ajax/options
http://www.prototypejs.org/api/ajax/updater

At a glance, there are at least a couple of problems with your use of
Ajax.Updater:

1. You're using options in the options object that don't exist (there
is no "success" option).
2. You're missing a parameter to the constructor.
3. The parameters you have supplied are in the wrong order.

...and it's entirely possible you meant to use Ajax.Request rather
than Ajax.Updater; I can't be sure.

Hope this helps,
--
T.J. Crowder
tj / crowder software / com

TJ-

I thought so too when I saw this, but the { success: ..., :failure: ... 
}
hash to Ajax.Updater isn't the options, it's the container, and it's
perfectly valid!  Apparently you can pass this as the first parameter to
Updater (it will convert a single string param to this format, making 
your
element the success container by default), and it will update one 
element or
the other depending on whether the call succeeded or failed:

Ajax.Updater = Class.create(Ajax.Request, {
  initialize: function($super, container, url, options) {
    this.container = {
      success: (container.success || container),
      failure: (container.failure || (container.success ? null : 
container))
    };
    ...
  }, ...
};

So the Updater call doesn't appear to be the problem.  I think we need 
to
see what's coming back from the PHP script.

-Fred

On Fri, Jun 13, 2008 at 2:31 AM, T.J. Crowder <tjcrowder@gmail.com> 
wrote:

>
> Hope this helps,
> --
> T.J. Crowder


--
Science answers questions; philosophy questions answers.

Unfortunately I'm also having issues with Internet Explorer. I have a
ColdFusion page that does a query and returns several rows that I put
into an HTML table. The function below helps reorder the items which
works great in FireFox and probably Safari as well.

function reordsub(methodType,subId) {
  var ajax = new Ajax.Updater({ success: 'subnavreplace'}, 'include/
ajax/subnav.cfm', {
  method:'get',
  parameters: {action: 'order', method: methodType, pageid: subId}
  });
}

I've looked and I see nothing wrong with the code. It will work the
first time, but after the HTML table is reloaded with the new order,
it no longer works.

Ahh, you're trying to update the contents of a table.  There's your
problem.  You can't update table body and row elements in IE - you can
update the whole table, or you can replace the contents of individual
cells.  IE has its own native logic for laying out tables, so it doesn't
take kindly to having structural table elements replaced.

-Fred

On Fri, Jun 13, 2008 at 8:27 AM, Michael Brose <xenomorph@thexgn.com> 
wrote:

>        parameters: {action: 'order', method: methodType, pageid: subId}
>        });
> }
>
> I've looked and I see nothing wrong with the code. It will work the
> first time, but after the HTML table is reloaded with the new order,
> it no longer works.


--
Science answers questions; philosophy questions answers.

I'm sorry, I wasn't clear enough. The HTML table is in a container div
with the id "subnavreplace" which is the one that I am updating. Any
other suggestions?

> I thought so too when I saw this, but the { success: ..., :failure: ... }
> hash to Ajax.Updater isn't the options, it's the container, and it's
> perfectly valid!

Gah!  Sorry, Dennis!

-- T.J.

haha, it's all right man.
thanks for all the help everyone.

frederick, here's the PHP code:

session_start();
require("../site_classes/temp_database.php");
$dbh = new Db;

$data = base64_decode($_GET['data']);
$data = ltrim($data);
$data = rtrim($data);
$data = strip_tags($data);
$data = htmlentities($data, ENT_QUOTES);

if($dbh->sqlQuery("UPDATE profiles SET ".$_GET['type']." = '".$data."'
WHERE member_key = '".$_GET['member_key']."'", FALSE))
{
  if ($_GET['type'] == "quote")
  {
    echo '"'.$data.'"';
  }
  else if ($_GET['type'] == "hometown")
  {
    echo $data;
  }
  else
  {
    echo "» ".$_SESSION['username']." ".$data;
  }
}

It doesn't work on IE and Opera for me either. I've checked out latest
prototype's from git to no avail. All line numbers I mention
correspond however to the stable version 1.6.0.2 (latest)

I've traced down the problem to the line 1457:
else receiver.update(responseText);

which calls the function defined on line 1592:
update: function(element, content) {
    element = $(element);
    if (content && content.toElement) content = content.toElement();
    if (Object.isElement(content)) return
element.update().insert(content);
    content = Object.toHTML(content);
    element.innerHTML = content.stripScripts();
    content.evalScripts.bind(content).defer();
    return element;
  },

This function is never executed on IE 6/7 or Opera 9.50. Hence the
update never happens.

Works fine on FF2/3 and latest Windows Safari.

Cheers,
Luis

Just an addition, line 1457 *does* get executed, but it seems that IE
and Opera are confused about what the hell the "update" function is or
where it is defined, therefore the update function on line 1592 never
gets called.

Test case in PHP (the php script just spits out a string, you can swap
it for anything else):

http://rapidshare.com/files/123273450/test3.zip.html

Prototype.js has been modified on line 1592 to show an alert to
indicate the update: function has been called. The alert will appear
on FF and Saf but not in IE or Opera.

This function obviously doesn't work in IE at all :S