i try to load with ajax inside of next subcontainer if i click on load Class befor. But it do not work. Why? If click on the load-class next subcontainer change the color but i do not get new contant.
My HTML-Code.
<body>
<div id="wrapper">
<div class="load" data-id="1"></div>
<div class="subcontainer"></div>
<div class="load" data-id="2"></div>
<div class="subcontainer"></div>
<div class="load" data-id="3"></div>
<div class="subcontainer"></div>
</div>
</body>
My script
<script>
$(document).on("click", "#wrapper > .load", function () {
var abc = $(this).next(".subcontainer").css({"background-color", "red"});
// It works.
var name_id = $(this).data("id").val();
$.ajax({
url: "folder/get-data.php",
method: "POST",
data: {id: name_id},
dataType: "html",
cache: false,
success: function (result) {
$("#wrapper > .subcontainer").html(result); // Do not work.
},
});
});
</script>
You are replacing ajax response content in all subcontainers instead of the next subcontainer
<script>
$(document).on("click", "#wrapper > .load", function() {
var that = this;
var abc = $(this).next(".subcontainer").css({
"background-color",
"red"
}); // It works.
var name_id = $(this).data("id").val();
$.ajax({
url: "folder/get-data.php",
method: "POST",
data: {
id: name_id
},
dataType: "html",
cache: false,
success: function(result) {
$(that).next(".subcontainer").html(result);
},
});
});
</script>
And replace this line also $(this).data("id").val()
with $(this).data("id")
You can use .nextAll() method also to get the required elements
You can use any of the following codes,
1) $(that).nextAll(".subcontainer")[0].innerHTML = result
2) $($(that).nextAll(".subcontainer")[0]).html(result)