GCrud internals on update

I am trying to modify the GCrud internals to allow for a n-n relation to present hierarchical data. Specifically, I'm trying to use the jsTree plugin (https://www.jstree.com/) in place of the usual drop-down multi-select box when using an add or edit screen.

Here's the HTML/js code that gets generated:

                           <div class='form-field-box odd' id="Tags_field_box">
                <div class='form-display-as-box' id="Tags_display_as_box">
                    Tags :
                </div>
                <div class='form-input-box' id="Tags_input_box">
                    <script type='text/javascript'>
//<!--
$(function () {
$('#field-Tags').jstree({
'checkbox' : {
'three_state': true,
'cascade' : 'updown'
},
'plugins' : [ 'checkbox' ]
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
var jsfields = $('#field-Tags').jstree('get_selected');
$('.jsfields').val(JSON.stringify([jsfields]));
});
</script>
<div id='field-Tags' size='8' class='tree' data-placeholder='Select Tags' style='width:510px;' >
<input id='field-Tags' name='Tags' type='hidden' class='jsfields' value=''/><ul>
<li>
<a href='#' name='1' value='1' >Root</a>
<ul>
<li>
<a href='#' name='2' value='2' >Armory Root</a>
<ul>
<li>
<a href='#' name='6' value='6' >Charges</a>
<ul>
<li>
<a href='#' name='10' value='10' >Animate Charges</a>
<ul>
<li>

etc....

The data is presented correctly for the plugin and the tree works. The second script should, in theory, figure out what boxes are checked and place that into the hidden field, which should hten get passed to the back end.

The problem is when I try to update. I get a "success" message, but that's because the Tags data never makes it into the POST array (inspected with firebug).

I'm a novice at JavaScript, so I'm sure I'm missing something. What tells the system which fields to push into the POST array? What am I missing?

The code to generate this is placed inside the get_relation_n_n_input() function, with additional parameters passed through set_relation_n_n to trigger the tree view. The relevant code is:

        else  //for tree view
        {
            $all_values = $this->get_relation_n_n_tree($field_info, $selected_values);
            if(empty($all_values))
            {
                $input = "Please add {$field_info_type->display_as} first";
            }
            else
            {
                $css_class = 'tree';
                $width_style = 'width:510px;';
                $select_title = str_replace('{field_display_as}',$field_info_type->display_as,$this->l('set_relation_title'));

                $input = "<script type='text/javascript'>
                            //<!--
                            $(function () {
                              $('#field-{$field_info_type->name}').jstree({
                                'checkbox' : {
                                    'three_state': true,
                                    'cascade' : 'updown'
                                },
                                'plugins' : [ 'checkbox' ]
                              });
                            });
                           </script>" . PHP_EOL;

                $input .= "<script type='text/javascript'>
                                $(document).ready(function(){
                                    var jsfields = $('#field-{$field_info_type->name}').jstree('get_selected');
                                    $('.jsfields').val(JSON.stringify([jsfields]));
                                });
                            </script>" . PHP_EOL;



                $input .= "<div id='field-{$field_info_type->name}'  size='8' class='$css_class' data-placeholder='$select_title' style='$width_style' >" . PHP_EOL;
                $input .="<input id='field-{$field_info_type->name}' name='$field_info_type->name' type='hidden' class='jsfields' value=''/>";

  
                  $input .= $this->_process_tree($all_values, $field_info_type->name);
                $input .= "</ul>" . PHP_EOL;
                $input .= "</div>" . PHP_EOL;
            }


        }

_process_tree() is a utility function that actually generates the ul/li entries that jstree wants.

Advice much appreciated, I'm a bit lost in here.

Thanks!

jgalak1

jgalak1