CODEWITHSUNDEEP
javascriptjqueryajax
temp-learn
temp-learn

Reputation: 537

event not triggering after ajax response Jquery

i have following functions 

      function populateTableData(){
                jQuery('select[name="drg-select"]').change(function() {
                    drgValue=jQuery(this).val();
                    url="http://localhost/url/FetchRecordFromDatabase.php";
                    jQuery.ajax({
                        dataType: "json",
                        type: 'post',
                        url: url,
                        data: {drgValue: drgValue},
                        success:(function(data) {
                            var str = '';
                            jQuery.each(data, function (key, value) {
                                str += '<tr><td id="'+value[0]+'" value="'+value[0]+'">' + value[0] + '</td>'
                                    + '<td id="'+value[1]+'" value="'+value[1]+'">' + value[1] + '</td>'
                                    + '<td id="'+value[2]+'" value="'+value[2]+'">' + value[2] + '</td>'
                                    + '<td id="'+value[3]+'" value="'+value[3]+'">' + value[3] + '</td></tr>';
                            });
                            jQuery('table[name=drg_table] tbody').html(str);
                        })
                    });
                });
            }

and 

        function  fetchValuesForDrgDefinition(url,param) {
                jQuery.ajax({
                    type:'post',
                    dataType: "json",
                    url: url,
                    data: {hospital_name:param},
                    success:(function(data) {
                        drawVisualization(data);
                        jQuery('#hospital_title').html(param);
                    })
                });                         
            }

and this is how i am calling them

          jQuery( document ).ready(function() {
                populateTableData();
                jQuery("table[name='drg_table'] tr td").click(function(){  
                    var hospital_name=jQuery(this).text();
                    fetchValuesForDrgDefinition(urlTable,hospital_name);
                });

            });

The problem is when following functions are called for 1st time they work, but if i 1st trigger populateTableData and then try fetchValuesForDrgDefinition event dont occur. P.S events to these functions are called independently but if called one 1 after other , the later called donot trigger.

Upvotes: 0

Views: 212

Answers (3)

damian
damian

Reputation: 5444

Try the following:

jQuery( document ).ready(function() {
    populateTableData();
    jQuery("table[name='drg_table']").on("click", "tr td", function(){  
        var hospital_name=jQuery(this).text();
        fetchValuesForDrgDefinition(urlTable,hospital_name);
    });
});

The problem occurs because you're adding the td's dynamically and the event is delegated before they even exist. If the table is a static element it should work for you. If it isn't static delegate the event to its next static parent (or to the document).

EDIT: Using an old version of jQuery

If you're using a jQuery version lower than 1.7 use the live function:

jQuery( document ).ready(function() {
    populateTableData();
    jQuery("table[name='drg_table'] tr td").live("click", function(){  
        var hospital_name=jQuery(this).text();
        fetchValuesForDrgDefinition(urlTable,hospital_name);
    });
});

EDIT: Conflict with other libraries

If you're using another library besides jQuery some conflicts can occur. Use jQuery's noConflict function to prevent that.

It's usually the best to insert this right after you include the jQuery library and before you include any other library:

<script src="code.jquery.com/jquery-1.9.1.js">
<script>jQuery.noConflict();</script>

Upvotes: 2

patel.milanb
patel.milanb

Reputation: 5992

for elements created dynamically, you need to attach event on a document level so that whenever documents add elements on the page(in this case dynamic elements), it also attaches the vent associated with it.

$(document).on("click", "table[name='drg_table']", function() {
    populateTableData();
    var hospital_name=$(this).text();
    fetchValuesForDrgDefinition(urlTable,hospital_name);
});

Upvotes: 1

Bhalchandra K
Bhalchandra K

Reputation: 2681

Have you tried binding using jquery On, as below -

 jQuery("table[name='drg_table'] tr td").on('click',function(){  
                    var hospital_name=jQuery(this).text();
                    fetchValuesForDrgDefinition(urlTable,hospital_name);
});

It is meant for very similar scenarios. Where DOM elements are created dynaically.

Upvotes: 1

Related Questions