noeud de jsTree Changement de nom dans une forme MVC2

Question

J'ai le code suivant:

<% 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> 

Le problème est que lorsque je renomme un nœud, j'appuyez sur Entrée pour terminer le changement de nom. Mais lorsque vous appuyez sur Entrée, le formulaire est soumis et la nouvelle valeur n'est jamais modifiée dans l'arborescence.

Comment poser une semelle de cette manière?

Answer 1

La solution consiste à ajouter un événement 'keypress' au jsTree pour arrêter la propagation de la touche Entrée.

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

La solution complète:

• est basé à jsTree 1.x
• qui met le nœud 'renommer en mode' lorsque l'image est cliqué
• et stocke la valeur renommé dans une entrée cachée pour transmettre cela au contrôleur MVC.

...

<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>