Question

I have set up a workspace area which represents a blank PDF page where users can select paper size using radio buttons, orientation of landscape or portrait using radio buttons and personal motivation and goal statements using checkboxes. The user checks / unchecks the statement(s) they would like to place on the workspace and are also able to drag and drop them.

When a user changes the orientation I need all the checked statement items to be briefly saved, which I am putting into an array. Then uncheck all the checkboxes of the statements that were chosen to be added (this works) and remove all the statements from the workspace (this does not work). I need to then loop through the array to go back and check the checkboxes (this works) and call the BoardElement function (this does not work) to run the ajax call.

The related code I am using is below, and have tried many suggestion from different posts. The OrientationChange function is what I am using to attempt the save, remove and call to BoardElement which gets the elements.

Thanks.

HTML

            <h3>Paper Size</h3>
            <input type="radio" name="paper_size" id="paper_size1" value="8-5x11" checked="checked" />            
            8.5&quot;x11&quot;
            &nbsp; <input type="radio" name="paper_size" id="paper_size2" value="11x17" />            
            11&quot;x17&quot;

        </fieldset>

        <fieldset>

            <h3>Orientation</h3>
                <input type="radio" name="orientation" id="orientation1" value="l" checked="checked" /> Landscape
                &nbsp; <input type="radio" name="orientation" id="orientation2" value="p" /> Portrait

        </fieldset>

        <fieldset>

            <h3>Elements</h3>
                <input type="checkbox" name="board_element_cb" id="board_ele_0" value="0" /> "Who Am I" Image&nbsp; 
                <input type="checkbox" name="board_element_cb" id="board_ele_1" value="1" /> "Who Am I" Text&nbsp; 
                <input type="checkbox" name="board_element_cb" id="board_ele_2" value="2" /> Mission Statement&nbsp; 
        </fieldset>

jQuery

$(document).ready
(
function ()
{
BoardElement = function ()
{
    var elements_array = new Array('wai_img_', 'wai_text_', 'mission_text_', 'affirmation_text_', 'gratitude_text_', 'role_model_');
    if ($(this).is(':checked'))
    {
        var data_string = 'board_element=' + $(this).val();
        $.ajax
        ({
            type: 'POST',
            url: 'get_board_element_ajax.php',
            data: data_string,
            success: function(html)
            {
                $('#board_area').append(html);
                $('.draggable_item').draggable
                ({
                    containment: '#board_area',
                    stack: '#board_area div'
                });
            }
        });
    }
    else
    {
        var checked_value = $(this).val();
        $('.draggable_item').each
        (
        function ()
        {
            if (this.id.indexOf(elements_array[checked_value]) > -1)
            {
                $('#' + this.id).remove();
            }
        });
    }
}
$('input[id^=board_ele_]').click(BoardElement);


// save, remove and get selected board items on orientation change
OrientationChange = function ()
{
    var board_ele_array = new Array();
    // save
    $('input[id^=board_ele_]').each
    (
    function (i)
    {
        if ($('#board_ele_' + i).is(':checked'))
        {
            $('#board_ele_' + i).attr('checked', false);
            board_ele_array.push(i);
            $('#board_ele_' + i).attr('checked', false);
        }
    });
    //for (var j = 0; j < board_ele_array.length; j++)
    //{
    var j = 0;
    function BoardEleCheckbox ()
    {
        if (j < board_ele_array.length)
        {
            $('#board_ele_' + board_ele_array[j]).attr('checked', true);
            //$('#board_ele_' + board_ele_array[j]).click();
            //BoardElement();
            $('#board_ele_' + board_ele_array[j]).click(BoardElement);
            j++;
            setTimeout(BoardEleCheckbox, 1000);
        }
    }
    setTimeout(BoardEleCheckbox, 1000);
    //}
}
$('input[name=orientation]').click(OrientationChange);

});

Answer 1

Have you tried:

$('#board_ele_' + i).removeAttr('checked');
BoardElement.call($('#board_ele_' + i).get(0));
board_ele_array.push(i);

and then:

$('#board_ele_' + board_ele_array[j]).attr('checked', 'checked');
BoardElement.call($('#board_ele_' + board_ele_array[j]).get(0));
j++;
setTimeout(BoardEleCheckbox, 1000);

Once a handler is assigned to the element, you invoke it with a no-args call, hence click().

Edit: http://jsfiddle.net/uxqWv/3/

Edit 2: http://jsfiddle.net/uxqWv/7/

When you click on the checkbox, first the state changes and then the handler gets fired. It seems though that when you invoke a click handler through jQuery it’s the other way around. So the handler thinks that you just checked the button, and adds another board element. To work around this you have to call the handler on the checkbox manually with call method of the javascript Function object.