I have a for loop creating my main home page cards , i have 3 models
Image ,title and body
the idea is to get the specific info for each card that I'm pressing on his "view " button .
I'be been using django with python , and I'm trying to make like a news website where you see the title on the cards on the home page and when you click them you get a scroll bar with the full info about the arctical ,
the problem is that because I'm looping trough the database to get all the cards , when I press on the "View" button doesn't mattet which one I get the body of the text that Is last on the List.
<div class="row">
{%for job in jobs.all%}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class ="card-img-top" src ="{{job.image.url}}" />
<div class="card-body">
<p class="card-text">{{job.title}}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModalScrollable"
>
View
</button>
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Full artical</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{job.body}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{%endfor%}
</div>
You are producing multiple nodes that all have ID exampleModalScrollable, which is not quite legal. Not sure which front-end library you're depending on, but I believe you want to have the data-target in the button align with the id of the modal for each item. The easiest is to use the model's ID; something like:
<button type="button" class="btn btn-outline-primary" data-toggle="modal"
data-target="#job-modal-{{job.id}}">
and
<div class="modal fade" id="job-modal-{{job.id}}" tabindex="-1"
role="dialog" aria-labelledby="{{job.title}}" aria-hidden="true">
Related
when i clikc on django title i get django post and when i click on javascript title i get django post ether am not using any frame_work and this my blog page i really try every solution i know but Unfortunately nothing happend
And here an image
blog.html
{% for blog in blogs %}
<div class="col-xl-12 col-md-6 col-xs-12 blog">
<div class="right-text-content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<h2 class="sub-heading">{{blog.title|title}}</h2>
</button>
<!-- Modal -->
<div class="modal fade align-self-end mr-3 " id="myModal" tabindex="1" role="dialog"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{blog.title|title}}</h5>
<h6 class="float-right">{{blog.created_at}}</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{blog.content|linebreaks}}
</div>
<div class="modal-footer">
<h5>Created by {{blog.name}}</h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
<br>
<a rel="nofollow noopener" href="{{blog.name_url}}" target="_parent">{{blog.name}}</a>
<br>
{{blog.content|linebreaks}}
</p>
{{blog.created_at}}
</div>
</div>
{% endfor %}
views.py
from django.shortcuts import render
from .models import DigitalTeam, Blog
def index(request):
pers = DigitalTeam.objects.all()
return render(request, 'index.html', {'pers':pers})
def blog(request):
pers = DigitalTeam.objects.all()
blogs = Blog.objects.all()
return render(request, 'blog.html', {'pers':pers, 'blogs':blogs})
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('blog', views.blog, name='blog'),
]
So guys what am i missing
To get individual blog details in the modal you need to pass the blog id to the modal as a prop.
It can be done by adding blog.id in the button data-target prop and receive the blog.id in modal id prop.
the solution in given below,
{% for blog in blogs %}
<div class="col-xl-12 col-md-6 col-xs-12 blog">
<div class="right-text-content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal{{blog.id}}">
<h2 class="sub-heading">{{blog.title|title}}</h2>
</button>
<!-- Modal -->
<div class="modal fade align-self-end mr-3 " id="myModal{{blog.id}}" tabindex="1" role="dialog"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{blog.title|title}}</h5>
<h6 class="float-right">{{blog.created_at}}</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{blog.content|linebreaks}}
</div>
<div class="modal-footer">
<h5>Created by {{blog.name}}</h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
<br>
<a rel="nofollow noopener" href="{{blog.name_url}}" target="_parent">{{blog.name}}</a>
<br>
{{blog.content|linebreaks}}
</p>
{{blog.created_at}}
</div>
</div>
{% endfor %}
I am using bootstrap modal in my flask blog where is put the bootstrap modal inside the {% for blog in blogs %} section where I pass the {{blog.id}} in my modal.
But every modal is showing the same first {{blog.id}} (for ex. 1 in every modal) where every modal should have the id of it's respective blog.
Here is the code -
{% for blog in blogs %}
<div class="col-md-12">
<div class="mu-blog-area">
<!-- Title -->
<div class="row">
<div class="col-md-8">
<h1 class="mu-blog-item-title">{{blog.title}}</h1>
<p>{{blog.body}}</p>
<form action="/blog_detail/{{blog.id}}" method="post">
<button class="mu-blg-readmore-btn" type="submit">Read more <i class="fa fa-long-arrow-right"></i></button>
</form>
<div class="mu-blog-navigation">
<button class="mu-blog-nav-btn mu-blog-nav-prev ><span class="fa fa-trash-o"></span>Delete Post</button>
<button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#exampleModalCenter" >Edit Post<span class="fa fa-edit"></span></button>
</div>
</div>
<!-- Blog Navigation -->
</article>
<!-- End single item -->
</div>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Warning! READ THIS</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
If you edit this post then your media content of this blog (photos, videos & audio) will be deleted automaticlly.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="/edit_blog/{{blog.id}}" method="post">
<h1>{{blog.id}}</h1>
<button type="submit" class="btn btn-primary">Yes I will edit</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
What is going wrong here?
I should have to give different id to every modal so that every blog modal trigger button can access it's own modal.
I should replace the trigger button code like this -
<button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#{{blog.id}}exampleModalCenter" >Edit Post<span class="fa fa-edit"></span></button>
And the modal id like this -
<div class="modal fade" id="{{blog.id}}exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
That's a very simple solution. You have to make the id to be unique for every modal.
That's it.
This is the footer code:
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="employee_update_btn" type="submit" class="btn btn-success btn-round ">Update</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
{% if success %}
<script>
$('#employee.employee_id_{{ employee.employee_id }}').show();
</script>
{% endif %}
</script>
</form>
I wanted to open the modal after clicking the Update button.
views.py
return render(request, 'index.html', context={'success': True})
the Modal i wanted to open:
<div class="modal fade" id="employee.employee_id_{{ employee.employee_id }}" tabindex="-1" role="dialog" style="display: none; overflow: auto;" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="card">
<div class="modal-content">
<div class="modal-header">
<div class="card-header-success" >
<h4 align="center" class="card-title">EMPLOYEE PROFILE</h4>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
your {% if success %}... will break your code inserting a <script> tag inside another.
Anyway, to accomplish what you want, the following should do the trick.
$("#employee_update_btn").click(function (e){
e.preventDefault(); // Prevent default submit action
// show the modal
$("#employee_employee_id_{{ employee.employee_id }}").show();
});`
Note that I've changed your modal ID getting rid of the dot in it since it will break the selector, update your html as follows
<div class="modal fade" id="employee_employee_id_{{ employee.employee_id }}" tabindex="-1" role="dialog" style="display: none; overflow: auto;" aria-hidden="true" data-backdrop="static">
[...]
If you are using bootstrap as a css framework, keep in mind that you should init the modal before interacting with it.
I have created a web application using flask and bootstrap. In this application, after putting the inputs and clicking the submit button I want to show the output or result in the same page in a bootstrap modal. But I could not redirect it properly. If there is any solution to it tell me. It will be very helpful. Thanks in advance. The codes are given below.
home.html
<div class="container" align="left">
<div class="panel panel-default" style="border:none;border-radius: 10px;">
<div class="panel-body panel1">
<form method="POST" action="/predict">
<div class="row">
<div class="col-sm-6">
<div class="form-group d2">
<label for="NewYork"><p class="p2">New York</p></label>
<input type="text" class="i1" name="NewYork"><br><br>
<small id="NYHelp" class="form-text text-muted s1">Enter 1 if the state selected is New York else enter 0</small>
</div>
<div class="form-group d2">
<label for="california"><p class="p2">California</p></label>
<input type="text" class="i1" name="California"><br><br>
<small id="CaliforniaHelp" class="form-text text-muted s1">Enter 1 if the state selected is New York else enter 0</small>
</div>
<div class="form-group d2">
<label for="Florida"><p class="p2">Florida</p></label>
<input type="text" class="i1" name="Florida"><br><br>
<small id="FloridaHelp" class="form-text text-muted s1">Enter 1 if the state selected is New York else enter 0</small>
</div>
</div>
<div class="col-sm-6">
<div class="form-group d2">
<label for="RnD_Spend"><p class="p2">RnD_Spend</p></label>
<input type="text" class="i1" name="RnD_Spend"><br><br>
<small id="RndSpendHelp" class="form-text text-muted s1">Enter RnD Spendings in US Dollar</small>
</div>
<div class="form-group d2">
<label for="Admin_Spend"><p class="p2">Admin_Spend</p></label>
<input type="text" class="i1" name="Admin_Spend"><br><br>
<small id="AdminSpendHelp" class="form-text text-muted s1">Enter Adminstration Spendings in US Dollar</small>
</div>
<div class="form-group d2">
<label for="Market_Spend"><p class="p2">Market_Spend</p></label>
<input type="text" class="i1" name="Market_Spend"><br><br>
<small id="MarketSpendHelp" class="form-text text-muted s1">Enter Market Spendings in US Dollar</small>
</div>
</div>
</div>
<div class="row" align="right"><input class="btn btn1" type= "submit" value="Submit" data-toggle="modal" data-target="#myModal"></div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
app.py
#app.route("/predict",methods=['GET', 'POST'])
def predict():
NewYork = float(request.form['NewYork'])
California = float(request.form['California'])
Florida = float(request.form['Florida'])
RnD_Spend= float(request.form['RnD_Spend'])
Admin_Spend= float(request.form['Admin_Spend'])
Market_Spend = float(request.form['Market_Spend'])
pred_args =[NewYork, California, Florida, RnD_Spend, Admin_Spend, Market_Spend]
pred_args_arr = np.array(pred_args)
pred_args_arr = pred_args_arr.reshape(1, -1)
mul_reg = open("multiple_linear_model.pkl", "rb")
ml_model = joblib.load(mul_reg)
model_prediction = ml_model.predict(pred_args_arr)
model_prediction = round(float(model_prediction), 2)
return render_template('home.html', prediction = model_prediction)
I would say that it is usually not a good practice to redirect a user after form submission to the same page but with a modal shown (it is just not a good user experience), and I would recommend doing this through the use of AJAX.
Anyway, you can pass a flag that tells the HTML template renderer if it needs to show the modal. Something like this:
return render_template(
'home.html',
prediction=model_prediction,
show_predictions_modal=True // This is our flag
)
Then conditionally render your modal in the template:
{% if show_predictions_modal %}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endif %}
I have a Bootstrap Model working fine, except that it is visible when the document loads and I can't work out how to make the initial state invisible?
Launch demo modal
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Following documentation, add hide class to the modal.
<div class="modal hide fade">
...
</div>
Turns out simply adding style="display: none" to the modal outer div did the trick.