javascript call a function from another

Question

I have this JS function:

function addMemberToLessonDirect(id)
    {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            method: 'POST', 
            url: '/admin/lessons/addMember/licenseMemberId', 
            data: {'licenseMemberId' : id},
            success: function(response){ 

                if ($.trim(response)) {
                    var actualMembers = document.getElementById("actual-member");

                    if (!$.trim(actualMembers)) {

                        $('#no_members').hide();
                        var div1 = document.createElement('div');
                        div1.setAttribute('class','table-responsive');
                        $('#space').append(div1);
                        var actualMembers = document.createElement('table');
                        actualMembers.setAttribute('class','table');
                        div1.append(actualMembers);
                    }

                    var newRow = actualMembers.insertRow(actualMembers.length);
                    newRow.setAttribute( "data-id",response['llm']['id']);
                    id = newRow.insertCell(0);
                    id.innerHTML = response['user_saved']['id'];
                    nip = newRow.insertCell(1);
                    nip.innerHTML = response['user_saved']['nip'];
                    update.innerHTML ="<a class='btn btn-info btn-xs edit' title='{{__('member.edit')}}'> <i class='fa fa-pencil'></i> </a>";
                }
                $('#membersModal').modal('hide');

            },
            error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
            }
        });

    }

This function call or create a table (actual-member) and add rows and columns. This function is called when I choose an element from a modal that I have. When I choose the element in the modal this element will be appended to the table.

Now this table has also another JS function that make some of the fields editables and saveable:

$("#actual-member tr").editable({

        keyboard: true,
        dblclick: true,
        button: true,
        buttonSelector: ".edit",
        dropdowns: {},
        maintainWidth: true,

        edit: function (values) {
            $(".edit i", this)
                .removeClass('fa-pencil')
                .addClass('fa-save')
                .attr('title', '{{__('member.save')}}');
        },
        save: function (values) {

            values._token = '<?php echo csrf_token(); ?>';


            //console.log(values);
            var lessonLicenseMemberId = $(this).data('id');
            $.post('/admin/lessons/editLessonLicenseMember/' + lessonLicenseMemberId, values);
        },
        cancel: function(values) {
            $(".edit i", this)
                .removeClass('fa-save')
                .addClass('fa-pencil')
                .attr('title', '{{__('member.edit')}}');
        }

    });

When I try to click the edit button in the table on an element not created with the addMemberToLessonDirect function it works well, but when I click on the same button on elements created by the addMemberToLessonDirect function nothing happens. I think that they don't have the "property" editable (second function). Is it possible to call the editable function from the addMemberToLessonDirect function?

Answer 1

The elements which are created with addMemberToLessonDirect are created asynchronously from the ajax callback. That means that you don't really know when they are available for the DOM - and for sure they are not avaialble when you call $("#actual-member tr").editable({... . which I assume is somewhere in your code which is executed synchronously.

You do know they are availalbe when the callback is executed after the ajax call, in the success: function(response){ ... callback.

Per this, What you need to do is add the same logic as in $("#actual-member tr").editable({ to the callback return in success: function(response){ ..