How to use closest to set value of textbox from dropdownlist in dynamically created rows

Question

When user selects channel name from dropdown list , i want to set its channel type to the text box in dynamically created row. I am creating multiple rows on addRow event. It is working fine

This is html code

 <table id="dataTable"  border="1" class="table table-striped table-bordered" >


            <tr>
                    <td><INPUT type="checkbox" name="chk[]"  data-parsley-errors-container="#checkbox-errors" /></td>
                    <td>
                            <SELECT name="channel_name[]" onclick ="get_type(this)"; class='channelname'>
                                    <option value="">Select...</option>
                                  <?php foreach($channel_list as $row) {
                                            $channelid = $row['channelid'];
                                            $channelname = $row['channelname'];?>
                                    <OPTION value='<?php echo $channelid ?>'><?php echo $channelname?></OPTION>

                            <?php } ?>
                            </SELECT>
                    </td>
                    <td><INPUT type="text" name="type[]" class="channeltype"/></td>
                     <td><INPUT type="text" name="partner_share[]"/></td>
            </tr>

    </table>

Javascript Code :

function get_type()
{
    $(".channelname").live("change", function() {

            var channel_id = $(this).find("option:selected").attr("value");
            $.ajax({
                    type: "POST",
                    url: '<?php echo base_url(); ?>index.php/partner/get_channel_type',
                    data: 'channelid='+channel_id,
                    async:   false
                     }).done(function( data1 ) {

                    if(data1){
                            alert(data1);
                            //$(this).closest('tr').children('td.type').val(data1);
                            //$(this).closest('tr').find('.type').val(data1);
                            $(this).closest("tr").find('input[name="channeltype[]"]').val(data1);
                            //$(this).closest("tr").find('input[name="usage_unit[]"]').val(ui.item.usage_unit);


                    }else{
                            alert("Channel type is not defined");

                    }


            });
    });
}

Zakaria Acharki · Accepted Answer · 2016-07-18T09:10:33.550

1

There no input with name channeltype[] the line :

$(this).closest("tr").find('input[name="channeltype[]"]').val(data1);

Should be :

$(this).closest("tr").find('input[name="type[]"]').val(data1);

Because the channel type input name is type[] as shown in :

<td><INPUT type="text" name="type[]" class="channeltype"/></td>

You have to save the jquery instance $(this) because it will be different in success callback :

 ...
 var channel_id = $(this).find("option:selected").attr("value");
 var _this = $(this); //Save current object

 $.ajax({
 ...

Then use it inside your callback :

...
_this.closest("tr").find('input[name="type[]"]').val(data1);
...

Hope this helps.

edited Jul 18 '16 at 09:10

answered Jul 18 '16 at 09:04

Zakaria Acharki

66,747
15
75
101

hey Zakaria Acharki thanks for the help . It is working . but still i did not get "You have to save the jquery instance $(this) " this line . Can you please provide me reference to understand this. Thank you again :) – Arti Jul 18 '16 at 09:29
You're welcome, glad i could helps... the object `$(this)` inside success callback `done()` will change so it will not contain the current changed object of `.channelname` no more but will contain another object that refers to the `jqXHR` object of the Ajax call. take a look to [How to access the correct `this` / context inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback). – Zakaria Acharki Jul 18 '16 at 09:38
on channel selection get_channeltype method is called , and its repetitively ocurrs, causing ajax to respond more time for sencond and further channel selections . Can you help? – Arti Aug 11 '16 at 11:00

score 0 · Answer 2 · answered Jul 18 '16 at 09:04

Cache channel =${this} .use channel in ajax response

  function get_type()
    {
        $(".channelname").live("change", function() {
                var channel = $(this);
                var channel_id = $(this).find("option:selected").attr("value");
                $.ajax({
                        type: "POST",
                        url: '<?php echo base_url(); ?>index.php/partner/get_channel_type',
                        data: 'channelid='+channel_id,
                        async:   false
                         }).done(function( data1 ) {

                        if(data1){
                                alert(data1);
                                //$(this).closest('tr').children('td.type').val(data1);
                                //$(this).closest('tr').find('.type').val(data1);
                                channel.closest("tr").find('input[name="channeltype[]"]').val(data1);
                                //$(this).closest("tr").find('input[name="usage_unit[]"]').val(ui.item.usage_unit);


                        }else{
                                alert("Channel type is not defined");

                        }


                });
        });
    }

How to use closest to set value of textbox from dropdownlist in dynamically created rows

2 Answers2