Can't click to vote on IE8

Line 18 of rate.js seems to be the problem:

$.get(Drupal.settings.basePath + 'rate/vote/js?widget_id=' + data.widget_id + '&content_type=' + data.content_type + '&content_id=' + data.content_id + '&widget_mode=' + data.widget_mode + '&token=' + token + '&destination=' + escape(document.location), function(data) {

I don't have clean URLs configured, and when the above request is performed, you end up with:

http://example.com/rate/vote/js?widget_id=1&content_type=comment&content_id=2&widget_mode=1&token=[token_string]&destination=[encoded_destination_string]

which returns a 404.

As a workaround, changing line 18 of rate.js to:

$.get('/?q=rate/vote/js&widget_id=' + data.widget_id + '&content_type=' + data.content_type + '&content_id=' + data.content_id + '&widget_mode=' + data.widget_mode + '&token=' + token + '&destination=' + escape(document.location), function(data) {

seems to fix the problem. I don't know how this affects sites that *are* using clean URLs, nor do I know if it's a bad idea to hardcode /?q= so YMMV.

You could also modify line 37 of rate.js from:
return false;

to:
return true;

which will force the browser to follow the link. This is a untested hack though, and might double up on votes.

Thanks for the details!

I think always using ?q=... might be a good idea. Although we may not delete the basepath, as that would break the widget when Drupal is installed in a subdirectory.

Another problem can be browser caching (mentioned in #1026230: Not able to vote). Maybe we have to add some headers or have a random number added to the request. For more details see http://drupal.org/node/1026230#comment-4043720

The clean url thing is changed. The widget is now compatible with sites where clean url is disabled. I also added a random number to the request to prevent possible caching issues. Committed to both 6.x and 7.x.

I've tested the rate module on Windows 7 / IE8 and I don't see any other issues causing the widget to malfunction, so I'm setting this issue to 'fixed'.

A new development snapshot will be available within the next 12 hours. This improvement will be available in the next official release.

No, it is not fixed.

Doesn't work with IE 8 (version 8.0.6001.19019, latest at this moment).
Works OK with Firefox 3.6.13 (latest at this moment) on the same machine.

Details
======
When I move mouse over a fivestar rate in Firefox, cursor correctly changes to "hand" (link) and a link is shown in the status bar of the browser. When I click, rate changes.

When I move mouse over a fivestar rate in IE, cursor doesn't change to "hand" (link) and no link is shown in the status bar of the browser. Nothing can be clicked.

Most probably JavaScript used is incompatible for IE.
Like it or not - still the most popular browser. So please analyze and fix it.

Tested on:
========
Drupal 7
Rate 7.x-1.0-beta2 (same with Rate 7.x-1.x-dev)
Voting API 7.x-2.4
OS: Windows Vista Enterprise 64 bit, SP2 (latest at this moment)
WAMP: Apache 2.2.11, MySQL 5.1.36, PHP 5.2.11

Thus it also seems to be an issue on Vista. Only Windows 7 was mentioned before.

There are two possibilities. It can be a JavaScript error, as you suggest, but it's also possible that this is a CSS error. Would you check if the stars are clickable when JS is disabled? If not, it's more likely that this is due to a CSS error.

What theme are you using? And - if applicable - what base theme?

It was also suggested that adding position: relative; to the button fixes this issue, see:
http://drupal.org/node/978056#comment-3769628

Does this help?

Confirmed that:

1) gets fixed on Vista/IE8 by implementing the suggestion for tweakign the CSS in #8 above ( https://drupal.org/node/1042216#comment-4119144 )

2) The issue is either Vista, or IE8, or IE8 on Vista.

3) Works without the fix on Win XP SP3 with IE7

I suggest you close it, but submit the CSS fix asap in the code.

The position: relative thing was committed to CVS. I have created new releases for both d6 and d7 (6.x-1.1 and 7.x-1.1-beta1).

Since I still haven't found a configuration on which I reproduce this, I leave it up to someone else to set this to fixed.

Thanks everybody for help!

I've tried the updated version and I can't click on any voting in any of my browsers. IE8, Chrom (latest), FireFox (latest), FireFox (beta 4 b11).

Thanks for the report.

I have not reproduced the error yet. I'm working to test this on more platforms / browsers.

Can you please provide some more details? What version are you using (D6 or D7) ? And what theme are you using?

Using D7 and the theme is Bartik 7.0 and have also tried Seven 7.0, Garland 7.0, and Stark 7.0

Hmm I have tested it on some machines and was able to reproduce this on WinXP, IE 8.0.6001.18702, D6 / Rate 1.1 on Garland. The widget work fine when using the Acquia Marina theme. The rate.css file is not added on the D6 version. This file includes the position:relative; thing. D7 version using bartik works fine in my case.

The other browsers (on the same Windows machine) are:
Chrome 9.0.597.98
Safari 5.0.2
Opera 11.01
Firefox 3.6.13

Rate widgets are working in all these browsers.

I don't know why the rate.css file is not added. It should have been by the following code:

/**
 * Implements hook_init().
 */
function rate_init() {
  drupal_add_css(drupal_get_path('module', 'rate') . '/rate.css');
}

@Pintac: is the rate.css file added in your case?

It's there in the rate folder.

.rate-info {
  clear: left;
  font-size: 0.8em;
  color: #666;
}

.rate-button {
  /* Required for IE8, see http://drupal.org/node/1042216 */
  position: relative;
}

Yeah, but I meant if it is added inside <head>

sorry. Just starting out with Drupal. Shows up twice.

<style type="text/css" media="all">@import url("http://pintac.com/dev/drupal/modules/rate/rate.css?lh3rxo");</style>

<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/dev\/drupal\/","ajaxPageState":{"theme":"garland","theme_token":"pr_fAh8KSuZEH9eX7cNBojbkiLaXRDnTyUd682D-x5A","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1, "modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1, "modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"modules\/rate\/rate.css":1, "themes\/garland\/style.css":1,"themes\/garland\/print.css":1,"themes\/garland\/fix-ie.css":1}}});
//--><!]]>
</script>

Together with a collegue I rewrote the CSS code a little. View diff here:
http://drupalcode.org/project/rate.git/commitdiff/8c1a610?hp=6dd07091ee6...

Works seemless on WinXP with IE8, FF, Chrome, Safari and Opera and on OS-X with FF, Safari and Opera.

Drupal 6.20 / Rate 1.1 with the following themes:
Acquia Marina 2.0
Fusion 1.0
Garland 6.20
Zen 2.0

Drupal 7.0 / rate 1.1-beta1 with the following themes:
Bartik 7.0
Garland 7.0
Stark 7.0
Zen 7.x-dev

No problems found so far.

Changes are committed to git. New dev snapshot will be available within 12 hours.

I installed the module today. There is no click action and no vote is being cast, in both FF 3.6 and IE8....

Note that the changes are still not in a release. Please test with the dev snapshot or 1.2 when available.

Thumbs up / down icons were not showing in IE 8 (internet explorer 8), added the following to my theme:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">

Icons are now visible!

What doctype did you use before? Or didn't you set a doctype at all?