Question

I’m new to Javascript, but I have come across an issue at my work to do some javascript. We are customising a product for customers to create forms. The form objects (text fields, drop downs etc) are present in menu. Each of these objects can be selected individually or multiple by using Ctrl Key. We have been asked to enable radio buttons so that customers can select them easily. Each of these are in groups, so can be selected easily.

For eg. (a) Select all customer contact options (b) Customer organisation details
Once selected, they should be draggable and dropped into the form.

Hence the requirement in technical terms are

1. Radio buttons for various groups (Customer Contact options etc..)

2. Once a radio button is selected, activate the relevant class of objects.

3. Initiate the drag/move function

   The HTML snippet is something like.. //replaced < to ( to put as code

    (div class="FormElementMain" style="TOP: 5px; LEFT: 10px" FieldType="Label")
  (span class="contactOptionsLabel" style="width: 50px")Mobile Number(/span)
(/div)
(div class="FormElementMain" style="TOP: 5px; LEFT: 20px" FieldType="Label")
  (span class="contactOptionsLabel" style="width: 50px")Tel Number(/span)
(/div)
(div class="FormElementMain" style="TOP: 5px; LEFT: 30px" FieldType="Label")
  (span class="orgDetailsLabel" style="width: 50px")Job Designation(/span)
(/div)

The product code(function) where we need to bind is:

function selectLabelClass(object)
{
    
    object.addClass("highlightDiv");   // Just to highlight the div class so a shade appears around the text
    var currentWrapper=object;
    
    CurrentObject.push(new MoveObject(currentWrapper));
    currentWrapper.draggable({ grid: [GridSizeX, GridSizeY], containment: ".ui_fieldsetset" });
    
    DisplayProperties();
}

Hence once the Radiobutton is clicked, I’m trying to initiate the Label Class as

$("#selectLabelRadioButton").live("click",
        function () 
        {
            selectLabelClass(".contactOptionsLabel");
        });
        
 });

Its not working though 🙁
Can anyone suggest how to activate a class/group of objects using a radio button

On a separate note, I tried a simple test and it works.
// Just to highlight all objects of the class using a red border.
// So really just wanted to know how the .css can be replaced by another custom function

  $("#selectLabelRadioButton").click(function(){
   $(".selectLabelClass").css("border","3px solid red");
 });

Answer 1

I don’t know what about all of your code which is not in your question.

But you just passed a string instead of a jQuery object to the selectLabelClass which expect to get a jQuery object…

Change this: selectLabelClass(".contactOptionsLabel");
To this: selectLabelClass($(".contactOptionsLabel"));

$("#selectLabelRadioButton").live("click", function() {
    selectLabelClass($(".contactOptionsLabel"));
});​