Develop Reference

How can I open a Bootstrap (5.2) modal with a specific tab selected, from a button?

I'm trying to open a Bootstrap (5.2) modal with a specific tab selected. The tab should be determined by which button is clicked on the home page ("Login" or "Sign Up").
I tried previous solutions, but they mostly use older versions of Bootstrap.
I'm a complete noob to JavaScript, so if your solution includes it please explain like I'm five.
Here's my HTML:
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }}
{{ log_in_form.email(class="form-control") }}
<br>
{{ log_in_form.password.label(class="form-label")}}
{{ log_in_form.password(class="form-control") }}
<br>
{{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }}
{{ sign_up_form.email(class="form-control") }}
<br>
{{ sign_up_form.password.label(class="form-label")}}
{{ sign_up_form.password(class="form-control") }}
<br>
{{ sign_up_form.confirm_password.label(class="form-label")}}
{{ sign_up_form.confirm_password(class="form-control") }}
<br>
{{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

You can utilize bootstrap events. I think the javascript part is short, so basically listening for event show.bs.modal of the modal (see bootstrap docs) and get the reference to the invoking button event.relatedTarget (see bootstrap docs) which had in the first place an data-tab-id="ID-OF-TAB" attribute. We take that attribute and get a reference to the tab. Finally we use the tabs method show to show the correct tab.
const myModal = document.getElementById('login-signup-modal')
myModal.addEventListener('show.bs.modal', (ev) => {
var invoker = ev.relatedTarget
var selected_tab = invoker.getAttribute("data-tab-id")
const tab_btn = document.querySelector('#' + selected_tab)
const tab = new bootstrap.Tab(tab_btn)
tab.show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" data-tab-id="pills-signup-tab" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" data-tab-id="pills-login-tab" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }} {{ log_in_form.email(class="form-control") }}
<br> {{ log_in_form.password.label(class="form-label")}} {{ log_in_form.password(class="form-control") }}
<br> {{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }} {{ sign_up_form.email(class="form-control") }}
<br> {{ sign_up_form.password.label(class="form-label")}} {{ sign_up_form.password(class="form-control") }}
<br> {{ sign_up_form.confirm_password.label(class="form-label")}} {{ sign_up_form.confirm_password(class="form-control") }}
<br> {{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Fetch selected item in page from bootstrap-modal

I'm using bootstrap modal to provide a functionality to user to select any desired item and than add the selected item to parent/current page.
I've created an example on fiddle for better and faster understanding.
In eg: there are 2 items (three li for each). When user selects certain item, the modal must close, its price (which is fetched from another page) must be displayed on the square box and a new box must be added to the left side (with current glyphicon).
I somehow understand this must be achieved using jQuery but am blank as to how should I proceed further. I'm totally new to both modals and jQuery so if any one has any idea about it?
UPDATE:
I did try my hands on it and I'm able to fetch the selected item from modal and add to the parent/current view but it doesn't work properly for the second time(second box). Here's updated fiddle. and here's the updated code:
jQuery:
var itemLayout = '<div class="square"><div class="content"><div class="table"><div class="table-cell numbers"><div class="glyphicon glyphicon-plus prices"></div></div></div></div></div>';
$(document).ready(function() {
$(".layout").append(itemLayout);
$(".square").click(function() {
$("#myModal").modal('show');
});
fetchPrice();
});
function fetchPrice() {
var users = $('.prices');
$(document).on('click', '.fetch', function() {
var stylesheet = $(this).text();
console.log(stylesheet);
$("#myModal").modal('hide');
users.removeClass('glyphicon glyphicon-plus').text(stylesheet);
$(itemLayout).insertAfter('.square');
$(".square").click(function() {
$("#myModal").modal('show');
});
});
}
HTML:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="layout"></div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Select to display</h4>
</div>
<!-- modal-header end -->
<div class="modal-body">
<ul class="list-group">
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Chinese</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Hakka Noodles </div>
<div class="pull-right">
<div class="fetch">Price1</div>
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Others</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Masala papad </div>
<div class="pull-right">
<div class="fetch">Price2</div>
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
OLD
Here's the code snippet:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<!-- Button HTML (to Trigger Modal) -->
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
<div class="glyphicon glyphicon-plus"></div>
</div>
</div>
</div>
</div>
<!-- square end -->
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Select to display</h4>
</div>
<!-- modal-header end -->
<div class="modal-body">
<ul class="list-group">
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Chinese</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Hakka Noodles </div>
<div class="pull-right">
Price
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Others</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Masala papad </div>
<div class="pull-right">
Price
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery to open modal:
$(document).ready(function() {
$(".square").click(function() {
$("#myModal").modal('show');
});
});

If you use bootsrap best way make
<div class="square" data-toggle="modal" data-target="#myModal">
for call modal, end do modal header like this
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
On this case u don't need write any jquery its will be work "from box"

Bootstrap modal fails to show image

I've been trying to get this bootstrap modal to work without any luck. Been looking at similar problem here as well but none has helped me.
My problem is that the images does not show. The window is there but no image inside it.
Anyway here's the code.
Edit: I have looked at Need to load image as modal on click in bootstrap css, I even tried the code and did not get that to work either for me. There for a new question, my bad if that was wrong. :/
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Tidningen City Malmö</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_frontpage.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_frontpage_thumbnail.png" alt="City Malmö Förstasida"></a>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_page_thumbnail.png" alt="City Malmö sida"></a>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Sveriges Radio P4</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="srp4_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="srp4_page_thumbnail.png" alt="SR P4"></a>
</div>
</div>
<script type="text/javascript">
$('.getSrc').click(function() {
var src =$(this).attr('src');
$('.showPic').attr('src', src);
});
</script>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="" class="showPic">
</div>
</div>
</div>
</div>
I have bootstrap.min.js loaded.

Add "getSrc" class to tag
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Tidningen City Malmö</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_frontpage.png" data-toggle="modal" data-target="#myModal">
<img class="img-responsive center-block getSrc" src="flag.png" alt="City Malmö Förstasida">
</a>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal">
<img class="img-responsive center-block getSrc" src="flag.png" alt="City Malmö sida"></a>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Sveriges Radio P4</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="srp4_page.png" data-toggle="modal" data-target="#myModal">
<img class="img-responsive center-block getSrc" src="flag.png" alt="SR P4"></a>
</div>
</div>
Next put both classes img-responsive showPic in same class = ""
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span>
</button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class="img-responsive showPic" src="" >
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
console.log( "ready!" );
$('.getSrc').click(function() {
console.log("hello");
var src =$(this).attr('src');
$('.showPic').attr('src', src);
});
});
</script>
Please note: You need to load jquery javascript, bootstrap css and javascript libraries
Here is a working example
https://jsfiddle.net/mkfLmLx1/

Three issues - first you are trying to get the src on an onclick of ".getSrc" - but you have not designated that class in the code. You will need to add it as below:
Second you have a typo with the "tumbnail" and third you are using "this" to get the src of the image but the image is nested within an <a> element - so the "this" will refer to the <a> and not the image within it..
<!-- Button trigger modal -->
<a class="thumbnail getSrc" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_page_thumbnail.png" alt="City Malmö sida"></a>
You need to find the image within the a element and get that src (or use a data attribute on the a like the one that already there.:
<script type="text/javascript">
$('.getSrc').click(function() {
var src =$(this).find('img').attr('src');
$('.showPic').attr('src', src);
});
</script>
if you want to use the data attribute on the a then it would be:
<a class="thumbnail getSrc" href="#" data-source="citymalmo_page_thumbnail.png" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_page_thumbnail.png" alt="City Malmö sida"></a>
<script type="text/javascript">
$('.getSrc').click(function() {
var src =$(this).attr('data-source');
$('.showPic').attr('src', src);
});
</script>

Why isn't my bootstrap Modal being destroyed on hide? How can I get Multiple remote Modals to work?

I am currently trying to produce a portfolio-style website, and decided to use Bootstrap 3. I want to use modals to display my work from a simple image gallery. I have managed to successfully produce each modal and remote link them, however I run into an issue after opening the second modal. The second modal's content is then the content shown for any subsequent modal called. I have tried using javascript to destroy the modal on each instance of hide, yet it doesn't seem to be working and I can not figure out why. Can someone please tell me what I'm doing wrong?
Gallery:
<div class="banner" id="portfolio"><h2>WORK</h2></div>
<div id="gallery" class="final-tiles-gallery effect-zoom effect-fade-out caption-top caption-bg">
<div class="ftg-items">
<div class="tile">
<a class="tile-inner" data-title="VoodooDesignCo." data-toggle="modal" href="portfolioDIR/voodooDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/voodooDesign.png">
<span class='title'>Voodoo Design Co.</span>
<span class='subtitle'>Logo Design and Branding</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Godzilla (2014) - Poster Design" data-toggle="modal" href="portfolioDIR/godzillaDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/godzillaPoster.png">
<span class='title'>Godzilla (2014)</span>
<span class='subtitle'>Poster Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Iron & Air - Title Design" data-toggle="modal" href="portfolioDIR/ironAirDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/ironAirType.png">
<span class='title'>Iron & Air</span>
<span class='subtitle'>Game Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Aquaman - Title Design" data-toggle="modal" href="portfolioDIR/aquamanDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/aquamanType.png">
<span class='title'>Aquaman</span>
<span class='subtitle'>Movie Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="AllBikes.com.au" data-toggle="modal" href="portfolioDIR/allbikesDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/allbikesWeb.png">
<span class='title'>AllBikes.com.au</span>
<span class='subtitle'>Website Design and Development</span>
</a>
</div>
</div>
</div>
Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal" aria-hidden="true"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
</div>
</div>
</div>
Remote Modal:
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">Iron & Air Title Design - Video Game Concept</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 text-center">
<img src="images/work/ironAirType.png" alt="Iron & Air: Racing Video Game" class="details img-responsive img-center">
<p>Title Design/Typeface Exploration</p>
</div>
<div class="col-sm-6">
<h4>Project Info:</h4>
<p>his project required the typeface design or title design for a game, movie, T.V. show, etc. This design is based on a fictional racing video game, called 'Iron & Air'</p>
<hr>
<p>blah blah blah blah</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
ModalReset JavaScript:
$("#myModal").on('hidden.bs.modal', function () {
$("#myModal").removeClass('fade').modal('hide');
$(this).data('bs.modal', null);
});

I did something similar a while back...
I used one modal and pulled in the content from an external file.
each modal would load new content into the same modal with something like this
$("#info").click(function(){
var url = HOST_NAME+"info/modal-data";
$( "#modal-body" ).load(url, function() {
$( "#modal-body" ).show("slow");
});
loadModal();
});
and open the modal with this
function loadModal() {
$( "#modal-body .page-wrapper" ).remove();
$( "#modal-body" ).hide();
$('#edit').modal();
}
Modal
<div class="modal fade" id="edit" 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-hidden="true">×</button>
</div>
<div id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><?=__('modal_close')?></button>
</div>
</div>
</div>
</div>

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">
{{ user.first_name }} {{ user.last_name }}
<div id="wrap">
<p>
<ul class="nav nav-tabs">
<li role="presentation" class="active">My profile</li>
<li role="presentation">Fallowers</li>
<li role="presentation">Fallowing</li>
<li role="presentation">Logout</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">{{ user.first_name }} {{ user.last_name }}</h4>
{{ twitt.content }}
</div>
</div>
<hr>
<span class="glyphicon glyphicon-trash"></span> Delete
<span class="glyphicon glyphicon-comment"></span> Comment
<span class="glyphicon glyphicon-eye-open"></span> See the comments
{% 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">×</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 }}'});
};

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
<span class="glyphicon glyphicon-trash"></span> Delete
Here I just removed "javascript:void(0)" from href of anchor tag. Still if it's does not work then let me know.