How do I pass values from one function to another before I serialize and submit the form

Question

I have these two functions:

$("#form_pdetail").on("click", "#register_button", function() {
    var detail_add = $("#form_pdetail").serialize();
    var request = $.ajax({
        type: 'POST',
        url: "{{ path('product_detail_create') }}",
        data: detail_add,
        success: function() {
            request.abort();
            loadCenterLayout("{{ path('product_detail_list') }}");
        }
    });
});

$("#tree").dynatree({
    checkbox: true,
    children: {% autoescape false %} {{ categories }} {% endautoescape %},
    minExpandLevel: 1,
    selectMode: 3,
    onSelect: function(select, node) {
        // Get a list of all selected nodes, and convert to a key array:
        var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
          return node.data.key;
        });
        console.log(selKeys.join(", "));
    },
    onKeydown: function(node, event) {
        if( event.which == 32 ) {
          node.toggleSelect();
          return false;
        }
    }
});

I need to pass selected options from the second function to the first function before I serialize detail_add and submit the form, how?

Answer 1

Instead of getting the selected nodes in the onSelect event of the dynatree object, you can get it by obtaining a reference to the tree.

From the dynaTree documentation:

var tree = $("#tree").dynatree("getTree");

After that you should be able to do:

var selKeys = $.map(tree.getSelectedNodes(), ..................

You can do all of that within your form's register button's click function.

Perhaps with something like:

$("#form_pdetail").on("click", "#register_button", function() {
    var detail_add = $("#form_pdetail").serialize();
    var tree = $("#tree").dynatree("getTree");
    var selKeys = $.map(tree.getSelectedNodes(), function(node) {
        return node.data.key;
    }
    detail_add.selectedItems = selKeys.join(", ");
    var request = $.ajax({
        type: 'POST',
        url: "{{ path('product_detail_create') }}",
        data: detail_add,
        success: function() {
            request.abort();
            loadCenterLayout("{{ path('product_detail_list') }}");
        }
    });
});