parse html ajax response with jquery

Question

I have a function wich is called in change in a listbox, the function have an ajax request to retrive options for other listboxes, I tried to parse html response from ajax jquery, but it doesn't work, only the response 'data' is displayed, i would like to find element in the html response, this is my code

 function loadOptionsValues(id)   {

         $.ajax(
                {
            type: 'POST',
            url: baseDir + 'ajax.php',
            data: 'val_select=' + $('#'+id).text()+'&id_product='+id_product,
            dataType: "html",

            success: function(data){


               $( "select[id!='"+id+"']" ).each(function(){
               $(this).html($(html).find('#'+$(this).attr('id')).text());
               alert('text select'+$(html).find('#'+$(this).attr('id')).html());
                     });

                 }

           });
    }

The response looks like this

<html>                                                   

<select id="group_1">
<option id="Ecru">Ecru</option>
<option id="Gris">Gris</option>
<option id="Gris">Gris</option>
<option id="Gris">Gris</option>
<option id="Gris">Gris</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Taupe">Taupe</option>

 </select>

 <select id="group_3">
 <option id="Cuir">Cuir</option>
 <option id="Daim">Daim</option>
<option id="Daim">Daim</option>
<option id="Daim">Daim</option>
<option id="Daim">Daim</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>

</select>

<select id="group_2">
<option id="40">40</option>
<option id="37">37</option>
<option id="40">40</option>
<option id="39">39</option>
<option id="38">38</option>
<option id="37">37</option>
<option id="41">41</option>
<option id="36">36</option>
<option id="40">40</option>
<option id="35">35</option>
<option id="39">39</option>
<option id="38">38</option>
<option id="40">40</option>
<option id="36">36</option>
<option id="39">39</option>
<option id="38">38</option>
<option id="41">41</option>
<option id="37">37</option>
<option id="38">38</option>
<option id="37">37</option>
<option id="41">41</option>
<option id="36">36</option>
<option id="40">40</option>
<option id="35">35</option>
<option id="39">39</option>
<option id="41">41</option>

</select>
</html>

tymeJV · Accepted Answer · 2014-06-17 17:47:18Z

1

this within the success function no longer refers to the original elements. You should set a context variable:

function loadOptionsValues(id)   {
     var that = $(this);
     $.ajax(
            {
        type: 'POST',
        url: baseDir + 'ajax.php',
        data: 'val_select=' + $('#'+id).text()+'&id_product='+id_product,
        dataType: "html",

        success: function(data){


           $( "select[id!='"+id+"']" ).each(function(){
               that.html($(html).find('#'+that.id).text());
               alert('text select'+$(html).find('#'+that.id).html());
           });

        }

   });
}

answered Jun 17, 2014 at 17:47

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tymeJV Over a year ago

@tarekfellah -- I posted in the exmaple above that = $(this)

Collectives™ on Stack Overflow

parse html ajax response with jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related