bootstrap dropdown not working with ajax

Question

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

bootstrap 3.3.7 locally
jquery

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 }}&nbsp;{{ notification.content }}</a></div>
                </li>
          {% endfor %}
      </ul>
    </li>
    {% endif %}

the weird tags are Django stuff.

Any js errors? Did you inspect your DOM? You really need to debug it step by step — Chrysovalantis Koutsoumpos, Oct 19 '17 at 18:16
I think I found the problem now that I double checked your code! Check my answer — Chrysovalantis Koutsoumpos, Oct 19 '17 at 18:35

Chrysovalantis Koutsoumpos · Accepted Answer · 2017-10-19T19:02:34.420

1

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.

edited Oct 19 '17 at 19:02

answered Oct 19 '17 at 18:31

Chrysovalantis Koutsoumpos

371
3
15

thank you, i removed the onclick but still not working – mohammedgqudah Oct 19 '17 at 18:35
actually i added the onclick because i thought it will solve the problem : | i hate copy-paste people code, so what is the problem – mohammedgqudah Oct 19 '17 at 18:38
Yes exactly the onclick was not the only problem. If you remove the jQuery onClick it is going to work right? Check this https://stackoverflow.com/questions/35034394/data-toggle-and-onclick-doesnt-work-together-and-im-too-new-to-apply-epascare – Chrysovalantis Koutsoumpos Oct 19 '17 at 18:42
i am so soryy for asking a lot, but what to do! – mohammedgqudah Oct 19 '17 at 18:45
try to hack it by removing `data-toogle="dropdown"` and add `$($(this).data("target")).modal("show");` instead of `return false` in your ajax code. – Chrysovalantis Koutsoumpos Oct 19 '17 at 18:57
Check your console for possible errors and try to fix them if exist – Chrysovalantis Koutsoumpos Oct 19 '17 at 18:58
it worked thank you so much please update your question so i can upvote it – mohammedgqudah Oct 19 '17 at 19:00
Glad that I helped you! Have fun! – Chrysovalantis Koutsoumpos Oct 19 '17 at 19:03

bootstrap dropdown not working with ajax

1 Answers1