jQuery的后负荷....任何想法如何做到这一点

Question

我的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()); 
    }); 
}); 

我的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的所以最终产品应该像这

<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> 

这里是我的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>"; 
    $data .= '<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; 
} 

的问题是它不添加另外两个TRS ......所有数据都在一个TR做......最终我需要未来形式.subcategories后Ajax调用的所有数据后加载

Answer 1

我有一个偷渡怀疑它与你从PHP传递了无效的HTML做。我的意思是，它是有效的HTML，但由于您通过将</tr>标记关闭已存在的<tr>标记来“欺骗”它，因此您从PHP返回的代码段看起来不合法。在.load() docs它这样说：

jQuery使用浏览器的.innerHTML 属性来解析检索 文档，并将其插入到 当前文档。在此过程中， 浏览器通常会过滤来自 的文档，如 或元素。因此，由.load（）检索的 元素可能不是 与由 浏览器直接检索到文档 完全相同。

它也可能会忽略格式不正确的元素（即没有关闭/打开标签）。在加载内容后，请尝试查看DOM以查看HTML结构。

我的建议，不管这个问题，而是通过一个JSON对象传递数据，然后通过JavaScript格式化HTML。这将减少从服务器发送的数据量，意味着您只会加载一次HTML结构。如果你愿意，我可以为你创建一个例子。

编辑
好的，首先警告。我没有测试任何这个，所以可能有错误。只是发表评论，我会帮你。

这里所说：

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=' +); 
    }); 
}); 

Answer 2

我觉得问题是：

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

这tr.products后选择下一个兄弟但tr.products后兄弟姐妹存在吗？它不会显示在您的HTML。

如果你想在当前操作后插入新行，也许你需要像.after()