Set value to parent's parent's child's sibling after Ajax Call

Question

I have a Dropdown under two DIV. On change of the value, i am making an AJAX request. After that i am getting value and stored in a variable. Now i need to set the received value to the current DIV's parent parent siblings child. Refer the below code.

<div class="parentcontainer">
<div class="ui-block-a">
    <div class="psFieldLabel">Attendee</div>
    <div class="psFieldInput">
        <select name="namelist" id="nameListId" maxlength="50" class="required attendeeName">
            <option></option>
            <option value="Hari">Hari</option>
            <option value="Ramesh">Ramesh</option>
            <option value="Kumar">Kumar</option> 
        </select>
    </div>                                 
</div>
<div class="ui-block-b">
    <div class="psFieldLabel">Description</div>
    <input type="text" name="descriptionName" id="descriptionId" value="0" class="psName description" />
</div>
</div>

In My Javascript: onchange of "attendeeName" select class i am making a Ajax call and getting value. But i am not able to push the received value to "descriptionName" class.

NOTE: On a button Click i am generating the above mark-up("parentcontainer" class) several time dynamically. So whenever i change the dropdown value, corresponding description value should be updated. But not on the next "parentcontainer".

Tried this, But its not working:

$(this).parent().parent().siblings(".description").val(ajaxResult);

Where is `ajax` ? This may help! http://stackoverflow.com/questions/35940556/javascript-class-property-not-set-in-success-function-of-ajax-call/35940586#35940586 — Rayon, Apr 05 '16 at 08:14
Exactly @Apolo. Same question here. When you have an ID as a selector, why do you want to traverse using parent and sibling? — Vinod Bhavnani, Apr 05 '16 at 08:22
@Apolo, ID will be changed every time i add an row, for next row, it will be "#descriptionId01", then "#descriptionId02" like that it will grow. — Ramesh, Apr 05 '16 at 09:04
@user1504265 The ID will be changed every time i add a new container. — Ramesh, Apr 05 '16 at 09:17

Rajshekar Reddy · Accepted Answer · 2016-04-05T09:49:52.143

3

in this code

$(this).parent().parent().siblings(".description").val(ajaxResult);

As you mentioned you are doing this in ajax success, Here $(this) will not point to your changed dropdown. So here is what you can do.

make a variable to store the dropdown that triggered the change event, And then navigate to the parent parent and do your stuff. Like this

   var $dropdown= $(this); // inside your change event save the dropdown into a variable.
   $.ajax({
     ...
     ...
     success: function(ajaxResult){
       $dropdown.parent().parent().siblings(".description").val(ajaxResult); 
       // navigate from the dropdown.
     }
   });

Also a pointer: If the id of the input in your markup is unique then you can directly do this. $('#descriptionId').val(ajaxResult)

edited Apr 05 '16 at 09:49

answered Apr 05 '16 at 08:22

Rajshekar Reddy

18,647
3
40
59

I think the handler is not on button click but on select change (not sure though) – Apolo Apr 05 '16 at 08:25
I think you are right to keep a reference (didn't think of this), but the functions called with it are wrong IMO (see my answer) – Apolo Apr 05 '16 at 08:28
@Apolo, its on change of select dropdown. – Ramesh Apr 05 '16 at 09:09
@Reddy, How can i change the button to "on select change"? – Ramesh Apr 05 '16 at 09:15
@Ramesh I updated my answer. Apolo pointed out that the ajax call happened in the dropdown change event. – Rajshekar Reddy Apr 05 '16 at 09:50
1

@Reddy, Great Help. Your suggestion Worked for me. Have declared ` var button = $(this);` and assigned the value like this `button.parent().parent().siblings().children(".description").val(ajaxResult);` – Ramesh Apr 05 '16 at 10:09

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

For my answer I guess that $(this) is the select.

You have something wrong here, look :

<!-- PARENT 3 -->
<div class="parentcontainer">
    <!-- PARENT 2 -->
    <div class="ui-block-a">
        <div class="psFieldLabel">Attendee</div>
        <!-- PARENT 1 -->
        <div class="psFieldInput">
            <select name="namelist" id="nameListId" maxlength="50" class="required attendeeName">
                <option></option>
                <option value="Hari">Hari</option>
                <option value="Ramesh">Ramesh</option>
                <option value="Kumar">Kumar</option> 
            </select>
        </div>                                 
    </div>
    <div class="ui-block-b">
        <div class="psFieldLabel">Description</div>
        <input type="text" name="descriptionName" id="descriptionId" value="0" class="psName description" />
    </div>
</div>

You are calling parent() only twice :

$(this).parent().parent().siblings(".description").val(ajaxResult);

try to call parent() once more.

You should also replace .siblings why .find because the description field is not a direct sibling of parentContainer

EDIT

As mentionned by Reddy, if you are coding in the ajax callback, you should use a reference of the select instead of using $(this) because in the callback, this refers to the callback function :

var select = $(this);
$.ajax({
     // some arguments
     // ....
     success: function(ajaxResult){
        select.parent().parent().parent().find(".description").val(ajaxResult);
     }
   });

have tried this: `$(this).parent().parent().parent().find(".description").val(ajaxResult);` but no luck. — Ramesh, Apr 05 '16 at 09:13

Set value to parent's parent's child's sibling after Ajax Call

2 Answers2

EDIT