jquery load after....any idea how to do this

my jquery

$(document).ready(function(){
    $('.categories').live('change', function() {
        var my_location = window.location.pathname.replace('admin/', '');
        $(this).parents("tr").next("tr.subcategories").load(my_location + '?route=module/cart/ajax_sub&category_id=' + $(this).val());  
    });

    $('.subcategories_select').live('change', function() {
        var my_location = window.location.pathname.replace('admin/', '');
        $(this).parents("tr").next("tr.products").load(my_location + '?route=module/cart/ajax_products&category_id=' + $(this).val());  
    });
});

my html

<tr><td>Categories</td>
<td><select class="categories" name="category_id">
    <option value="0" selected="selected">Select a Category</option>
    <?php foreach ($categories as $category) { ?>
    <option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
    <?php } ?>
  </select></td>
</tr>
<tr class="subcategories"></tr>
<tr class="products"></tr>

what i need though is three tr 's so the final product should look like this

<tr class="subcategories"></tr>
<tr class="products">stuff from ajax</tr>
<tr class="business_products">stuff from ajax</tr>
<tr class="premium_products">stuff from ajax</tr>

here is my php

public function ajax_products(){
    $this->load->model('catalog/product');
    $products = $this->model_catalog_product->getProductsByCategoryId($_GET['category_id']);
    $class = 'odd';
    $data = '<td><div class="scrollbox smallscroll">';
    foreach ($products as $product) {
        $class = ($class == 'even' ? 'odd' : 'even');
        $data .=  '<div class="' .  $class . '">';
        $data .= '<input type="checkbox" name="standard[]" value="' . $product['product_id'] . '" />';
        $data .=  $product['name'];
        $data .= '</div>';
    }
    $data .=     '</div></td></tr>';
    $data .=  '<tr class="business_products">';
    $class = 'odd';
    $data .= "<td>Business</td>";
    $data .= '<td><div class="scrollbox smallscroll">';
    foreach ($products as $product) {
        $class = ($class == 'even' ? 'odd' : 'even');
        $data .=  '<div class="' .  $class . '">';
        $data .= '<input type="checkbox" name="business[]" value="' . $product['product_id'] . '" />';
        $data .=  $product['name'];
        $data .= '</div>';
    }
    $data .=     '</div></td></tr>';
    $data .=  '<tr class="premium_products">';
    $class = 'odd';
    $data .= "<td>Premium</td>";
    $da开发者_运维问答ta .= '<td><div class="scrollbox smallscroll">';
    foreach ($products as $product) {
        $class = ($class == 'even' ? 'odd' : 'even');
        $data .=  '<div class="' .  $class . '">';
        $data .= '<input type="checkbox" name="premium[]" value="' . $product['product_id'] . '" />';
        $data .=  $product['name'];
        $data .= '</div>';
    }
    $data .=     '</div></td>';
    print $data;
}

The problem is its not adding another two trs...all the data is doing in one tr ...ultimately i need to load after all the data coming form the ajax call after .subcategories

---

I have a sneaking suspicion that it has to do with the invalid HTML you're passing from PHP. I mean, yes it's valid HTML, but since you are "tricking" it by putting </tr> tags to close the <tr> tag that's already there, the snippet you get back from your PHP looks like it's not legitimate. In the .load() docs it says this:

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

It's possible that it also ignores elements that are malformed (ie. no closing/opening tags). Try viewing the DOM after the content has been loaded to see what the HTML structure is.

My recommendation, regardless of this problem, is rather to pass the data through a JSON object and then format the HTML through your JavaScript. This will cut down on the amount of data sent from the server and means that you would only load the HTML structure once. If you want, I can create an example for you.

Edit
Ok, first a warning. I didn't test any of this so there may be bugs. Just post comments and I'll help you out.

Here goes:

HTML

<tr><td>Categories</td>
<td><select class="categories" name="category_id">
    <option value="0" selected="selected">Select a Category</option>
    <?php foreach ($categories as $category) { ?>
    <option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
    <?php } ?>
  </select></td>
</tr>
<tr class="subcategories"></tr>
<tr class="products"></tr>
<tr class="business_products"></tr>
<tr class="premium_products"></tr>

PHP

public function ajax_products(){
    $this->load->model('catalog/product');
    $products = $this->model_catalog_product->getProductsByCategoryId($_GET['category_id']);
    //Since all your products are just duplicated for each input, we
    // really only need 1 array
    $products = array();
    foreach ($products as $product) {
        //Add the product info to the array
        $data[] = array("id" => $product['product_id'], "name" => $product['name']);
    }
    //This outputs the data in the JSON format
    echo json_encode($data);
    //A LOT shorter right? :)
}

JavaScript

$(document).ready(function(){
    $('.categories').live('change', function() {
        var my_location = window.location.pathname.replace('admin/', '');
        $(this).parents("tr").next("tr.subcategories").load(my_location + '?route=module/cart/ajax_sub&category_id=' + $(this).val());  
    });

    $('.subcategories_select').live('change', function() {
        var my_location = window.location.pathname.replace('admin/', '');
        var $this = $(this); //Let's cache this
        $.ajax("url":my_location,
               "data": { "route":"module/cart/ajax_products","category_id":$this.val() }
               "success": function(data) {
                    if (data.length > 0) { //Ensure we have items
                        var $prnttr = $this.closest("tr"); //Note I used .closest() because .parents() returns ALL parent TRs
                        //Get the next rows and empties them in case they have data
                        //Note: We remove them from the DOM to speed up adding to it (it's slow working directly with the DOM)
                        var $prodrow = $prnttr.next("tr.products").empty().remove();
                        var $busrow  = $prnttr.next("tr.business_products").empty().remove();
                        var $premrow = $prnttr.next("tr.premium_products").empty().remove();
                        var cls = "odd";
                        for (int i = 0, len = data.length; i < len; i++) {
                            cls = (cls == "even" ? "odd" : "even");
                            $prodrow.append( //Append the div to production row
                                $("<div>", {"class":cls}) //Create the div dynamically and add the HTML. NOTE: The HTML HAS to be valid.
                                    .html("<input type=\"checkbox\" name=\"standard[]\" value=\"" + data[i].id + "\" /> " + data[i].name)
                            );
                            $busrow.append( //Append the div to business row
                                $("<div>", {"class":cls}) //Create the div dynamically and add the HTML. NOTE: The HTML HAS to be valid.
                                    .html("<input type=\"checkbox\" name=\"business[]\" value=\"" + data[i].id + "\" /> " + data[i].name)
                            );
                            $premrow.append( //Append the div to premium row
                                $("<div>", {"class":cls}) //Create the div dynamically and add the HTML. NOTE: The HTML HAS to be valid.
                                    .html("<input type=\"checkbox\" name=\"premium[]\" value=\"" + data[i].id + "\" /> " + data[i].name)
                            );
                        }
                        //All html has been created, add the elements back into the domain
                        $prnttr.after($prodrow, [$busrow,$premrow]); //Adds all three new elements after the parent row
                    } else {
                        //Do warning/info stuff here
                    }
               }
        });
        //$(this).parents("tr").next("tr.products").load(my_location + '?route=&category_id=' + );  
    });
});

---

I think the problem is:

$(this).parents("tr").next("tr.products")

That selects the next sibling after tr.products but does a sibling after tr.products exist? It doesn´t show in your html.

If you want to insert new rows after the current one, perhaps you need something like .after()