After dynamically bind the content into div a element using JQuery ajax method, the event is not firing.
In this example I will show you how to resolve this problem. Here I used to bind content dynamically with collapsible panel. I used the icon for expanding collapse of that you should write code and keep it in a jQuery function called expandcollapse. Initially on page load I called the expandcollapse function on document.ready. It works fine on pageLoad. But after the dynamic content bind on div element, the jQuery event is not working. So that I added the following document.ajaxstop and call the jQuery function expandcollapse, finally it works fine.
<style type="text/css">
.custom-plus {
background-image: url(Content/themes/base/images/openclose.png);
background-repeat: no-repeat;
padding-top: 6px;
padding-left: 29px;
background-position: 0px -58px;
}
.custom-minus {
background-image: url(Content/themes/base/images/openclose.png);
background-repeat: no-repeat;
padding-top: 6px;
padding-left: 29px;
background-position: 0px 0px;
}
</style>
<script type="text/javascript">
$(document).ajaxStop(function () {
expandcollapse();
});
function expandcollapse () {
$('.collapse').on('shown.bs.collapse', function (e) {
$(this).parent().find(".custom-plus").removeClass("custom-plus").addClass("custom-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".custom-minus").removeClass("custom-minus").addClass("custom-plus");
});
}
function GetData() {
$.ajax({
type: 'GET',
url: '/Home/GetData',
data: {},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function (response) {
if (response != null) { var html = response.view; $(html).hide().appendTo("#pubcontent").fadeIn(1000); } }, error: function () { alert("Errorwhile retrieving data!"); }
});
}
$(document).ready(function () {
expandcollapse();
});
</script>
<a data-toggle="collapse" href="#collapse-@Model.SubmitId" class="button-show" title="play"> <span class="custom-plus"></span></a>
<div id="collapse-@Model.SubmitId" class="panel-collapse collapse" > @Html.Raw(Model.Description) </div>
Output:
Post your comments / questions
Recent Article
- Import "django.shortcuts" could not be resolved from source in Django Project
- How to add two numbers in Android Studio? | Source Code
- FindViewByID returns null in android studio -SOLVED
- Saving changes is not permitted in SQL SERVER - [SOLVED]
- Restore of database failed. File cannot be restored over the existing. -[SOLVED]
- One or more projects in the solution were not loaded correctly in Visual Studio 2019 | FIXED
- How to find Laptop's Battery Health?
- SOLVED-Related Field got invalid lookup: icontains error in Django
Related Article