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
- How to create custom 404 error page in Django?
- Requested setting INSTALLED_APPS, but settings are not configured. You must either define..
- ValueError:All arrays must be of the same length - Python
- Check hostname requires server hostname - SOLVED
- How to restrict access to the page Access only for logged user in Django
- Migration admin.0001_initial is applied before its dependency admin.0001_initial on database default
- Add or change a related_name argument to the definition for 'auth.User.groups' or 'DriverUser.groups'. -Django ERROR
- Addition of two numbers in django python
Related Article