ansaurus

Question

JQuery UI Selectable stop event doesn't work in IE

Answer 1

+1 A:

Looks like Text isnt liked by IE

try this instead:

     <script type="text/javascript">
     $("#selectable").selectable({
         stop: function() {
             $(".ui-selected", this).each(function(i, selected) {
                 if ($(selected).html() == "Google") {
                     $("#openid_identifier").val("https://www.google.com/accounts/o8/id");
                 }
                 else if ($(selected).html() == "Yahoo") {
                     $("#openid_identifier").val("http://yahoo.com/");
                 }
             });
         }
     });
 </script>

That worked for me when I tried your code

EDIT: here is the code I used to test with

<html>
<head>

<html>
<head>
    <meta charset="UTF-8" />
    <title>make layout</title>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/&gt;
<style type="text/css">
   .testdiv { background: silver; float:left;margin:0;padding:0;}
</style>
</head>
<body>  
<style type="text/css">
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#selectable").selectable({
   stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) {
   alert($(selected).html());
                    if($(selected).text() == "Google") {
                         alert("https://www.google.com/accounts/o8/id");
                     }
                     else if ($(selected).text() == "Yahoo") {
                         alert("http://yahoo.com/");
                     }
                 });
 }
});
    });
    </script>


<div class="demo">

<ol id="selectable">
    <li class="ui-widget-content">Google</li>
    <li class="ui-widget-content">Yahoo</li>

</ol>

</div>
</body>
</html>

JamesStuddart 2010-06-22 13:16:46

This works in IE8 but not 7. Have any insight on why IE7 might not like this?

James Santiago 2010-06-22 21:56:43

I have just tested this in IE 8, 7 and 6 and it works for me, would you like me to send you the full html file I created to test it?

JamesStuddart 2010-06-23 08:55:32

Ok that will be fine

James Santiago 2010-06-23 09:22:09

Please find the markup in the edited answer above

JamesStuddart 2010-06-23 09:38:59

Answer 2

A:

It looks like the issue was $(selected).html() returned "Google " (with a space) in ie7 but returned "Google" in ie8, firefox and chrome.

Background: I tried the exact html as James Studdart's answer which worked under ie8 but under IE7 the if($(selected).html() == "Google") statement returned false every time and even after trying .text, .val, .html etc... and different machines/configs. I then tried creating a variable with the .html value as such: var chosen = $(selected).html(). This returned "Google " in IE7. To fix this mysterious IE7 space character I modified the script to ensure the space didn't affect the result:

 <script type="text/javascript">
 $("#selectable").selectable({
     stop: function() {
         $(".ui-selected", this).each(function(i, selected) {
             var chosen = $(selected).html();
             var subSection = chosen.substring(4, 0);
             if (subSection == "Goog") {
                 $("#openid_identifier").val("https://www.google.com/accounts/o8/id");
             }
             else if (subSection == "Yaho") {
                 $("#openid_identifier").val("http://yahoo.com/");
             }
         });
     }
 });

James Santiago 2010-06-23 11:12:36

Answer 3

+1 A:

right I took another look at the code, and I realised I made a bit of a mistake oops!

This is some cleaner code for you, it just removes all white space:

<script type="text/javascript">
    $(function() {
        $("#selectable").selectable({
   stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) {
                    if($(selected).html().replace(/\s/g, "") == "Google") {
                         alert("https://www.google.com/accounts/o8/id");
                     }
                     else if ($(selected).html().replace(/\s/g, "") == "Yahoo") {
                         alert("http://yahoo.com/");
                     }
                 });
 }
});
    });
    </script>

JamesStuddart 2010-06-23 16:29:09

This is prettier than my fix so I'll mark it as the answer. Thanks for the great effort!

James Santiago 2010-06-24 06:05:59

Not a problem, jQuery is awesome, but IE still hinders us at every turn , lol.

JamesStuddart 2010-06-24 08:38:09

ansaurus

tags:

views:

answers:

JQuery UI Selectable stop event doesn't work in IE

related questions