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>

There are two events one is "drop-down on change" list and other one is button click.
When I select any list element from drop-down ajax call is made and from data base data is populated in table.
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?

Gurprit singh · Accepted Answer · 2019-01-28 06:39:48Z

2

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

answered Jan 28, 2019 at 6:39

Gurprit singh

212 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shriniwas Over a year ago

Yes Thats exactly what I am intend to do.

Gurprit singh Over a year ago

Can you also mention the error that gets thrown when you click the button.

Alaksandar Jesus Gene · Accepted Answer · 2019-01-28 11:17:55Z

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>

Well I used your suggestion that is using document and click event related to button id and it worked for me. Thanks!!

dtk142 · Accepted Answer · 2019-01-28 06:38:24Z

0

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();

answered Jan 28, 2019 at 6:38

dtk142

512 silver badges10 bronze badges

1 Comment

Shriniwas Over a year ago

Well I did that as you said, I added the same in button event but not working!!! I want to pass the asstName which I got in ".change" event to button ".click" event.!!

Sri Harsha · Accepted Answer · 2019-01-28 06:45:54Z

0

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

answered Jan 28, 2019 at 6:45

Sri Harsha

337 bronze badges

2 Comments

Shriniwas Over a year ago

Can you more elaborate? Thanks!!

Sri Harsha Over a year ago

Whenever there is a change in your list of drop down,create a custom event with the details of your values needed, And you have to subscribe the event in following way, document.addEventListener('sliderValuechanged', function (event) { let changeVal = (<any>event).currentVal; let defaultval = (<any>event).value ; }, so that you can get the events which has been changed on your change function.

Collectives™ on Stack Overflow

How to pass variable between two event function in Jquery?

4 Answers 4

2 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related