CRUD operations using dynamically created objects in Javascript

Question

0.00/5 (No votes)

See more:

I am trying to do basic Crud operation in JavaScript and I am having some difficulty. Let me explain by showing you the code:

HTML

<html>
    <head>
        <title></title>
    </head>
<body>
    <input id="name" type="text" value="" />
    <input id="Add" type="button" value="Add" />
   
    <div id="userList" ></div>

<script type="text/javascript" src="../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
    $(function ($) {
        var User = function (name) {
            this.Name = name;
            this.Delete = function () {
                // this will be button element
                alert(this.Name);
                // how can I access the user element here ?
            }
        }

        $('#Add').click(function () {
            nUser = new User($('#name').val());
            $('#userList').append(GetViewTemplate(nUser));
        });

        function GetViewTemplate(user) {
            var del = $("<input type='button' value='Delete' />");
            // I am binding the click event of an instance method
            del.click(user.Delete);

            var li = $("<div>" + user.Name + "</div>");
            li.append(del);
            li.append("<br />");

            return li;
        }

    });
</script>
 
</body>
</html>

I have a "User" class in JavaScript, which has a property "Name" and a Function "Delete".

When the Add button is clicked:
I am creating a user object and assigning text box value to Name property

JavaScript

var nUser = new User($('#name').val());

I am displaying the newly created user in a DIV where I am showing the Name and a "Delete" (created dynamically) button assigning the onclick function of the same to the user (obj) "Delete" function

JavaScript

var del = $("<input type='button' value='Delete' />");
del.click(user.Delete);

But when the "Delete" button is clicked I want to access the User instance and not the button element.

Is there any way to accomplish this ?

Posted 11-Feb-15 0:23am

sandeshjkota

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2015-02-11T01:20:00

Solution 1

You have just missed one step, the anonymous function:

del.click(function(){user.Delete()});

Posted 11-Feb-15 1:20am

Peter Leow

Comments

jaket-cp 11-Feb-15 7:30am

in reference to the anonymous function :)
5ed

sandeshjkota 12-Feb-15 1:06am

Well this solved the problem. But I am not sure why do we have to do this. Can you please shed some light ?

Peter Leow 12-Feb-15 3:17am

According to http://api.jquery.com/click/
An event handler (such as an anonymous function) is required to bind to the click event(),
Putting "user.Delete" is amounting to a function call, not an event handler.