Hi I'm trying to customize my django form and add the file upload widget from Jasny Bootstrap. However, it doesn't seem to be working..
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">{{ wizard.form.main_image }}</span><span class="fileupload-exists">Change</span><input type="file" /></span>
Remove
</div>
</div>
Any ideas what I am doing wrong? Have I put {{ wizard.form.main_image }} in the wrong place?
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select an Image</span><span class="fileupload-exists">Change</span>
{{ wizard.form.main_image }}</span>
Remove
</div>
</div>
Related
I would like to use Ajax in my project in order to filter projects per category and display them in my template. I read a couple of articles but unfortunately i cannot figure out a way of how to implement it.
Any help is appreciated.
views.py
class WorkProjectsView(ListView):
model = Project
template_name = 'work/work.html'
queryset = Project.objects.all()
context_object_name = 'projects'
ordering = ['-date_created']
def get_context_data(self, *, object_list=None, **kwargs):
context = super(WorkProjectsView, self).get_context_data(**kwargs)
context['categories'] = Category.objects.all()
return context
class CategoryDetailView(ListView):
model = Category
context_object_name = 'projects_categ'
template_name = 'work/work.html'
def get_queryset(self):
self.category = get_object_or_404(Category, pk=self.kwargs['pk'])
return Project.objects.filter(category=self.category).order_by('-id')
def get_context_data(self, **kwargs):
context = super(CategoryDetailView, self).get_context_data(**kwargs)
return context
urls.py
path('project/<int:pk>/<slug:slug>', WorkProjectsDetailView.as_view(), name='project-detail'),
path('category/<int:pk>/<slug:slug>', CategoryDetailView.as_view(), name='category-list'),
work.html
In the below html i'm listing all projects. On the top of the page (work.html) i'm listing also all categories by using WorkProjectsView (see below). I would like when clicking a category to show all projects per category without reloading the page.
{% extends 'base.html' %}
{% load static %}
{% block content %}
<main class="main-root">
<div id="dsn-scrollbar">
<header>
<div class="container header-hero">
<div class="row">
<div class="col-lg-6">
<div class="contenet-hero">
<h5>Our Work</h5>
<h1>portfolio</h1>
</div>
</div>
</div>
</div>
</header>
<!--Project's list-->
<div class="wrapper">
<div class="root-work">
<div class="container">
<div class="box-title" data-dsn-title="cover">
<h2 class="title-cover" data-dsn-grid="move-section" data-dsn-move="-70">Projects</h2>
</div>
<div class="filterings">
<div class="filtering-wrap">
<div class="filtering">
<div class="selector"></div>
<button type="button" data-filter="All" class="active">All</button>
{% for category in categories %}
<button type="button" data-filter="{{ project.category }}" class="filter-category">
{{ category.title }}
</button>
<!--<button type="button" data-filter="Web Development"></button>
<button type="button" data-filter=".architecture">Architecture</button>
<button type="button" data-filter=".video">video</button>-->
{% endfor %}
</div>
</div>
</div>
<div class="projects-list gallery">
{% if projects %}
{% for project in projects %}
<div class="item brand">
<a href="{% url 'project-detail' pk=project.pk slug=project.slug %}" class="effect-ajax" data-dsn-ajax="work"
data-dsn-grid="move-up">
<img class="has-top-bottom" src="{{ project.featured_image.url }}" alt="" />
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">{{ project.category }}</h5>
<h4>{{ project.title }}</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
{% endfor %}
{% else %}
<div class="col-lg-8">
<p>No Projects Available</p>
</div>
{% endif %}
</div>
</div>
</div>
<!--End of Projects List-->
script used:
<script>
$('.filter-category').on('click', function(event) {
event.preventDefault();
var element = $(this); //button that was clicked
$.ajax({
url : 'category/<int:pk>/<slug:slug>',
type: 'GET',
data: { filter_category : element.attr("data") },
});
</script>
html code generated
<div class="container">
<div class="box-title" data-dsn-title="cover">
<h2 class="title-cover dsn-move-section" data-dsn-move="-70" style="visibility: inherit; opacity: 1; transform: translate3d(0px, -45.486px, 0px);">Projects</h2>
</div>
<div class="filterings">
<div class="filtering-wrap">
<div class="filtering">
<div class="selector"></div>
<button type="button" data-filter="All" class="active">All</button>
<button type="button" data-filter="" class="filter-category">
Web Development
</button>
<!--<button type="button" data-filter="Web Development"></button>
<button type="button" data-filter=".architecture">Architecture</button>
<button type="button" data-filter=".video">video</button>-->
<button type="button" data-filter="" class="filter-category">
Custom Software Development
</button>
<!--<button type="button" data-filter="Web Development"></button>
<button type="button" data-filter=".architecture">Architecture</button>
<button type="button" data-filter=".video">video</button>-->
<button type="button" data-filter="" class="filter-category">
Branding
</button>
<!--<button type="button" data-filter="Web Development"></button>
<button type="button" data-filter=".architecture">Architecture</button>
<button type="button" data-filter=".video">video</button>-->
<button type="button" data-filter="" class="filter-category">
E-Commerce Development
</button>
<!--<button type="button" data-filter="Web Development"></button>
<button type="button" data-filter=".architecture">Architecture</button>
<button type="button" data-filter=".video">video</button>-->
</div>
</div>
</div>
<div class="projects-list gallery" style="position: relative; height: 2436.78px;">
<div class="item brand" style="position: absolute; left: 0px; top: 0px;">
<a href="/project/6/physiosphere" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<img class="has-top-bottom" src="/media/photos/2021/01/05/Physiosphere_Front_Cart-min.jpg" alt="" style="transform: translate(0%, 0.934343%) translate3d(0px, 0px, 0px);">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Branding</h5>
<h4>Physiosphere</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="position: absolute; left: 555px; top: 0px;">
<a href="/project/5/laurelnymph" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<img class="has-top-bottom" src="/media/photos/2021/01/05/Slider_Mockup_Laurelnymph.jpg" alt="" style="transform: translate3d(0px, 0px, 0px);">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Web Development</h5>
<h4>Laurelnymph</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="position: absolute; left: 0px; top: 725px;">
<a href="/project/4/karakasis" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<img class="has-top-bottom" src="/media/photos/2021/01/05/Karakasis_Stamp-min.jpg" alt="">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Branding</h5>
<h4>Karakasis</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="position: absolute; left: 555px; top: 885px;">
<a href="/project/3/evillio" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<img class="has-top-bottom" src="/media/photos/2021/01/04/Evillio_Pin_Button_Mockup-min.jpg" alt="">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Branding</h5>
<h4>Evillio</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="position: absolute; left: 0px; top: 1501px;">
<a href="/project/2/anclub" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<img class="has-top-bottom" src="/media/photos/2021/01/04/Slider_Mockup_Anclub_msOsUHA.jpg" alt="">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Web Development</h5>
<h4>AnClub</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="position: absolute; left: 555px; top: 1661px;">
<a href="/project/1/spearguns" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<img class="has-top-bottom" src="/media/photos/2021/01/05/speaguns-home-slider.jpg" alt="">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Web Development</h5>
<h4>Spearguns</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
</div>
</div>
As in your html structure .cat has category type you can use this to match with the data-attr of the button.So, whenever button is clicked get the attr value and using .each loop compare these value and show() div where value matches.
Demo Code :
$('.filter-category').on('click', function(event) {
event.preventDefault();
//get data attr
var element = $(this).data('filter');
console.log(element)
if (element != "All") {
//hide item divs
$('.gallery .item').hide()
//loop through item divs
$('.gallery .item').each(function() {
//if the .cat is equal to elemnts
if ($(this).find('.cat').text() === element) {
$(this).show() //show
}
})
} else {
$('.gallery .item').show()
}
})
.item {
border: 1px solid grey;
margin-bottom: 5px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filterings">
<div class="filtering-wrap">
<div class="filtering">
<div class="selector"></div>
<button type="button" data-filter="All" class="active filter-category">All</button>
<button type="button" data-filter="Web Development" class="filter-category">
Web Development
</button>
<button type="button" data-filter="Custom Software Development" class="filter-category">
Custom Software Development
</button>
<button type="button" data-filter="Branding" class="filter-category">
Branding
</button>
<button type="button" data-filter="E-Commerce Development" class="filter-category">
E-Commerce Development
</button>
</div>
</div>
</div>
<div class="projects-list gallery" style="position: relative; height: 2436.78px;">
<div class="item brand" style="">
<a href="/project/6/physiosphere" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Branding</h5>
<h4>Physiosphere</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="">
<a href="/project/5/laurelnymph" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Web Development</h5>
<h4>Laurelnymph</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="">
<a href="/project/4/karakasis" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Branding</h5>
<h4>Karakasis</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="">
<a href="/project/3/evillio" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Branding</h5>
<h4>Evillio</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="">
<a href="/project/2/anclub" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Web Development</h5>
<h4>AnClub</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
<div class="item brand" style="">
<a href="/project/1/spearguns" class="effect-ajax" data-dsn-ajax="work" data-dsn-grid="moveUp">
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">Web Development</h5>
<h4>Spearguns</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
</div>
I need to dynamically change image background-image css from home page in django cms, but is imposible.
home
CSS CODE
The css has the welcome-image-area class the user needs to change the image url in the cms.
.welcome-area {
height: 100%;
}
.welcome-image-area {
position: relative;
height: 100%;
background-image: url(../images/bg/bg.jpg);
background-size: cover;
z-index: 1;
}
.welcome-image-area:after {
position: absolute;
background: rgba(0, 0, 0, .7);
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
HTML CODE
base.html
<div id="welcome-image-area" class="welcome-image-area" data-stellar-background-ratio="0.6" >
<div class="display-table">
<div class="display-table-cell">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header-text">
<h2>{% static_placeholder 'mensaje bienvenida' %}</h2>
<p>{% static_placeholder 'sub mensaje bienvenida' %}</p>
<a class="smoth-scroll hire-us-slide-btn" href="#service">Servicios <i class="fa fa-hand-pointer-o btn-hire-us" aria-hidden="true"></i></a>
<a class="slide-btn smoth-scroll" href="#contact">Contactanos <i class="fa fa-hand-pointer-o btn-contact-us" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In those cases I would recommend to utilize the "style" attribute as following:
<div class="welcome-image-area" style="background-image: url({{ instance.image.url }})"></div>
I want to develop image gallery. I want to present each image and its description under it and when I click on an image or text or white space got "modal"
I wrote this for an element in gallery
<div class="m-4 img99">
<a href="#ml">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="simg " alt="..." data-toggle="modal" data-target="#ml">
<div class="">
<h5 class="">test</h5>
<p>test</p>
</div>
</a>
</div>
The modal part is
<div class="modal fade" id="ml">
<div class="modal-dialog modal-dialog-centered modal-xl ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body ">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
<p>
test
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
and CSS part
.simg {
width: auto;
height: 60px;
}
.img99 {
margin-right: auto !important;
margin-left: auto !important;
width: max-content;
height: max-content;
border: 1px solid rgba(0, 0, 0, 0.15);
}
My problem is when I click on a text or white space the model didn't work. "when I click on image :the model work normally"
https://codepen.io/ahof920/pen/MWYGRYp?editors=1100
What is the problem?
Replace your HTML with this:
Reason why its not working :
Modal are triggered by following tag's in bootstrap data-toggle="modal" data-target="#ml" and you added those inside <img> tag that's the reason modal is opened when clicked on image. So add data-toggle="modal" data-target="#ml" to <a>.
.simg {
width: auto;
height: 60px;
}
.img99 {
margin-right: auto !important;
margin-left: auto !important;
width: max-content;
height: max-content;
border: 1px solid rgba(0, 0, 0, 0.15);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="shadow2 m-4 img99">
<a href="#ml" data-toggle="modal" data-target="#ml">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="simg " alt="...">
<div class="">
<h5 class="">test</h5>
<p>test</p>
</div>
</a>
</div>
<div class="modal fade" id="ml">
<div class="modal-dialog modal-dialog-centered modal-xl ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body ">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
<p>
test
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
I am using Bootstrap's Modal class to have a modal appear after clicking a button. The code works - the button is clicked and the modal appears, however, the whole screen is grayed-out and the modal cannot be clicked. I cannot close the modal since it is "in" the gray background. You can see in the image below:
Here is the code:
<!-- Modal -->
<div id="myModal" class="modal fade" style="z-index: 9999;" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<section id="profileMain">
<form class="formoid-solid-dark"
style="background-color: #FFFFFF; font-size: 14px; font-family: 'Trebuchet MS','Roboto', Arial, Helvetica, sans-serif; color: #34495E; max-width: 800px; min-width: 150px"
method="post" action="">
<div class="title">
<h2>Intake Request</h2>
</div>
<div id="mainFormTabs" class="container">
<ul class="nav nav-pills">
<li><a data-toggle="tab" href="#tabCM">Comments</a></li>
</ul>
<div class="container" style="border:1px solid #34495E; border-radius: 0px 4px 4px 4px;">
<div class="tab-content clearfix" style="padding: 10px;">
<div id="tabCM" class="tab-pane fade">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
</div>
</div>
</div>
</form>
</section>
I have tried adjusting the z-index for the modal, I have moved the modal div outside the body, at the top, and at the bottom of the html form, but none of these worked.
I appreciate any ideas on how to fix this.
You probably fixed it, but there may somebody who can't. The solution to this problem is;
$("#myModal").prependTo("body");
I went back and moved the modal div outside the body tag and it is now working.
</body>
<!-- Modal -->
<div id="myModal" class="modal fade" style="z-index: 9999;" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</html>
I guess than you ready solve, but, just for documentation purpose, you can add this to the css and will help
.modal-backdrop {
display: none;
z-index: 1040 !important;
}
.modal-content {
margin: 2px auto;
z-index: 1100 !important;
}
If you cant place modal section outside body, you can try use this:
<script>
$(document).ready(function () {
$("#modalBtnClick").on("click", function () {
$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
});
});
</script>
and don't forget add id attribute to your button:
<button id="modalBtnClick" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
I had this problem and fixed by giving modal z-index css property :
style="z-index: 999999999;"
as previous solutions didn't work for me
I have included Jasny fileupload component on an existing form part of a wizard.
Everything is working well on the form itself. The trouble is that when navigating to the next form of the wizard, then going back the file uploaded by the user disappeared.
The problem is therefore that if the user is going backwards in the form, he has to reload each time the file that have been uploaded.
Am I doing anything wrong ? The part of the template storing the file is provided below :
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 100px; height: 100px;"><img src="http://www.placehold.it/100x100/EFEFEF/AAAAAA" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 100px; height: 100px;"></div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span>
{{ form.file_img1 }}
Remove
</div>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 100px; height: 100px;"><img src="http://www.placehold.it/100x100/EFEFEF/AAAAAA" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 100px; height: 100px;"></div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span>
{{ form.file_img2 }}
Remove
</div>