Get div id by class name in jquery

Question

I'm trying to get id of a div with a class name 'heading' using jquery. After that I want to pass that id to the code behind and work with it.

After I click my link the JS function is invoked but I guess I've didn't do well job on the inside of it, cause I got null value for ar variable instead of "16".

Can someone help me with this problem? I'm totally new to jquery and I still don't know all of it's possibilities well.

This is my HTML:

<div class="heading" id="16"><span>Nemanja Mosorinski</span><i>+</i></div>
<div class="details">
    <ul class="form">
        <li>
            <label>Name:</label><input type="text" class="in-text" /></li>
        <li>
            <label>Hours per week:</label><input type="text" class="in-text" /></li>
    </ul>
    <ul class="form">
        <li>
            <label>Username:</label><input type="text" class="in-text" /></li>
        <li>
            <label>Email:</label><input type="text" class="in-text" /></li>
    </ul>
    <ul class="form last">
        <li>
            <label>Status:</label><span class="radio"><label for="inactive">Inactive:</label><input type="radio" value="1" name="status" id="Radio5" /></span><span class="radio"><label for="active">Active:</label><input type="radio" value="2" name="status" id="Radio6" /></span></li>
        <li>
            <label>Role:</label><span class="radio"><label for="admin">Admin:</label><input type="radio" value="1" name="status" id="Radio7" /></span><span class="radio"><label for="worker">Worker:</label><input type="radio" value="2" name="status" id="Radio8" /></span></li>
    </ul>
    <div class="buttons">
        <div class="inner"><a href="javascript:;" id="updateMember" class="btn green">Save</a> <a href="javascript:;" class="btn red">Delete</a> <a href="javascript:;" class="btn orange">Reset Password</a></div>
    </div>
</div>

And this is my script:

<script type="text/javascript">
    $(function () {
        $('#updateMember').click(function () {
            $('.heading').closest(function () {
                var ar = this.id;
                $.ajax({
                    type: "POST",
                    url: 'team-members.aspx/UpdateTeamMember',
                    data: "{'ID':'" + ar + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: fnsuccesscallback,
                    error: fnerrorcallback
                });
            });
        });
        function fnsuccesscallback(data) {
            alert(data.d);
        }
        function fnerrorcallback(result) {
            alert(result.statusText);
        }
    });
</script>

Answer 1

I don't think you mean to pass your entire functionality to closest().

We can use the context of #updateMember to traverse (by means of .closest() and .prev()) to the nearest .header though, and get its id using .prop().

Also, the data property passed to $.ajax() accepts an Object Literal.

How about the following:

$(function () {
    $('#updateMember').click(function () {
        var ar = $(this).closest('.details').prev('.heading').prop('id');
        $.ajax({
            type: "POST",
            url: 'team-members.aspx/UpdateTeamMember',
            data: {"ID" : ar},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: fnsuccesscallback,
            error: fnerrorcallback
        });
    });
    function fnsuccesscallback(data) {
        alert(data.d);
    }
    function fnerrorcallback(result) {
        alert(result.statusText);
    }
});

Note: Please use the console for debugging (it's why it's there!) Using alert() will cause more confusion than it clears up.

Answer 2

instead of

data:"{'ID':'" + ar + "'}",

try this:

data: {"ID": ar },

and as mentioned here stingify it. Hope it helps