OpenID 2.0 for Google Accounts has gone away

If you've been redirected to this page, it means that you're using a website that doesn't support the latest sign-in standards from Google. We no longer provide this legacy sign-in service for Google accounts, and recommend using an alternative method to sign in on that website. If you previously used your Google account to sign in, you may be able to recover your account using a “forgot password” feature, or by contacting that websites’ support team.

Some websites use OpenID 2.0 for authentication when you're signing in, and to access data that you've given them permission to access. OpenID 2.0 was replaced by OpenID Connect, and since April 20, 2015, no longer works for Google Accounts. OpenID 2.0 support was shut down in order to focus on the newer open standard OpenID Connect, which provides greater security for your account.

If you're a developer of an application that uses OpenID 2.0, you should migrate to OpenID Connect. Learn how to migrate to OpenID Connect.

For some reason, the background color of the jQuery UI Accordion seems to be transparent. This is a bit of an issue because some of accordions expand over existing fixed content, but I'm having some trouble setting it to opaque with the usual suspects.

1. background-color: white;
   opacity: 1;
   z-index: 0;

I've tried setting these in both the CSS .ui-accordion .ui-accordion-content as well as directly in the HTML.

Any suggestions?

I'm trying to use the Position Method on table elements within an iframe in order to shift the elements away from the edge of the iframe if they're too close. I'm using this for faux Select elements that are near the bottom of the page, but instead of shifting the elements with collision: "fit", they're moving to the top of the page.

I tested collision: "flip" just to be sure, and was surprised to discover that it didn't position anything and allowed the element to be cut off. I've also tried adding an option for 'within'  (using the div for the page content) but that didn't help either.

JS

1.       $("#dropdown_container1").position({
2.             my: "left top",
3.             at: "left bottom",
4.             of: "#dropdown_box1",
5.             collision: "fit"  
   
6.         });
7. $(function () {
8.     $("#dropdown_box1").click(function () {
9.         $("#select1").show();
10.     });
11. });
12. $(function () {
13.     $("#select1").menu();
14. });
    

HTML

1. <table>
2.     <tr>
3.         <td>
4.             <div id="dropdown_box1" class="dropdown_box"><span>1st Priority</span>/div>
5.             <div class="dropdown_container" id="dropdown_container1">
6.             <ul id="select1">
7.             <!-- Several List items --!> 
   
8.             </ul>     
   
9.             </div>
10.        </td>
11.    </tr>
12. </table>

CSS

