Trigger Input click event when Label Text Change

Question

I have a label with id lblResult
I have the following code:
@(Html.TreeView(Model) .EmptyContent("root") .Children(m => m.Childs) .HtmlAttributes(new { id = "tree" }) .ChildrenHtmlAttributes(new { @class = "subItem" }) .ItemText(m => m.AssetNumber) .ItemTemplate( @ @*@item.AssetNumber*@ ) )
Then, I have the following code on the view:

@using (Html.BeginForm("AssetTypeIndex", "ControlFiles", FormMethod.Get))
{
<div class="row">
<div class="col-lg-offset-2 col-lg-8 col-lg-offset-2">
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Search</span>
@Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control" })
<span class="input-group-btn">
<button class="btn btn-default" type="submit" value="Search">View</button>
</span>
</div>
<div class="pull-right">
<a [email protected]("AssetTypeCreate", "ControlFiles") class="btn btn-default">Create New</a>
</div>
</div>
</div>
</div>
}

On script section:
$(function () { var selectedData; $('#jstree').jstree({ "core": { "multiple": true, "check_callback": true, 'themes': { "responsive": true, 'variant': 'small', 'stripes': false, 'dots': true } }, "types": { "default": { "icon": "glyphicon glyphicon-record" }, "root": { "icon": "glyphicon glyphicon-ok" } }, "plugins": ["dnd", "state", "types", "sort"] }).on('changed.jstree', function (e, data) { var i, j, r = []; for (i = 0, j = data.selected.length; i

If you see on the code above. There's a submit button which is trigger the search function on the controller.
My question is, Is it possible to run the 'Search Function' without clicking the button? I want to run the 'Search Function' when lblResult received the text from jsTree, it means when lblResult text is change.

Please advice.
Thank you.

@BaiNguyen, it changes when I clicking a node on my jsTree. Cheers, — Haminteu
– Haminteu, Commented Mar 1, 2018 at 8:25
So i think when you click this, you had better submit search form. — Bai Nguyen
– Bai Nguyen, Commented Mar 1, 2018 at 8:29
@BaiNguyen, I didn't get you. I am new on MVC. Could you give an answer section please? Also, when I clicking on the node. I want to display the value also on Label. That's why I've the question above. — Haminteu
– Haminteu, Commented Mar 1, 2018 at 8:36

Prabhu · Accepted Answer · 2018-03-01 09:57:05Z

Option 1: When clicking a node on your jsTree trigger that submit function by simulating a mouse-click using click method. As you know for sure the label will be changing.

@using (Html.BeginForm("AssetTypeIndex", "ControlFiles", FormMethod.Get)){
    <div class="row">
        <div class="col-lg-offset-2 col-lg-8 col-lg-offset-2" style="margin-top:-5px;">
            <div class="form-inline">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">Search</span>
                    @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control" })
                    <span class="input-group-btn">
                        <button class="btn btn-default" id="submitSearch" type="submit" value="Search">View</button>
                    </span>
                </div>

                <div class="pull-right">
                    <a [email protected]("AssetTypeCreate", "ControlFiles") class="btn btn-default">Create New</a>
                </div>
            </div>
        </div>
    </div>
}
$("#submitSearch").click(); // use the code when clicking a node on jsTree

Option 2: If you are manually changing the label by entering in a textbox then use the keyup event to trigger submit function.

$(function(){
  $("#lblreasult").on('keyup', function(){
    $("#submitSearch").click();
  });
});

Bai Nguyen · Accepted Answer · 2018-03-02 01:06:05Z

0

Sorry for my late reply, when you click on a node in your jsTree ex: a tag have id is node1, you can remove this code

<span class="input-group-btn">
     <button class="btn btn-default" id="submitSearch" type="submit" value="Search">View</button>
 </span>

or add this css code

#submitSearch{display:hidden}

I edited a bit in your code

$('#jstree').on('changed', function (e, data) { 
    var i, j = data.selected.length, r = []; 
    for(i = 0,  i < j; i++) { 
        r.push(data.instance.get_node(data.selected[i]).text); 
    } 
    $('#event_result').html('Selected: ' + r.join(', ')); 
    $('#lblResult').text('your text here');//
    $('form').submit();
});

edited Mar 2, 2018 at 1:06

answered Mar 1, 2018 at 11:42

Bai Nguyen

8248 silver badges19 bronze badges

1 Comment

Haminteu Over a year ago

I use this when clicking node --> <a href="@item.AssetID" desc="@item.AssetID">@item.AssetNumber</a> ... Then on the script sect... $('#jstree') // listen for event .on('changed.jstree', function (e, data) { var i, j, r = []; for(i = 0, j = data.selected.length; i < j; i++) { r.push(data.instance.get_node(data.selected[i]).text); } $('#event_result').html('Selected: ' + r.join(', ')); }) // create the instance .jstree();

Collectives™ on Stack Overflow

Trigger Input click event when Label Text Change

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related