Renaming node from jsTree inside a mvc2 form.

Question

I've the following code:

<% using (Html.BeginForm("Update", "SkillLevel", FormMethod.Post, new { id = "TheForm" }))
   { %>
    <div id="demo3" class="demo">
        <ul>
            <li id="shtml_1">

                <a href="#">Root node 1</a>
                <ul>
                    <li id="shtml_2">
                        <a href="#">Child node 1</a>
                    </li>
                    <li id="shtml_3">
                        <a href="#">Child node 2</a>

                    </li>
                </ul>
            </li>
            <li id="shtml_4">
                <a href="#">Root node 2</a>
            </li>
        </ul>
    </div>

The problem is that when I rename a node, i press Enter to complete the rename. But when pressing Enter, the form gets submitted and the new value is never changed in the tree.

How to sole this ?

Answer 1

The solution is to add a 'keypress' event to the jsTree to stop propagating the Enter key.

$("#demo1").keypress(function (event) { 
    if (event.keyCode == '13') {
        event.preventDefault();
    }
});

The full solution:

• is based in jsTree 1.x
• which puts the node in 'rename-mode' when the image is clicked
• and stores the renamed value into a hidden input to pass this to the MVC Controller.

...

<div id="demo1" class="demo">
    <ul>
        <li id="phtml_1" rel="root">
            <a href="#">Root node 1</a>
            <ul>
                <li id="phtml_2">
                    <a href="#">Child node 1</a>
                </li>
                <li id="phtml_3" rel="skill_other">
                    <a href="#">Other
                    <input type="hidden" value="Other" id="phtml_3Other" />
                    </a>
                </li>
            </ul>
        </li>
        <li id="phtml_4" rel="root">
            <a href="#">Root node 2</a>
        </li>
    </ul>
</div>
<script type="text/javascript" class="source">
$(function () {
    $("#demo1")
    .bind("rename.jstree", function (e, data) {
        var nodeId = '#' + data.args[0].attr('id');
        var text = $("#demo1").jstree(nodeId).get_text();

        $(nodeId + 'Other').val(text);
    })
    .jstree({ 
        "types" : {
            "valid_children" : [ "root" ],
            "types" : {
                "root" : {
                    "icon" : { 
                        "image" : "./_drive.png" 
                    },
                    "valid_children" : [ "default" ],
                    "max_depth" : 2,
                    "hover_node" : false
                    //"select_node" : function () {return false;}
                },
                "default" : {
                    "valid_children" : [ "default" ]
                }
            }
        },
        "plugins" : ["themes","html_data","dnd","ui","types", "crrm"]
    });

    $("li[rel='skill_other'] > a > ins").click(function () { 
        var node = $(this).parent().parent();
        $("#demo1").jstree("rename", node);
    });
});
</script>