У меня есть подозрение, что это связано с неверным HTML, который вы передаете из PHP.Я имею в виду, что да, это действительный HTML, но, поскольку вы «обманываете» его, помещая теги </tr>, чтобы закрыть уже существующий тег <tr>, фрагмент, который вы получаете из своего PHP, выглядит как недопустимый.В .load () документах говорится следующее:
jQuery использует свойство браузера .innerHTML для анализа полученного документа и вставки его в текущий документ.Во время этого процесса браузеры часто фильтруют элементы из документа, такие как, или элементы.В результате элементы, извлекаемые с помощью .load (), могут не совпадать, как если бы документ был извлечен непосредственно браузером.
Возможно, он также игнорирует элементы, которые были повреждены (т.е.нет закрывающих / открывающих тегов).Попробуйте просмотреть DOM после загрузки содержимого, чтобы увидеть, какова структура HTML.
Моя рекомендация, независимо от этой проблемы, состоит в том, чтобы скорее передавать данные через объект JSON, а затем отформатировать HTML-код с помощью JavaScript,Это сократит объем данных, отправляемых с сервера, и означает, что вы будете загружать структуру 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=' + );
});
});