dynatree with html input checkbox inside li tag

[code9394]

I wanted to have a checkbox tree form and I used dynatree jquery tree to do that. Then I found out dynatree doesn't use real checkboxes so I placed html checkbox inside the tree.

Its working fine until I realise when the node is expanded/collapsed it remvoe the checked (the tick) value Is there a way in javascript I can write a function to prevent this happening?

Thanks so much. Here is my code

 $(function(){
      $("#tree").dynatree({
        // using default options

        checkbox: false,
        selectMode: 3,
        noLink: true,


    });

 <div id="tree">
    <ul>
      <li id="key1" title="Look, a tool tip!">
        <input type="checkbox" id="chb-key1" name="selected_items" value="Item 1" class="" />Item 1</li>
      <li id="key2">
        <input type="checkbox" id="chb-key2" name="selected_items" value="Item 2" />Item 2</li>
      <li id="key3">
        <input type="checkbox" id="chb-key3" name="selected_items" value="Item 3" />Folder with some children
        <ul>
          <li id="key31">
            <input type="checkbox" id="chb-key31" name="selected_items" value="Item 3.1" />Sub-item 3.1</li>
          <li id="key32" class="selected">
            <input type="checkbox" id="chb-key32" name="selected_items" value="Item 3.2" />Sub-item 3.2
            <ul>
              <li id="key321" class="selected">
                <input type="checkbox" id="chb-key321" name="selected_items" value="Item 3.2.1" />Sub-item 3.2.1</li>
              <li id="key322" class="selected">
                <input type="checkbox" id="chb-key322" name="selected_items" value="Item 3.2.2" />Sub-item 3.2.2</li>
            </ul>
          </li>
        </ul>
      </li>

[Shawn Crane]

Hi,

My understanding is, and Martin can correct if I'm wrong, what you place in the 'LI' when building the tree in HTML gets destroyed when Dynatree initialises the tree (except for <a> tags according to the documentation). This is due to Dynatree storing the tree in an internal structure and dynamically building the tree html when it is displayed.  

My question instead is, what are you trying to accomplish that can't be met by the method which Dynatree uses to represent check boxes?

Cheers,

Shawn.

[code9394]

I needed to use embed html checkbox in li fields. Because I read the example from the dynatree website and it seem you need to somehow to attach a post form url before you can submit the values. Which is going to be a problem for me because url fields alway be different in my situation.
Is there a method to stop the destroying or a method to use the javascript checkbox without needing to post with a url?

Thanks so much in advance.

[mar10]

there is a similar request here:

https://code.google.com/p/dynatree/issues/detail?id=351

could you please give some details there, why you need it?

I don't quite understand what you mean with

> Which is going to be a problem for me because url fields alway be different in my situation

Does the server get a different request body in this case (compared to having real checkboxes)?

[code9394]

Hi Martin,

I was referring to $.post(url, formData); statement don't worry about it I found out how to retrieve the url address.

"My suggestion is to add an example to embed it in the form without using AJAX post but instead the "normal" way of submitting forms (via POST).

This should mean converting the "tree.serializeArray()" to hidden input fields and then submitting the form."
 
This is exactly what I wanted to achieve. Do you have any example how can I convert into 
"tree.serializeArray()" to hidden input fields
?

Thanks so much!

[fredoche]

Hi

May I suggest this solution, inspired from Martin ajax post method  ?

// add an call back function on submit form event to include selected folders in form data
        $("form").submit(function() {

         // append Dynatree selected 'checkboxes'to form:
        var folder_list_tree = $("#yourtree").dynatree("getTree") ;
        var selected_folders = folder_list_tree.getSelectedNodes();
        var this_form = this;
        $.each(selected_folders,function(){
          $('<input>').attr({
                type: 'hidden',
                name: 'folder_selection',
                value: this.data.key
                }).appendTo(this_form);
            });

          return true;
        });

folder_selection fields will act as an <input type=checkbox name =folder_selection> tag, with as many entries as folders are selected

It seems to work good for me.

Do you have an opinion about this solution ?

Best regards

Fred