Modal Delete cannot delete first item

Modal Delete cannot delete first item - javascript

Having some issues with my flask app. I am trying to use modal to delete a row from my database. Essentially I ran a for loop for each 'image' in my database, and I have tagged a unique ID to each modal. With the modal, I am able to delete any image I want, except for the very first image, with ID of 1.
HTML CODE:
{% if images %}
{% for image in images.items %}
<div class="content-section">
<div class="media align-items-center">
<img class="w-75 rounded" src="{{ url_for('static', filename='questionbank/' + image.img) }}">
<div class="text-center media-body">
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{{ url_for('homeworks.update_questionbank',questionbank_id=image.id) }}">Update Questionbank <i class="fa-solid fa-pen-to-square"></i></a>
<button type = "button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteQB{{image.id}}">Delete Questionbank <i class="fa-solid fa-trash-can"></i></button>
<h3><span class="badge badge-pill badge-info">Qn: {{ image.id }}</span></h3>
<h3><span class="badge badge-pill badge-success">Answer: {{ image.answer }}</span></h3>
</div>
</div>
</div>
<!--Modal-->
<div class="modal fade" id="deleteQB{{image.id}}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Delete Questionbank?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form action="{{ url_for('homeworks.delete_questionbank', questionbank_id=image.id) }}" method="POST">
<input class="btn btn-danger" type="submit" value="Delete">
</form>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
Routes.py code.
#homeworks.route("/questionbank/<int:questionbank_id>/delete", methods=['GET','POST'])
#login_required
def delete_questionbank(questionbank_id):
qb = Questionbank.query.get_or_404(questionbank_id)
delete_q = Questionbank.__table__.delete().where(Questionbank.id == questionbank_id)
db.session.execute(delete_q)
db.session.commit()
flash('Your questionbank has been deleted!', 'success')
return redirect(url_for('homeworks.questionbank', grade="ALL",tags="ALL",difficulty="ALL"))

Related

Modal does not perform as expected (Action no working)

I'm having difficulties with the modal using Bootstrap 5, my Delete button should show a message confirming the action by the user, but the Modal confirmation button doesn't work.
The action I want of which is to delete a record doesn't work.
Delete button
<!-- Form -->
<form action="{{ url("delete/$hxh->id") }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i> Delete</button>
</form>
Modal and Script
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Hunter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want delete <b>{{$hxh->name_hunter}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i> Cancel</button>
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<!-- Script Modal -->
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myButton').trigger('focus')
})
</script>

