CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-4jquery-ui
user2006703
user2006703

Reputation: 9

Unable to call Jquery function on button click

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.

Upvotes: 0

Views: 1849

Answers (5)

Manwal
Manwal

Reputation: 23826

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

Upvotes: 1

Derekthar
Derekthar

Reputation: 543

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.");
});

Upvotes: 0

CoderCoder
CoderCoder

Reputation: 368

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

    };

Upvotes: 0

sudhansu63
sudhansu63

Reputation: 6190

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 + ');"

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

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)

Upvotes: 0

Related Questions