So I am creating my blog with Django and I am developing the notification system. I want when the user click the drop to mark all notifications as seen its working and every thing is working fine but when I add the Ajax the dropdown stop working but the Ajax works fine I tried changing the script position in HTML but nothing.
Using
the ajax :
<script>
$(document).ready(function() {
$("#n_d").click(function(event){
$.ajax({
type:"POST",
url:"{% url 'seen' %}",
success: function(){
document.getElementById("mcount").innerHTML = 0
}
});
return false;
});
});
</script>
the dropdown (it's inside a navbar)
{% if user.is_authenticated %}
<li class="dropdown">
{% notifications request as notifications %}
<a href="#" class="dropdown-toggle" id="n_d" onclick="return x=1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i aria-hidden="true" class="fa fa-inbox "> <span class="label label-info" id="mcount">{% noticount request %}</span></i></a>
<ul class="dropdown-menu">
{% load blog_tags %}
{% for notification in notifications %}
<li>
<div class="col-md-3 col-sm-3 col-xs-3"><div class="notify-img"><img src="https://www.awn.com/sites/default/files/styles/userthumbnail_tiny/public/avatar92.jpg?itok=i7013HnC" alt=""></div></div>
<div class="col-md-9 col-sm-9 col-xs-9 pd-l0"><a href="{% url 'detail' notification.post_pk %}">{{ notification.FromUser }} {{ notification.content }}</a></div>
</li>
{% endfor %}
</ul>
</li>
{% endif %}
the weird tags are Django stuff.
It seems that you have an error in your code! I can understand that you copy-pasted some stuff because it is not very consistent.
You are having this onclick="return x=1" data-toggle="dropdown"
and you are listening for another onClick
event in the jQuery script above.
By having this you are overwriting the initial object onclick
and probably conflict with the toggle="dropdown"
which triggers the menu to open.
You should try a different implementation there.
Try to hack it by removing data-toogle="dropdown"
and add $($(this).data("target")).modal("show");
instead of return false
in your ajax code.
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.