Question

I have the jstree search plugin working fine inside a HTML page. The data for the tree is loaded with ajax, and the search is permformed with ajax.

Everything works fine until I put it in another form.

If I put the same code inside a HTML form it doesn’t work anymore because the search is not performed.

The search is not performed because the whole form is submitted when I click the search button of the plugin.

How do I catch the click on the search button and prevent the whole form to be submitted ?

The global form has its own submit button and it still works fine.

I tried the solution in this thread but it doesn’t work :
http://groups.google.com/group/jstree/browse_thread/thread/7945aa59fca2d9c9

Also this does not work :

<form id="list" name="list" action="save.php" method="post">

    <!-- jstree button and input text for search plugin -->
    <div id="mmenu">
        <input type="submit" id="search" value="Go" />
        <input type="text" id="text" value=""  />
    </div>

    <!-- the tree container -->
    <div id="indexation" class="indexation"></div>

    <input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>

    <input type="submit" name="sendform" value="Save" />
</form>

<script type="text/javascript">
// Code for the menu buttons
     $(document).ready(function(){

    $("#mmenu input").click(function () {
        switch(this.id) {
            case "add_default":
            case "add_folder":
                $("#indexation").jstree("create", null, "last", {
            "attr" : {
            "rel" : this.id.toString().replace("add_", "") }
                });
                break;
            case "search":
                $("#indexation").jstree("search", document.getElementById("text").value);
                break;
            case "text": break;
            default:
                $("#indexation").jstree(this.id);
            break;
        }
    });
});
</script>

Any idea/tip would be greatly appreciated

Here is the jsfiddle :

http://jsfiddle.net/v9VRr/6/

thank you,

Answer 1

I found a solution, not really clever but at least it works. Just put the jstree html needed for search outside of the form elements :

<form id="list" name="list" action="save.php" method="post">

<!-- the tree container -->
<div id="indexation" class="indexation"></div>

<input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>
<input type="submit" name="sendform" value="Save" />

<form>

<!-- jstree button and input text for search plugin -->
<div id="mmenu">
    <input type="submit" id="search" value="Go" />
    <input type="text" id="text" value=""  />
</div>

Then position the div id=”mmenu” where you need it via CSS.