It is because there is no action performing on delete button so you should make it form the delete button
<!-- Form -->
<button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i> Delete</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Hunter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want delete <b>{{$hxh->name_hunter}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i> Cancel</button>
<form action="{{ url("delete/$hxh->id") }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button type="submit" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-trash"></i> Delete</button>
</form>
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>

ajax post list update only first of posts

I have a list of content that users send, such as tweeting, and they post a text, and the following content is also displayed. input I put an ID that updates that ID in Ajax, but because the posts are below and editing is modal, only one of the forms can be edited because the input ID is fixed
Can you please help?
#foreach($consult as $item)
<div id="cards" class="card data-id-{{$item->id}}">
<div class="card-header">
<h5 class="card-title">your consult</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<div class="btn-group">
<button type="button" class="btn btn-tool " data-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
<path d="M14 12a2 2 0 11-2-2 2 2 0 012 2zM4 10a2 2 0 102 2 2 2 0 00-2-2zm16 0a2 2 0 102 2 2 2 0 00-2-2z"></path>
</svg>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu" style="">
<button data-toggle="modal" data-target="#modal-lg-{{$item->id}}" class="dropdown-item "><i class="fas fa-edit"></i> Edit</button>
<button class="dropdown-item deleteskill" data-id="{{$item->id}}" data-token="{{ csrf_token() }}" ><i class="fas fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<div class="card-body" >
<div class="post">
<div class="user-block all-posts-body">
#if(Auth::user()->photo)
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/photo/avatar/{{Auth::user()->photo}}">
#else
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/img/avatar.png" >
#endif
<span class="username">
{{Auth::user()->name}}{{Auth::user()->family}}
</span>
<span class="description">Shared publicly - {{ \Carbon\Carbon::parse($item->created_at)->diffForhumans()}}</span>
<p>
{{$item->description}}
</p>
</div>
</div>
</div>
</div>
#endforeach
my modal
#foreach($consult as $item)
<div class="modal fade" id="modal-lg-{{$item->id}}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">update your consult</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form data-id="{{$item->id}}" method="post" action="{{ route("Consult.update", $item->id) }}" enctype="multipart/form-data">
#csrf
#method('PUT')
<div class="modal-body">
<textarea id="description" name="description" class="form-control form-control-sm" type="text" placeholder="What do you want to talk about?" >{{$item->description}}</textarea>
<div class="alert-message" id="descriptiError"></div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary updateInfo" data-id="{{$item->id}}" data-token="{{ csrf_token() }}">Save changes</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
#endforeach
my ajax code
$(".updateInfo").on('click',function(e) {
e.preventDefault();
let description = $('#description').val();
const ConsultId = $(this).attr('data-id');
var confirmation = confirm("Are you sure you want to update this Consult ?");
if (confirmation) {
$.ajax({
type:"PUT",
data:{
"_token": "{{ csrf_token() }}",
description:description,
},
url:'/ConsultantsCp/Consult/' + ConsultId,
success: function(data){
swal({title: "Good job", text: "Consult is successfully updated!", type:
"success", timer: 1500, buttons: false,}).then(function(){
location.reload();
}
);
},
error: function(response) {
$('#descriptiError').text(response.responseJSON.errors.description);
}
});
}
});
enter image description here
enter image description here

Similar as Rateb's answer, however a bit different
First we have to declare a javascript function to initialize whatever we need to show in the modal form
Second we must call the function with the necessary content. In your case when we click the Edit button, it must cal the js function
Third is the logic you use to post the data.
Notice how i have encoded the description to preserve the format and i have deleted the other parameters in the modal form and declared a hidden field to contain the item-id.
#foreach($consult as $item)
<div id="cards" class="card data-id-{{$item->id}}">
<div class="card-header">
<h5 class="card-title">your consult</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<div class="btn-group">
<button type="button" class="btn btn-tool " data-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
<path d="M14 12a2 2 0 11-2-2 2 2 0 012 2zM4 10a2 2 0 102 2 2 2 0 00-2-2zm16 0a2 2 0 102 2 2 2 0 00-2-2z"></path>
</svg>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu" style="">
<button data-toggle="modal" data-target="#edit-modal" onclick="initModal({{$item->id}}, {{json_encode($item->description)}} )" class="dropdown-item "><i class="fas fa-edit"></i> Edit</button>
<button class="dropdown-item deleteskill" data-id="{{$item->id}}" data-token="{{ csrf_token() }}" ><i class="fas fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<div class="card-body" >
<div class="post">
<div class="user-block all-posts-body">
#if(Auth::user()->photo)
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/photo/avatar/{{Auth::user()->photo}}">
#else
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/img/avatar.png" >
#endif
<span class="username">
{{Auth::user()->name}}{{Auth::user()->family}}
</span>
<span class="description">Shared publicly - {{ \Carbon\Carbon::parse($item->created_at)->diffForhumans()}}</span>
<p>
{{$item->description}}
</p>
</div>
</div>
</div>
</div>
#endforeach
modal
<div class="modal fade" id="edit-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">update your consult</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="edit-modal-form">
<div class="modal-body">
<textarea id="description" name="description" class="form-control form-control-sm" type="text" placeholder="What do you want to talk about?" ></textarea>
<div class="alert-message" id="descriptiError"></div>
<input type="hidden" id="item-id-field">
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary updateInfo" >Save changes</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
scripts
function initModal(id, description)
{
// Inialize the modal hidden field with the id value using Jquery
$("#item-id-field").val(id);
// decode the json and show it in the desciption field in the modal
var description_decoded = JSON.parse(JSON.stringify(description));
$("#description").html(description_decoded);
}
$(".updateInfo").on('click',function(e) {
e.preventDefault();
let description = $('#description').val();
const ConsultId = $("#item-id-field").val();
var confirmation = confirm("Are you sure you want to update this Consult ?");
if (confirmation) {
$.ajax({
type:"PUT",
data:{
"_token": "{{ csrf_token() }}",
description:description,
},
url:'/ConsultantsCp/Consult/' + ConsultId,
success: function(data){
swal({title: "Good job", text: "Consult is successfully updated!", type:
"success", timer: 1500, buttons: false,}).then(function(){
location.reload();
}
);
},
error: function(response) {
$('#descriptiError').text(response.responseJSON.errors.description);
}
});
}
});

Try this example, it's a simple example assuming you have show route that gives the post info and edit route that submitting the edits, in this example we are not submitting form we just sending a request with ajax client called axios,
The blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
#foreach($consult as $item)
<div id="cards" class="card">
<div class="card-header">
<h5 class="card-title">your consult</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button data-id={{$item['id']}} type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
edit
</button>
</div>
</div>
<div class="card-body">
<div class="post">
<p>
{{$item['description']}}
</p>
</div>
</div>
</div>
#endforeach
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit post</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<input type="hidden" name="id">
<div class="form-group">
<label>Description</label>
<input name="description" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button name="save-button" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.4/axios.min.js"></script>
</body>
<script>
const modal = $('#exampleModal')
const descriptionInput = $('input[name="description"]')
const idInput = $('input[name="id"]')
const saveButton = $('button[name="save-button"]')
modal.on('show.bs.modal', (e) => {
// getting the id from clicked button
const postId = e.relatedTarget.getAttribute('data-id')
// render the required post info
axios.get('/posts/' + postId).then(res => {
descriptionInput.val(res.data.description)
idInput.val(res.data.id)
})
})
saveButton.on('click', () => {
// the edit request in your example its /ConsultantsCp/Consult/' + ConsultId
axios.put('/posts/' + idInput.val(), {
_token: "{{ csrf_token() }}",
description: descriptionInput.val(),
}).then(res => {
console.log(res)
modal.modal('toggle')
})
})
</script>
</html>

Flask/Bootstrap button not opening modal window and without error message

I have this management page that lists my employees from my sqlite database, but when I click Add New Employees, nothing happens, and I don't get an error message as well...
I went over Bootstrap5 documentation to make sure I didn't misspell anything but still stuck...
{% extends 'base.html' %}
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class "col md-12">
<div class="bg-light p-3">
<h2>Manage <b>Employees </b> <button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#mymodal">Add New Employees</button> </h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissable" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<table class="table table-hover table-striped">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
{% for row in employee %}
<tr>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.phone}}</td>
<td>
Edit
Delete
</td>
</tr>
<!-- Modal Add Employee-->
<!-- Modal Edit Employee-->
</div>
</div>
</div>
{% endblock %}

