How to pass variable between two event function in Jquery?

Question

I want to pass string variable from one jquery event to another jquery event. I searched some problems and solutions on stack overflow regarding my issue, but I couldn't find one relevant solution with respect to my problem which I am facing. I am performing some backend operations using Jquery and AJAX using python Flask and Neo4j graph database.

The following is my jquery code

<script type="text/javascript">

    var asstName = "";

    $('select#label_Name').change(function(){
        asstName = $('#label_Name').val();
        console.log(asstName);
        $.ajax({
            url: '/get_asset',
            data: asstName,
            type: 'POST',
            dataType: 'json',
        }).done(function(data){
            // console.log(data);
            var print = "";
            for (i=0; i < data['nodeList'].length; i++){
                print += "<tr>" +
                            "<td>" + data['nodeList'][i]['Asset_Name'] + "</td>" +
                            "<td>" + data['nodeList'][i]['Asset_Manufacturer'] + "</td>" + 
                            "<td><button id=" + data['nodeList'][i]['Asset_Name'] + ">" + 
                            "<i style='color: red;' class='fa fa-trash'></i></button>" +
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
                            "<button id=" + data['nodeList'][i]['Asset_Name'] + ">" + 
                            "<i style='color: blue;' class='fa fa-pencil'></i></button>" +
                            "</td>" +
                         "</tr>";
           }
           $('tbody#tBody').html(print);
        })
    });

    $('#button').click(function(){
        var delName = $(this).attr('id');
        console.log(asstName);
        $.ajax({
            url: '/deleteNode',
            data: JSON.stringify(delName),
            dataType: 'json',
            type: 'POST' 
        }).done(function(data){
            console.log(data);
        })
    });

</script>

1. There are two events one is "drop-down on change" list and other one is button click.
2. When I select any list element from drop-down ajax call is made and from data base data is populated in table.
3. Now I am performing some operation on table elements where I have used buttons for Deleting element.

As you can see there are two events that is

$('select#label_Name').change

and

$('#button').click

How can I pass string variable "asstName" to event button click?

Answer 1

Below will be possible solution based on my assumptions.

<script type="text/javascript">

    var asstName = "";

    $('select#label_Name').change(function(){
        asstName = $('#label_Name').val();
        console.log(asstName);
        $.ajax({
            url: '/get_asset',
            data: asstName,
            type: 'POST',
            dataType: 'json',
        }).done(function(data){
            // console.log(data);
            var print = "";
            for (i=0; i < data['nodeList'].length; i++){
                print += "<tr data-assetname="+asstName+">" + // added a new attr
                            "<td>" + data['nodeList'][i]['Asset_Name'] + "</td>" +
                            "<td>" + data['nodeList'][i]['Asset_Manufacturer'] + "</td>" + 
                            "<td><button id=" + data['nodeList'][i]['Asset_Name'] + ">" + 
                            "<i style='color: red;' class='fa fa-trash'></i></button>" +
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
                            "<button id=" + data['nodeList'][i]['Asset_Name'] + ">" + 
                            "<i style='color: blue;' class='fa fa-pencil'></i></button>" +
                            "</td>" +
                         "</tr>";
           }
           $('tbody#tBody').html(print);
        })
    });

    $('#button').click(function(){ // I assume this is the trash button click function. If yes, It wont work, because it is dynamically created element and you need to use $(document).on("click"). Also if the table has multiple row, then ID is duplicated.
        var delName = $(this).attr('id');
        asstName = $(this).closest('tr').attr('data-assetname');
        console.log(asstName);
        $.ajax({
            url: '/deleteNode',
            data: JSON.stringify(delName),
            dataType: 'json',
            type: 'POST' 
        }).done(function(data){
            console.log(data);
        })
    });

</script>

Answer 2

You can emit the event(custom events) whenever you change the option list and subscribe it on the button click

For Ex: let chnageEvent = new CustomEvent('valuechnaged', { detail: { "value": _val, "currentVal": value }});

document.dispatchEvent(chnageEvent );

Answer 3

Instead of accessing the variable, you can get the value of the dropdown inside your click handler with this $('#label_Name').val(); What I understand is that you only need the value of the dropdown inside click handler

Answer 4

I think you can get the value of asstName directly in event button click instead of parsing them for select event.

Why do not add this code in your button click event

var asstName = $('#label_Name').val();