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