Bind partial view in MVC View using jQuery ajax call
Question
I have a View as shown below
**<div id = 123 class ="Country">**
<div class = "content">
**<need to load partial view here>**
</div>
**</div>**
**<div id = 234 class ="Country">**
<div class = "content">
**<need to load partial view here>**
</div>
**</div>**
...
...More div's here
...
so on clicking the Country div, i need to load its inner div "content". My jQuery ajax call is like below
$(".country").on('click', function () {
$.ajax({
url: '@(Url.Action("FilesByCountry", "RelatedFiles"))', //Cont & ActionResult
type: "GET",
data: $(this).attr('id'), //getting the click id
contentType: "application/json; charset=utf-8",
success: successFunc,
error: errorFunc
});
function successFunc(data) {
**$(this).attr('id').children($('#content', data).html())**
}
function errorFunc(xhr, errorType, exception) {
alert(xhr.status + ": " + exception);
}
});
});
So the controller is hitting fine and it went through the PartialView in debug mode. But the partial view is not binding in Main View. Any thoughts on this?
2 answers
solution1
0 2020-05-12 13:44:13
I think it is the way you are stuffing the content:
$(this).find('.content').html(data);
I think #content would be for the ID selector and .content for the class selector.
Another try is to just stuff a known div -->
$('#234').find('.content').html(data);
Or
$('#234').html(data);
Then inspect the element using dev tools F12 and see what was put inside.
Also, make sure you are injecting an html fragment. You can check the data for <head><body> tags, I am sure they should not be there for what you are doing.
solution2
0 ACCPTED 2020-05-18 14:44:08
I found the answer to this. Actually $(this) is not working inside my successFunc and was returning null always. So i modified my Javascript code to something as below.
$(".country").on('click', function () {
var _this = $(this);
$.ajax({
url: '@(Url.Action("FilesByCountry", "RelatedFiles"))', //Cont & ActionResult
type: "GET",
data: $(this).attr('id'), //getting the click id
contentType: "application/json; charset=utf-8",
success: successFunc,
error: errorFunc
});
function successFunc(data) {
_this.find('.content').html(data);
}
function errorFunc(xhr, errorType, exception) {
alert(xhr.status + ": " + exception);
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.