1. .dropdown_box {display:block; border: 1px solid #d3d3d3;}   
   
2. .dropdown_container {position:relative;}                  
   
3. .dropdown_container ul  {display:none; position:absolute; top:0px; left:0px; list-style:none; border:1px solid #d3d3d3;}
   
4. .dropdown_container ul li ul { display:none; position:absolute; top:0px; left:0px; list-style:none; border:1px solid #d3d3d3;}
   

I'm having trouble getting this change function to work with checkboxes. What I'm trying to do is initially show "startTrendy" to all users, and then once they answer the question "personal_styles", "startTrendy" is hidden and "startClassic" is displayed unless they've picked either 'Trendy' or 'Modern'.

A standard show/hide function isn't working here because they can select up to 3 values (there are 10 choices), and if any of their choices are 'Trendy' or 'Modern' then "startTrendy" needs to be displayed.

JS

1. $(document).ready(function(){
2.     $(".img_change").change(function(){
3.       if( $('input[name=personal_styles[]][value=trendy]').is(':checked') ) {
4.              $("#startTrendy").show();
5.              $("#startClassic").hide(); 
6.         } else {
7.              $("#startClassic").show();
8.               $("#startTrendy").hide(); 
9.         }
10.     });
11. });

HTML

1. <form method="post" action="#"> 
2.  <div id="startTrendy" >Trendy Pics</div>
3. <div id="startClassic" style="display:none">Classic Pics</div>
4. 
   
5. <input type=checkbox name="personal_styles[]" value="trendy" class="img_change">Trendy
6. <input type=checkbox name="personal_styles[]" value="modern" class="img_change">Modern
7. <input type=checkbox name="personal_styles[]" value="feminine" class="img_change" >Feminine
8. <input type=checkbox name="personal_styles[]" value="antique" class="img_change">Antique
9. <input type=checkbox name="personal_styles[]" value="classic" class="img_change" >Classic
10. </form>

This is a simplified version of my code (since I can't get it to work for one value I couldn't be sure of the correct syntax to use for an OR statement, although I know it would be similar to this:

1. $("[name=personal_styles[]]").val() === "trendy" || $("[name=personal_styles[]]").val() === "modern")

    <dl class="dropdown">
    <dt><a href="#"><span>Drinks</span></a></dt>
    <dd>
    <ul id="drinks">
        <li>       
        <a href="#">Coffee</a>
            <ul>              
            ...   
            </ul>
        </li>
        <li><a href="#">Soft Drinks</a></li>
        <li><a href="#">Water</a></li>       
    </ul>
    </dd>
    </dl>

I'm using Eric Hynds Multiselect Widget, but I'm having trouble getting the position option in the widget to work with jquery-1.8.2 and/or jquery-ui-1.9.1.

How can I prevent an element with the show() function on a parent page from closing when an iframe is opened? I'm not sure why a change would be triggered, but it's only allowing it to either open with the parent and close when the iframe is opened or vice versa.

I need to keep the element 'notice' visible until a user has created an account (or specifically closed it), and the following code works to show the element to the correct user's open it

I've also tried addClass(), adding another show() function to the iframe and adding an onclick function to the link, but the element still closes when an iframe is opened.

PHP  

1. $logged_in = (isset($_SESSION['SESS_USER_ID']));

Javascript

1.  <?php if ($logged_in) : ?>
2.     parent.$('#notice').hide();
3. <?php else : ?> 
4.     parent.$('#notice').show();  
5. <?php endif; ?>

The following function replaces alert() messages with jQuery modal messages. How can I easily change the width and dialogClass or not call parent.$.fancybox.close(); in specific instances?

1. window.old_alert = window.alert;
2. window.alert = function(message, fallback){
3.     if(fallback)
4.     {
5.         old_alert(message);
6.         return;
7.     }
8.     $(document.createElement('div'))
9.         .attr({title: 'Alert', 'class': 'alert'})
10.         .html(message)
11.         .dialog({
12.             buttons: {OK: function(){$(this).dialog('close');}},
13.             close: function(){$(this).remove();
14.                     parent.$.fancybox.close();},
15.             draggable: false,
16.             modal: true,
17.             resizable: false,
18.             dialogClass: "alert_message",
19.             width: '400'
20.         });
21.      $(".ui-dialog-titlebar").hide();
22. };

How can I use jQuery's .before() function to trigger an alert? I know how to use $(this).before(); to change an iframe's content, but I can't figure out how to use it to trigger an alert before doing something.

In the function below, I want to have an alert instead of this line:

$(this).before("Thank you for creating an account");

1. success: function () { $("#customer_info").fadeOut("fast", function(){ $(this).before("Thank you for creating an account"); setTimeout("$.fancybox.close()", 1000); }); }

How can I remove the horizontal line at the bottom of a Modal Message box (that appears above the 'ok' button)?

I'm using jQuery UI 1.9

I'm having difficulty getting the `jQuery` special event `hoverintent` to work with `mouseleave` functions. *(I’ve also tried substituting `mouseout` for `mouseleave`)*

I need to utilize the same functionality so that the `mouseleave` event is only fired when the user's mouse has slowed down beneath the sensitivity threshold.

I’ve included the script below, and have also uploaded a working example to http://click2fit.com/test_files/accordion_hoverintent.html

1.     $(function () {    
2.         $(".accordion_close_leave").accordion({
3.                     event: "click hoverintent",
4.                     collapsible: true,
5.                     active: false,    
6.                     autoHeight: false,
7.                  }).mouseleave(function() {
8.         $(this).accordion({ active: false});
9.         }); 
10.                           
11.     var cfg = ($.hoverintent = {
12.         sensitivity: 100,
13.         interval: 500
14.     });
15.     $.event.special.hoverintent = {
16.         setup: function() {
17.             $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
18.         },
19.         teardown: function() {
20.             $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
21.         },
22.         handler: function( event ) {
23.             var that = this,
24.                 args = arguments,
25.                 target = $( event.target ),
26.                 cX, cY, pX, pY;
27.             function track( event ) {
28.                 cX = event.pageX;
29.                 cY = event.pageY;
30.             };
31.             pX = event.pageX;
32.             pY = event.pageY;
33.             function clear() {
34.                 target
35.                     .unbind( "mousemove", track )
36.                     .unbind( "mouseout", arguments.callee );
37.                 clearTimeout( timeout );
38.             }
39.             function handler() {
40.                 if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
41.                     clear();
42.                     event.type = "hoverintent";
43.                     event.originalEvent = {};
44.                     jQuery.event.handle.apply( that, args );
45.                 } else {
46.                     pX = cX;
47.                     pY = cY;
48.                     timeout = setTimeout( handler, cfg.interval );
49.                 }
50.             }
51.             var timeout = setTimeout( handler, cfg.interval );
52.             target.mousemove( track ).mouseout( clear );
53.             return true;
54.         }
55.     };

I'm using a speech bubble style tooltip based on the jquery ui tooltip widget 'Custom Styling' demo, but I'm having trouble properly displaying the arrow when I need it on the left side of the tooltip instead of on the top or bottom.

1. <style type="text/css">  
2.    
3.    .ui-tooltip.menu_info {
4.         max-width: 200px;
5.     }       
6. * html .ui-tooltip {
7.     background-image: none;
8. }
9. body .ui-tooltip { border-width: 1px; }
10.     .ui-tooltip, .arrow:after, .arrow_left_side:after {
11.         background: white;
12.         border: 1px solid #999;        
13.         
14.     }        
15.     .ui-tooltip {
16.         padding: 10px 12px;
17.         color: Black;
18.         font: 8pt "Helvetica Neue", Sans-Serif;    
19.         max-width: 150px;
20.         border: 1px solid #999;
21.     position: absolute;
22.     }            
23.     .arrow_left_side {        
24.         height: 70px;
25.         width: 8px;     
26.         overflow: hidden;
27.         position: absolute;
28.         top: 0px;
29.         margin-top: 5px;
30.         left: -8px;
31.     }    
32.     .arrow_left_side:after {
33.         content: "";
34.         position: absolute;
35.         width: 25px;    height: 25px;
36.         -webkit-transform: rotate(45deg);
37.         -moz-transform: rotate(45deg);
38.         -ms-transform: rotate(45deg);
39.         -o-transform: rotate(45deg);
40.         tranform: rotate(45deg);
41.     }
42.      </style>    
43.  <script>
44. $(function() {
45.     $('.menu_info').tooltip({
46.         position: {
47.             my: "left+20 center",
48.             at: "right center",
49.             using: function (position, feedback) {
50.                 $(this).css(position);
51.                 $("<div>")
52.                         .addClass("arrow_left_side")
53.                         .addClass(feedback.vertical)
54.                         .addClass(feedback.horizontal)
55.                         .appendTo(this);
56.             }
57.         }
58.     });
59. });
60. </script>

I'm trying to combine these toggleClass() and hide() functions, but when they are combined the toggle function only works properly with slideDown() and isn't toggling back as it should with slideUp()

I'm trying to combine this toggleClass() function:

1.  $("#fauxAccordion").click(function () {
2.              $(this).toggleClass("accordion_arrow_south");
3.          });

With this hide() function:

1.  $(function () {
                   $(".accordionInner").hide();
                   $(".accordionTrigger").hoverIntent(function () {
                       $(".accordionInner").slideDown();
                   }, function () {
                       $(".accordionInner").slideUp("slow");
                   });
                   $(".accordion_reclose").hoverIntent(cfg);             
   });
2. var cfg = ($.hoverintent = {
3.         sensitivity: 100,
4.         interval: 500
5.     }); 
   

The combined function

1.  $(function () {
2.                 $(".accordionInner").hide();
3.                 $(".accordionTrigger").hoverIntent(function () {
4.                     $(".accordionInner").slideDown();
5.                     $("#fauxAccordion").toggleClass("accordion_arrow_south");
6.                 }, function () {
7.                     $(".accordionInner").slideUp("slow");
8.                     $("#fauxAccordion").toggleClass("accordion_arrow_east");
9.                 });
10.                 $(".accordion_reclose").hoverIntent(cfg);
11. });
12. 
    
13. var cfg = ($.hoverintent = {
14.         sensitivity: 100,
15.         interval: 500
16.     }); 

HTML

1. <div class="accordionTrigger">
2. <div class="header_10"><b>Header Goes Here<span style="padding-left:2em" class="accordion_arrow_east" id="fauxAccordion"></span></b></div>
3. <div class=" accordionInner">
4. Content Goes Here
5. </div>
6. </div>
7.   <div class="accordion_reclose">
             Next Section      
               </div>
   

The div following accordionInner is assigned a class of accordion_reclose, so that the accordionInner content slides up and the icon class changes.

I'm essentially trying to replicate an accordion because I haven't been able to get hoverIntent to work with jQuery UI's accordion (I have a row of dropdowns in an accordion, and without hoverIntent the accordion closes as soon as the user moves off the first Select element).

I wasn't able to find any plugins for creating nested Select elements (where a 2nd dropdown flies out when you mouseover an option in the parent element), so I'd like to create a function which would modify a nested menu from jQuery UI's menu widget to act as a nested dropdown. I'm using this in a form, and I need to capture the users input the way a dropdown box does in a form.

I'm trying to create a shortcut so the user can either select a value from "Drink" or from "Coffee" without requiring extra steps on the part of the user or taking up more screen space. If I were just creating regular dropdowns these would be set up as 5 Select element named Drinks, Coffee, Tea, Soft Drinks and Water, but in this situation I want to display <select name="Drinks"> and when you mouseover <select name="Drinks"><option value="Coffee"> then <select name="Coffee"> flies out of <select name="Drinks">, <select name="Tea"> flies out when you mouseover <select name="Drinks"><option value="Tea">, etc.

I understand that this can be done by calling an object's innerHTML to create a value for the object, but I haven't been able to figure out how to do it. Something along the lines of:

1. <li onclick="drink(this)">Coffee</li>
2.  function drink(obj) {
           value = obj.innerHTML();
       }

This is an example of what I would like to convert, but instead of this being displayed as a nested menu (which you can see at http://click2fit.com/flyout_menu2.html) I would like to create a dropdown with 4 selectable options (Coffee, Tea, Soft Drinks, Water), and each of those options has a nested Select element (the options for Coffee are Americano, Latte, etc.).

<ul id="drinks">   
    <li>
        <a href="#">Drinks</a>
        <ul>
            <li>
            <a href="#">Coffee</a>
                <ul>                   
                    <li><a href="#">Americano</a></li>                  
                    <li><a href="#">Latte</a></li>
                    <li><a href="#">Cappuchino</a></li>                   
                    <li><a href="#">Espresso</a></li>                   
                    <li><a href="#">Iced</a></li>                   
                </ul>
            </li>
            <li><a href="#">Tea</a>
            <!-- Nested Tea Menu --!>
            </li>
            <li><a href="#">Soft Drinks</a>
              <!-- Nested Soft Drinks Menu --!>
            </li>
             <li><a href="#">Water</a>
            <!-- Nested Water Menu --!>
            </li>
        </ul>
    </li>

I need to set a checkbox to be either checked or unchecked based on whether specific Checkboxes or Radio button are selected.

I know how how to do this for checkboxes when I specify an id # for each element and use if ($(this).attr('checked'), but I can't get it to uncheck when I specify the names and values of the checkboxes instead.

I also haven't been able to get it to uncheck when a radio button is unchecked, even when I specify an id # for each element and use if ($(this).attr('checked'). Ideally, I'd like to specify the names and values of the radio buttons instead of using ($(this).attr('checked'), but help with either method (or another one if there's a better way to go) would be appreciated.  I also included below a switch function which I'm using for Select elements, but which I've been successful at modifying to use with checkboxes or radio buttons.

I created a working fiddle of this at http://jsfiddle.net/Cfcq6/116/

Checkbox Code 2 - This code both Checks & Unchecks the element

1. $('#complaint1').change(function() {
       if ($(this).attr('checked')) {
           $('input[name="modify_increase"]')[0].checked = true;
       }
       else {
           $('input[name="modify_increase"]')[0].checked = false;
       }
   });

Checkbox Code 2 - These Check but don't uncheck the element when unselected

1. $('.complaint2').change(function() {
       if ($('input:checkbox[name=complaint2]:checked').val("Too_small")) {
           $('input[name="modify_increase"]')[0].checked = true;
       }
       else {
           $('input[name="modify_increase"]')[0].checked = false;
       }
   });

Radio Button - These check but don't uncheck the element when unselected

1. $('#complaint3').change(function() {
       if ($(this).attr('checked')) {
           $('input[name="modify_increase"]')[0].checked = true;
       }
       else {
           $('input[name="modify_increase"]')[0].checked = false;
       }
   });

Switch function which works for Select Elements

1.  $('.complaint1').change(function () {
           $('input[name="modify_increase"]').removeAttr("checked");
           $('input[name="modify_decrease"]').removeAttr("checked");
           switch($('[name=complaint1]').val()){
               case "Too_small":
               $('input[name="modify_increase"]')[0].checked = true;  
               break;
               case "Too_big":
               $('input[name="modify_decrease"]')[0].checked = true;  
               break;             
           }
     });

How would I validate an invitation code? I've tried modifying the code which I use to check if a username is available, but it is validating the user regardless of whether or not a valid code has been entered.

I'm using this jQuery Validation plugin

1.  $('#loginForm').validate({
        rules: {user_name: "required", password: "required",
         invitation_code: {
                   required: true,
                   remote: {
                       //check if invitation_code exists or not
                       url: "check_invitation_code.php",
                       type: "post",
                       data: {
                           invitation_code: function() {
                               return $("#invitation_code").val();
                           }
                       }
                   }
               }
       
        },
                  messages: {user_name: "", password: "", invitation_code: "",}, 
          });
         });
   ?php         
       //Start session
       session_start();
      
       //Include database connection details
       require_once('config.php');
              
         $invitation_code = $_REQUEST['invitation_code'];
          
       //Check if invitation code is registered
       if($invitation_code != '') {
           $qry = "SELECT * FROM invite_codes WHERE invitation_code='$invitation_code'";
           $result = mysql_query($qry);
           if($result) {
               if(mysql_num_rows($result) > 0) {
                   $valid="true";
               } else {
                   $valid="false";
               }     
              echo $valid;
           }       
       }
        
   ?>
   

I'm having trouble figuring out the proper syntax for removing validation rules with the jQuery Validate plugin (by Jörn Zaefferer).  I need to remove 3 validation rules in the event that the user selects a specific radio button (in this case specifying that they are male).

I've tried inserting an If/Else statement as well as creating an onclick function, but I don't think I'm doing it properly because I can't seem to get either method to work properly.  I've included the code that I've tried below.

Validation Script

1. $(document).ready(function() {
       // validate signup form on keyup and submit
       var validator = $("#customer_info").validate({
           rules: {
                fname: "required",
               lname: "required",
               user_name: {
                   required: true,
               },
               password: {
                   required: true,
               },           
               email: {
                   required: true,
               },                       
               terms: "required",
           },
           messages: {
               fname: "",
               lname: "",       
               user_name: {
                   required: "",
                       remote: jQuery.format('</br>User Name {0} already in use'),
                   },
               password: "",   
                email: {
               required: "",
                   email: "</br>Please enter a valid email address"},
               terms: "</br>Please accept the terms of our privacy policy",
               },       
           errorLabelContainer: "#messageBox",
                       submitHandler: function () {
                           jQuery(form).ajaxSubmit({
                           });
   
                       }
                   });
               });
   

Methods I've Tried

If/Else

I've tried several variations of:

1. var validator = $("#customer_info").validate(
2. 
       if ($gender==="male") {
        $(this).rules("remove", "user_name password terms");      
       } else 
3. 
       {rules: {
4. ...
   

Creating a Separate Function

I also tried creating a separate function which would be triggered onclick

HTML

1.   <label>Male</label><input name=gender type=radio value=male onclick="change();">

Javascript

Method 1

1.  function change(){
2.   $("#customer_info").rules("remove", "user_name password terms");    
3. }

Method 2

1.  function change(){
2.      $("#user_name").rules("remove", "required");
3.   $("#password").rules("remove", "required");
4.   $("#terms").rules("remove", "required");
5. }

I need to modify this Replace function to use arrays, but haven't been able to figure out how to do that.

This function allows the text and 2 sets of items to be replaced when a user clicks on an element, and each set of items includes an image and it's associated value (which will then be added to the customer's profile and be inserted into a database). I can't figure out how to modify the code to use arrays instead or how to advance past the 2nd set.

This is part of a taste questionnaire which asks users to select the style they prefer from a series of pairs, and the specific pairings shown changes based upon the items previously selected.  I have 12 arrays of 20 images, and was previously directing which image would be displayed from an array with the code below which had each 'Select' button trigger onclick="javascript:manipulateDOM()", however that didn't allow me to identify the value selected and is somewhat cumbersome. In addition that code didn't allow me to direct different choices based on the user's selection. 

(Partial) Replace Function

1.   <script type="text/javascript" language="javascript">
2.        $(document).ready(function () {
3.            $("#trendyButton").click(function () {
4.                var newSrc = $("#imgtrendy").attr("src").replace("z1", "z14");
5.                $("#imgtrendy").attr("src", newSrc);
6.                var newSrc2 = $("#imgclassic").attr("src").replace("z2", "z12");
7.                $("#imgclassic").attr("src", newSrc2);
8.                var que = $("#question").text().replace("Question 1", "Question 2");
9.                $("#question").text(que);
10.                var imgvalue = $("#imgtrendy").attr("value");
11.                $("#picval").text(imgvalue);
12.            });
13.            $("#classicButton").click(function () {
14.                var newSrc = $("#imgtrendy").attr("src").replace("z1", "z4");
15.                $("#imgtrendy").attr("src", newSrc);
16.                var newSrc2 = $("#imgclassic").attr("src").replace("z2", "z3");
17.                $("#imgclassic").attr("src", newSrc2);
18.                var que = $("#question").text().replace("Question 1", "Question 2");
19.                $("#question").text(que);
20.                var imgvalue = $("#imgclassic").attr("value");
21.                $("#picval").text(imgvalue);
22.            });
23.        });
24.    </script>

HTML

1. <div id="question">Question 1</div>
2.  <div>
3.  <img id="imgtrendy" src="files/z1.png" name="taste" value="trendy[1]" height="5%" width="5%" />
4.  <img id="imgclassic" src="files/z2.png" name="taste1" value="classic[1]" height="5%" width="5%"/>
5.   </div>
6.   <div>
7.   <img id="trendyButton" alt"Select" src="files/Select.jpg">   
8.    <img id="classicButton" alt"Select" src="files/Select.jpg">
9.    </div>
10.     <div id="picval"></div>

Previous method I used in javascript

1. function manipulateDOM() {
2.          changeObjects();
3.          NextImage();
4.      }
5.      function changeObjects() {
6.          document.getElementById("question").innerHTML = text[textNumber];
7.      }
8.      function NextImage() {
9.          if (imgNumber < NumberOfImages) //Stop moving forward when we are out of images
10.          {
11.              trendy[0] = trendy[1]; trendy[1] = trendy[2]; trendy[2] = trendy[3];
12.              document.images["taste"].src = trendy[imgNumber];
13.              classic[0] = classic[1]; classic[1] = classic[2]; classic[2] = classic[3];
14.              document.images["taste1"].src = classic[imgNumber];
15.              text[0] = text[1]; text[1] = text[2]; text[2] = text[3];
16.              document.getElementById["question"].innerHTML = text[textNumber];
17.          }
18.      }

   

I need to clarify which jQuery files to include in order for jQuery UI and widgets/plugins to work.

I recently downloaded a more recent and minified version of jQuery and most of the basic site functions stopped working inside a Dialog Modal (including text boxes, radio buttons, checkboxes and html links), and it has stopped reading some of the options that I've defined for jQuery functions (i.e. validation and placeholders).

I'm including these files in my header:
jQuery core and UI
jquery-1.7.2.min.js    jquery-ui-1.8.22.custom.min.js    jquery-ui-1.8.22.custom.css
Files to validate forms
jquery.validate.js (v1.9.0)   jquery.form.js (v3.14)   jquery.metadata.js    jquery.form_malsup.js (v3.14) - They are all the latest versions.

Is there something else that I need to include?

Some of these problems were fixed when I tried added jquery.js (I tried both v1.7.2  and 1.8), and others stopped working (i.e. Dialog Modal boxes).

I'd like to write a function to modify the jQuery UI MultiSelect Widget options so that the option selectedList displays the object's ID before the information it is programmed to display.


Script for assigning the widget's options

1. $(function(){
2.     $(".multi").each(function(){
3.     $(this).multiselect({
4.     selectedList: 4, //This displays the options which have been selected (max. 4)
5.     multiple: true,   
6.     header: false,
7.     noneSelectedText: $(this).attr("id"), 
8.     })
9.     })
10.     });

HTML for Multiselect Dropdown

1.  <select class="multi" name="example" id="example" multiple="multiple">
2. <option value="1">Option 1</option>
3. <option value="2">Option 2</option>
4. <option value="3">Option 3</option>
5. <option value="4">Option 4</option>
6. <option value="5">Option 5</option>
7. </select>

The script which defines both SelectedList and selectedText (in JQuery.multiselect.js):

1.     // updates the button text. call refresh() to rebuild
2.     update: function(){
3.         var o = this.options,
4.             $inputs = this.inputs,
5.             $checked = $inputs.filter(':checked'),
6.             numChecked = $checked.length,
7.             value;
8.        
9.         if( numChecked === 0 ){
10.             value = o.noneSelectedText;
11.         } else {
12.             if($.isFunction( o.selectedText )){
13.                 value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());
14.             } else if( /\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList){
15.                 value = $checked.map(function(){ return $(this).next().html(); }).get().join(', ');
16.             } else {
17.                 value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);
18.             }
19.         }
20.        
21.         this.buttonlabel.html( value );
22.         return value;
23.     },

The example given for sending the 3 arguments to selectedText is:

1. $("select").multiselect({
      selectedText: function(numChecked, numTotal, checkedItems){
         return numChecked + ' of ' + numTotal + ' checked';
      }
   });

I tried (unsuccessfully) a few variations of  return $(this).attr("id") + selectedList;