Onclick does not work using Bootstrap

I have worked with Django and Bootstrap, and I have a problem with onclick attribute. When I click on a button, it does not show me nothing. Here are the HTML:

{% extends 'base_profile.html' %}

{% block profile %}

<br />
    <div id="content">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
    <div class="fb-profile">
        <img id='background_picture' align="left" class="fb-image-lg" src="https://s-media-cache-ak0.pinimg.com/originals/ad/38/bd/ad38bd348826054d3fd5e940950b1124.jpg" alt="Profile image example"/>
        {% load staticfiles %}
        <img id='profile_picture' align="left" class="fb-image-profile thumbnail" src="{% static 'media/{{path}}' %}" alt="media/{{path}}"/> 
        <!-- 200 x 200 -->
        <div class="fb-profile-text">
            <a href="/profile" id="full_name">{{ user.first_name }} {{ user.last_name }}</a>
            <div id="wrap">
            <p>
                <ul class="nav nav-tabs">
                    <li role="presentation" class="active"><a href="/profile">My profile</a></li>
                    <li role="presentation"><a href="/fallowers">Fallowers</a></li>
                    <li role="presentation"><a href="/fallowing">Fallowing</a></li>
                    <li role="presentation"><a href="/logout">Logout</a></li>
                    <li role="presentation">
                    <button id="compose" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Compose Twitt
                    </button> </li>
                </ul>
            </p>
            <p>{{ user_profile.moto }}</p>
            {% for twitt in all_twitters reversed %}
            <hr>
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#">
                    {% load staticfiles %}
                        <img class="media-object" src="{% static 'twittapp/images/logo_profile.png' %}" alt="Some picture">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading"><a href="">{{ user.first_name }} {{ user.last_name }}</a></h4>
                        {{ twitt.content }}
                </div>
            </div>
            <hr>

            <a href="javascript:void(0)" onclick="deleteTwitt();" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span> Delete</a>

            <a href="#" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-comment"></span> Comment</a>
            <a href="#" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-eye-open"></span> See the comments</a>
            {% endfor %}
            </div>
        </div>
    </div>
</div> 
    </div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Compose Twitt</h4>
      </div>

      <form action="/profile/compose/" method="post">{% csrf_token %}
        <div class="modal-body">
            <textarea style="resize:none" class="form-control" rows="3" cols="20" name="twitt_content" id="textarea"></textarea>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button id="save_twitt" type="submit" class="btn btn-primary">Twitt</button>
        </div>
        <p id="left_chars">sdks</p>
      </form>
    </div>
  </div>
</div>
{% endblock profile %}

Here is a function located in the external js file:

function deleteTwitt(){
    $.post('/delete', {twitt_id: '{{ twitt.id }}'});
}; 

Answers


Please put this function outside.

<script>
function deleteTwitt(){
  $.post('/delete', {twitt_id: '{{ twitt.id }}'});
};
</script>

I think you were write the function inside something like this...

 $('.class').click(function() {
 });

First make sure you have embedded external js file using script tag in current page and if it is not then please embed it and check. If file is embedded then just change following in your HTML code

<a href="#" onclick="deleteTwitt();" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span> Delete</a>

Here I just removed "javascript:void(0)" from href of anchor tag. Still if it's does not work then let me know.


Need Your Help

I am looking for a key-value datastore which has following (preferable) properties

nosql datastore data-storage

I am trying to build a distributed task queue, and I am wondering if there is any data store, which has some or all of the following properties. I am looking to have a completely decentralized,

d3 js tree layout multiple parents

d3.js tree force-layout directed-acyclic-graphs

I am trying to get a tree layout for a data set in which i have nodes which can have multiple parents. The links that are created in such instances have extremely large path values. is there anyway...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.