JavaScript Calling Method

Question

User1308270069 posted

Hi everyone

I generated the <g class="gr_ gr_147 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="147" data-gr-id="147">Json</g> and a button that uses a function:

this is my code:

var ShowUser = function (userId) {
    var url = '/Partial/User/ShowUser/' + userId;
    $('#delete-user-body').load(url, function () {
        $('#deleteUserModal').modal('show');
    })
}

$(function () {
    var thead = $('#thead');
    var tbody = $('#tbody');
    $('#user-list').on('click', function () {
        //containerDiv.empty();
        var pageNumber = 1;
        $.getJSON('/DAL/Users/UsersList/' + pageNumber, function (users) {
            thead.append(
                '<tr>' +
                    '<th scope="col">Name</th>' +
                    '<th scope="col">SSN</th>' +
                    '<th scope="col">Mobile</th>' +
                    '<th scope="col">Phone</th>' +
                    '<th scope="col">Address</th>' +
                    '<th scope="col"></th>' +
                '</tr>'
                );
            $.each(users, function (index, user) {
                var btn = document.createElement('button');
                btn.className = "btn btn-default";
                btn.innerHTML = "&times;";
                tbody.append(
                    '<tr>' +
                        '<td>' + user.FullName + '</td>' +
                        '<td>' + user.Ssn + '</td>' +
                        '<td>' + user.Mobile + '</td>' +
                        '<td>' + user.PhoneNumber + '</td>' +
                        '<td>' + user.Address + '</td>' +
                        '<td id="btn-container">' +
                            '<button class="btn btn-default" id="deleteUser" type="button" onclick="' + 'ShowUser(' + user.UserId + ')">' +
                                '&times;' +
                            '</button>' +
                        '</td>' +
                    '</tr>'
                    )
            });
        });
    });
});

the button is calling the ShowUser on its onClick event but it doesn't work when I generate the button.

can anyone help me how to fix this?

Answer 1

User753101303 posted

Hi,

Always use F12 Console or more generally https://www.w3schools.com/js/js_debugging.asp to start by looking at what happens exactly when your code runs.

Trying to guess by reading the code can work but is often slower. If ShowUser is not entered what if using a "real" function rather than a assigning your function to a variable?

Answer 2

User-2054057000 posted

Hi everyone

I generated the Json and a button that uses a function:

this is my code:

var ShowUser = function (userId) {
    var url = '/Partial/User/ShowUser/' + userId;
    $('#delete-user-body').load(url, function () {
        $('#deleteUserModal').modal('show');
    })
}

$(function () {
    var thead = $('#thead');
    var tbody = $('#tbody');
    $('#user-list').on('click', function () {
        //containerDiv.empty();
        var pageNumber = 1;
        $.getJSON('/DAL/Users/UsersList/' + pageNumber, function (users) {
            thead.append(
                '<tr>' +
                    '<th scope="col">Name</th>' +
                    '<th scope="col">SSN</th>' +
                    '<th scope="col">Mobile</th>' +
                    '<th scope="col">Phone</th>' +
                    '<th scope="col">Address</th>' +
                    '<th scope="col"></th>' +
                '</tr>'
                );
            $.each(users, function (index, user) {
                var btn = document.createElement('button');
                btn.className = "btn btn-default";
                btn.innerHTML = "&times;";
                tbody.append(
                    '<tr>' +
                        '<td>' + user.FullName + '</td>' +
                        '<td>' + user.Ssn + '</td>' +
                        '<td>' + user.Mobile + '</td>' +
                        '<td>' + user.PhoneNumber + '</td>' +
                        '<td>' + user.Address + '</td>' +
                        '<td id="btn-container">' +
                            '<button class="btn btn-default" id="deleteUser" type="button" onclick="' + 'ShowUser(' + user.UserId + ')">' +
                                '&times;' +
                            '</button>' +
                        '</td>' +
                    '</tr>'
                    )
            });
        });
    });
});

the button is calling the ShowUser on its onClick event but it doesn't work when I generate the button.

can anyone help me how to fix this?

You have to check the browser console window for JS errors. Since your code is quite big which first fetches a JSON using jQuery. getJSON method then then builds a HTML table based on the received JSON values. Break your code into smaller parts, keep one logic at a time then adds them one by one until each of the code line is integrated. In this way you will find your logic error in your code. 

Answer 3

User839733648 posted

Hi saeed_saedvand,

As PatriceSc and yogyogi have suggested, you could use F12 developer tools to check if there is any error message or information in the console tab.

You could also debugger with the tool to check if the json data returned successfully and if the function of displaying data is correct.

Or if possible, please provide more details like your html page code or the code of returning json data.

This will be easier for us to help with you.

Best Regards,

Jenifer

Answer 4

User1308270069 posted

<g class="gr_ gr_3 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="3" data-gr-id="3">JSon</g> result returns successfully but my little <g class="gr_ gr_42 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="42" data-gr-id="42">times</g> icon doesn't work even. it should show me a modal but it works when it's not produced by <g class="gr_ gr_115 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="115" data-gr-id="115">Json</g> and doesn't work when it returns by Json

Answer 5

User-474980206 posted

Use the browser debug tools to verify the onclick handler is properly attached, and valid syntax.

Answer 6

User753101303 posted

This is what understood but even if the first part works by reading the code I see that :
- it could be because using a var rather than a function (I expect this to work but don't remember to have ever tried this myself so I'm still not 100% sure it is not that)
- it could be that load fails because the address or the parameter is wrong (because of an error in the property name you are using to populate that for example)
- it could be that showing the modal fails because the content is not valid any more or the library is not loaded (or may you have an error on the selector)

In short what I tried to tell is that by reading code, you can often imagine something that could possibly fail at almost each line.

So unless of course you have an obvious error in your code (in which case you likely won't ask for help anyway as you'll see this); this is why I insist often on learning and using debugging tools which may take maybe here 5 more minutes to see exactly what fails when your code runs. You can then move forward to fixing this issue, rather than reading your code again and again and keep wondering why your code "doesn't work".