Question

I’ve created a option list with radio buttons and it looks like this:

<div class="option_list" style="width:150px; display:none; margin-top:0px;">
    <form id="formSales">
        <ul>
             <li><input type="radio" value="2012" name="YEAR" /></li>
             <li><input type="radio" value="2011" name="YEAR" /></li>
             <li><input type="radio" value="2010" name="YEAR" /></li>
             <li><input type="radio" value="2009" name="YEAR" /></li>    
        </ul>
        <input type="hidden" value="1" name="SALES" />
   </form>
</div>
<div class="table_content_results">
   <div class="results"></div>
</div>

With jquery I post the form and I want to get that result in the div with the class results
underneath the div with class option_list

$(".option_list ul li").click(function() {
    $.ajax({
        type: "POST",
        url: "data.php",
        data: $(this).parent('form').serialize(),
        complete: function(data) {

            $(this).siblings('.results').html(data.responseText);
        }
    });
    $(this).parent(".option_list").slideToggle(200);

    var value = $('input[name="YEAR"]:checked').val();
    $("#yearValue").text(value);
});​

I use the class in jQuery because i want to duplicate the same option_list for another form on the same page.

The problem is to get the results of data.php in the div with class results.

I hope somebody has an answer for me.

Thanks in advance!

Answer 1

Change

$(this).siblings('.results').html(data.responseText);

to

$(this).parents('div').next().children('.results').html(data.responseText);

$(this) is a li so you need to find the parent div before finding the next child with the class results

Cut down version – but working example -> http://jsfiddle.net/bFHJc/

Updated

Following discussions in chat it seems the markup in the question was incorrect .. here is the full markup :

<div class="table_settings"> 
   <div class="stats_options" style="width:130px;"> 
      <div style="float:left">Boekjaar: <span id="getYearPurchase">2012</span></div> 
      <div style="float:right; margin-top:11px;"></div> 
      <div class="clear"></div> 
   </div> 
   <div class="option_list" style="width:150px; margin-top:0px;"> 
      <form id="formSales"> 
         <ul> 
            <li>one</li>
            <li>two</li>
         </ul> 
         <input type="hidden" value="1" name="SALES" /> 
      </form> 
   </div> 
</div> 
<div class="table_content_results"> 
   <div class="results"></div>
</div>    ​

And this is the JavaScript ‘locator’ used to post to the results div:

$(this).parents('.table_settings').siblings('.table_content_results').children('.results').html();

Here is an example -> http://jsfiddle.net/9YWmW/3/