Unable to call Jquery function on button click

Question

I am new to mvc and jquery,

I have created one table with jquery and I am adding a button on each row. I need to call one function on the button click with argument.

My code is given bellow

function loadData(data) {

            var tab = $('<table class="myTable"></table>');
            var thead = $('<thead></thead>');
            thead.append('<th>Id</th><th></th>');
            thead.append('<th>Username</th>');

            tab.append(thead);
            $.each(data, function (i, val) {

                var trow = $('<tr></tr>');
                trow.append('<td>' + val.empID + '</td>');
                trow.append('<td>' +"" + '</td>');
                trow.append('<td>' + val.empName + '</td>');

 trow.append('<td><input type="button" value="Edit" onclick="Details(" ' + val.empID + ');" /></td>');


                tab.append(trow);
            });
            $("tr:odd", tab).css('background-color', '#C4C4C4');
            $("#AllEmployees").html(tab);

        };

and my function is:

        function Details(k) {

            alert("Failed! Please try again.");

        };

Here both functions are inside the document.ready method.

But the function call is not working.

Manwal · Accepted Answer · 2015-08-17 06:31:28Z

1

You have extra quote:

trow.append('<td><input type="button" value="Edit" onclick="Details(" ' + val.empID + ');" /></td>');
                                                                    ^

try this if your value val.empID is numeric:

trow.append('<td><input type="button" value="Edit" onclick="Details(' + val.empID + ');" /></td>')

If its a string then use \ to escape single quote:

trow.append('<td><input type="button" value="Edit" onclick="Details(\'' + val.empID + '\');" /></td>')

edited Aug 17, 2015 at 6:31

answered Aug 17, 2015 at 6:24

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

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

1 Comment

user2006703 Over a year ago

thanks i got the answer by changing that code and also i placed my function outside document.ready()

sudhansu63 · Accepted Answer · 2015-08-17 06:24:52Z

0

place the details function outside document ready.

function Details(k) {
     alert("Failed! Please try again.");
    }

Use this if you want to validate using your client side method. Return true/false from your method.

trow.append('<td><input type="button" value="Edit" onclick="return Details(' + val.empID + ');"

answered Aug 17, 2015 at 6:24

sudhansu63

6,2204 gold badges41 silver badges55 bronze badges

Comments

Anoop Joshi P · Accepted Answer · 2015-08-17 06:21:02Z

0

place the function outside document ready. Otherwise it will not be accessible from outside document ready. (your input will be rendered outside dom ready function)

answered Aug 17, 2015 at 6:21

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

1 Comment

user2006703 Over a year ago

thanks i got the answer by changing that code and also i placed my function outside document.ready()

CoderCoder · Accepted Answer · 2015-08-17 06:30:09Z

Try this

     function loadData(data) {
        var tab = $('<table class="myTable"></table>');
        var thead = $('<thead></thead>');
        thead.append('<th>Id</th><th></th>');
        thead.append('<th>Username</th>');

        tab.append(thead);
        $.each(data, function (i, val) {
            var trow = $('<tr></tr>');
            trow.append('<td>' + val.empID + '</td>');
            trow.append('<td>' +"" + '</td>');
            trow.append('<td>' + val.empName + '</td>');
            var tabledata='<td><input type="button" value="Edit"/></td>'
            tabledata.attr("empID",val.empID);
            tabledata.click(Details)
            trow.append(tabledata);
            tab.append(trow);
        });
        $("tr:odd", tab).css('background-color', '#C4C4C4');
        $("#AllEmployees").html(tab);

    };

    function Details() {

        alert("Failed! Please try again."+this.attr("empID"));

    };

Derekthar · Accepted Answer · 2015-08-17 06:30:54Z

0

Why don't create an input like:

<input class="edit_button" type="button" value="Edit" />

And then in your document.ready

$('.edit_button').on('click', function(event){
    event.preventDefault();
    alert("Failed! Please try again.");
});

answered Aug 17, 2015 at 6:30

Derekthar

5432 gold badges12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Unable to call Jquery function on button click

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related