on the Manage Employees button you are setting data-bs-toggle and data-bs-target, which should be data-toggle and data-target. Besides that you have to specify your target in data-target, you are defining a modal that doesn't exist (#mymodal doesn't exist in your code, that's why nothing happens).
Here is a working sample with your code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
{% extends 'base.html' %}
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-light p-3">
<h2>Manage <b>Employees </b> <button type="button" class="btn btn-success float-end" data-toggle="modal" data-target="#mymodal">Add New Employees</button> </h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissable" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<table class="table table-hover table-striped">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
{% for row in employee %}
<tr>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.phone}}</td>
<td>
Edit
Delete
</td>
</tr>
<!-- Modal Add Employee-->
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add new Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Create your html form here ...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add New Employee</button>
</div>
</div>
</div>
</div>
<!-- Modal Edit Employee-->
<div class="modal fade" id="modaledit{{row.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle2">Modal Edit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal Edit Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Edit Employee</button>
</div>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
By the way, you have an error on your code after your class row, you have class "col md-12" which should be class="col-md-12". (missing the equals and hyphen sign).
More information about modals can be found here: https://getbootstrap.com/docs/4.0/components/modal/
Hope it helps! :)

I did solved it by placing the Add New Employee model code just below the Add New Employee button code...

how to have dynamic modal in datatable

{% for key,value in config.items %}
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-id={{ key }} data-target="#myModal"><i class="glyphicon glyphicon-pencil" aria-hidden="true"></i></button>{{key}}
</td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog" id= {{ forloop.counter }>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Version for <strong>{{key}}</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder={{key}} {{ forloop.counter }}>
{{ forloop.counter }}
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok-sign"></span> Accept</button>
<button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span> Reject</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
{% endfor %}
//I have a datatable where the rows are getting populated based on the loop values.
Now inside the datatable in one particular row I have a button upon clicking it I should display the values of the particular row.
But the problem I am facing is only the first value is getting displayed in the modal.
when I am trying to check through {{ forloop.counter }} The value is always 1 inside the modal.But if i check outside the modal it is incrementing.
Can anyone guide me

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.

Develop Reference

JavaScript is the programming language of the Web.

Modal Delete cannot delete first item - javascript

Related

Modal does not perform as expected (Action no working)

ajax post list update only first of posts

Flask/Bootstrap button not opening modal window and without error message

how to have dynamic modal in datatable

Onclick does not work using Bootstrap

Categories

Resources