I am a begineer in Django framework I want to Dynamically load content in Bootstrap Modal with AJAX
something like this
https://makitweb.com/demo/modal_ajax/index.php
(to be clear its not my code result i want to do dometing like this)
I found many tutorials on internet but i want some guidance on the part where button is pressed and modal shows data related to that item.
Please pardon me if it's a bad question
here is code
models.py
from django.db import models
class Product(models.Model):
name = models.CharField(max_length=200)
img = models.ImageField(upload_to='prodpics', default=None)
price = models.FloatField(max_length=30)
category = models.CharField(max_length=30)
description = models.CharField(max_length=200)
def __str__(self):
return self.name
views.py
from django.shortcuts import render
from .models import Product
# Create your views here.
def products(request):
prods = Product.objects.all()
return render(request, 'products.html',{'prods':prods})
prod.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<!-- <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> -->
<!-- <meta name="generator" content="Jekyll v4.0.1"> -->
<title>Products</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="{% static 'css/starter-template.css' %}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Explore Us</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sign In/Sign Up</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Sign In</a>
<a class="dropdown-item" href="#">Sign Up</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Products</h1>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
{% for prod in prods %}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-image-top" src="{{prod.img}}" alt="">
<div class="card-body">
<h2 class="card-text text-center">{{prod.name}}</h2>
<p class="card-text text-center">${{prod.price}}</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group center"> -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Know More</button><br>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{prod.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{prod.description}}
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary">Request demo</button>
<!-- </div> -->
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</main><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="{% static 'js/vendor/bootstrap.bundle.js' %}"></script></body>
</html>
Still this question is related to bootstrap not Django. You should match id's of both button and modal template.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#prod.id">Know More</button><br>
<!-- Modal -->
<div class="modal fade" id="{{prod.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{prod.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{prod.description}}
</div>
</div>
</div>
</div>
I searched a lot about my problem but couldn't find a solution probably because I am not good at looking or understanding. But I am searching about this for 2 days but couldn't find something that solves it.
I am working on a project with django.When I run the website I get no error. but when I click the buttons (home page and contact stuff), http://127.0.0.1:8000/first/first/first/first/iletisim.html it makes something like this. everytime I click iletisim button (its in turkish contact in english) it adds /first itself and nothing changes on the webpage it stays still on the homepage.
Edited : another issue is I also can't log in as admin. İf go in to /admin it redirects me to home page...
Here is an example
I only made contact blog and homepage until this point. I will try to put folder orders in here so mybe you guys will have an idea about the later.
haliyikama/haliyikama/settings.py
INSTALLED_APPS = [
'first',
'blog',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
haliyikama/haliyikama/urls.py
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^', include('first.urls')),
url(r'^blog/', include('blog.urls')),
]
haliyikama/first/urls.py
from django.conf.urls import url, include
from . import views
urlpatterns = [
url(r'^', views.index, name = 'index'),
url(r'^home', views.index, name = 'home'),
url(r'^first/iletisim', views.contact, name = 'iletisim')
]
haliyikama/first/views.py
from django.shortcuts import render
def index(request):
return render(request, 'first/home.html')
def contact(request):
return render(request,'first/iletisim.html', {'content':['Eger bizimle iletisime gecmek isterseniz mail adresimizi kullanabilirsiniz.', 'gulumhali#outlook.com']})
When I try to put $ sign in the my-site urls.py file at first place it does not open anypage it gaves 404 error indicates that I shouldn't put $ but if I don't put that I am stuck in home page.
These are the html files if you guys need to solve my problem;
These are in haliyikama/first/templates/first
iletisim.html
{% extends "first/header.html" %}
{% block content %}
{% for c in content %}
<p>{{c}}</p>
{%endfor%}
{% endblock %}
home.html
{% extends "first/header.html" %}
{% block content %}
<div class = "hero-unit">
<div class="container">
<h2 class="text-center">Gülüm Halı Yıkama Servisi</h2>
<p class="text-center">Kaliteli hizmetin adresi</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="Gülüm-Halı-Yıkama-Servisi" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#Gülüm-Halı-Yıkama-Servisi" data-interval="1000" data-slide-to="0" class="active"></li>
<li data-target="#Gülüm-Halı-Yıkama-Servisi" data-interval="1000" data-slide-to="1"></li>
<li data-target="#Gülüm-Halı-Yıkama-Servisi" data-interval="1000" data-slide-to="2"></li>
<li data-target="#Gülüm-Halı-Yıkama-Servisi" data-interval="1000" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/static/images/1.jpg" alt="1" class = "img-responsive">
<div class="carousel-caption">
<h3 class="bg-primary">Halılarınız bizimle güvende.</h3>
<p>Profesyonel bir şekilde halılarınızın bakımı ve güvenliği Gülüm Halı Yıkama Servisi güvencesiyle gerçekten mümkün! Bu fırsattan yararlanabilmek için hemen size yakın bayiliğimizi arayabilirsiniz.</p>
</div>
</div>
<div class="item">
<img src="/static/images/2.jpg" alt="2" class = "img-responsive">
<div class="carousel-caption">
<h3 class="bg-primary">Hem ucuz, Hem kaliteli!</h3>
<p>Kalite ararken cüzdanınız boşalması, ucuzluk ararken halılarınızın yıpranması derdiniz bitti! Kaliteyi ve ucuzluğu sizler için birleştirdik. </p>
</div>
</div>
<div class="item">
<img src="/static/images/3.jpg" alt="3" class = "img-responsive">
<div class="carousel-caption">
<h3 class="bg-primary">Yüzleri güldüren komfor.</h3>
<p>Verdiğimiz kaliteli hizmetin en önemli amacı, müşteri memnuniyetidir.</p>
</div>
</div>
<div class="item">
<img src="/static/images/4.jpg" alt="4" class = "img-responsive">
<div class="carousel-caption">
<h3 class="bg-primary">Tam Zamanında!</h3>
<p>Teslimat süresi müşteri ile anlaşılan zamanda gerçekleştirilmesi garantisiyle...</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#Gülüm-Halı-Yıkama-Servisi" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Önceki</span>
</a>
<a class="right carousel-control" href="#Gülüm-Halı-Yıkama-Servisi" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Sonraki</span>
</a>
</div>
</div>
</div>
</div>
<div class = "container">
<div class = "row">
<div class = "col-xs-6 col-sm-3">
<h4>Hizmet verdiğimiz alanlar</h4>
<p>Şuanda Başakşehir ve Esenyurt olmak üzere iki bayiliğimiz bulunmakta. Bu bayilikler aracılığıyla çok geniş bir çevreye hizmetlerimizi sunuyoruz. Kendi bölgenizin de bu bayilikler kapsamında olup olmadığını görmek için Bölgeleri Göster butonuna tıklayınız.</p>
<a class = "btn btn-primary btn-lg" data-target = "#DENEME" role = "button" data-toggle = "modal">Bölgeleri Göster</a>
</div>
<div class = "col-xs-6 col-sm-3">
<h4>Hizmet verdiğimiz alanlar</h4>
<p>Şuanda Başakşehir ve Esenyurt olmak üzere iki bayiliğimiz bulunmakta. Bu bayilikler aracılığıyla çok geniş bir çevreye hizmetlerimizi sunuyoruz. Kendi bölgenizin de bu bayilikler kapsamında olup olmadığını görmek için Bölgeleri Göster butonuna tıklayınız.</p>
<a class = "btn btn-primary btn-lg" data-target = "#DENEME1" role = "button" data-toggle = "modal">Example</a>
</div>
<div class = "col-xs-6 col-sm-3">
<h4>Hizmet verdiğimiz alanlar</h4>
<p>Şuanda Başakşehir ve Esenyurt olmak üzere iki bayiliğimiz bulunmakta. Bu bayilikler aracılığıyla çok geniş bir çevreye hizmetlerimizi sunuyoruz. Kendi bölgenizin de bu bayilikler kapsamında olup olmadığını görmek için Bölgeleri Göster butonuna tıklayınız.</p>
<a class = "btn btn-primary btn-lg" data-target = "#DENEME2" role = "button" data-toggle = "modal">Example</a>
</div>
<div class = "col-xs-6 col-sm-3">
<h4>Hizmet verdiğimiz alanlar</h4>
<p>Şuanda Başakşehir ve Esenyurt olmak üzere iki bayiliğimiz bulunmakta. Bu bayilikler aracılığıyla çok geniş bir çevreye hizmetlerimizi sunuyoruz. Kendi bölgenizin de bu bayilikler kapsamında olup olmadığını görmek için Bölgeleri Göster butonuna tıklayınız.</p>
<a class = "btn btn-primary btn-lg" data-target = "#DENEME3" role = "button" data-toggle = "modal">Example</a>
</div>
</div>
</div>
</div>
{% endblock %}
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gülüm Halıyıkama</title>
<meta charset="utf-8" />
<meta name="description" content="Halı Yıkama Servisi">
<meta name="keywords" content="ucuz halıyıkama,başakşehir,halıyıkama,esenyurt,kaliteli halıyıkama">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load staticfiles %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body class="body" style="background-color:#f6f6f6">
<div class = "navbar navbar-default navbar-fixed-top">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home"> <img alt="Brand" src= "/static/images/logo.jpg"</a><a class="navbar-brand" href="home">Gülüm Halı®</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Anasayfa <span class="sr-only">(current)</span></li>
<li>Bayiler</li>
<li>Vizyonumuz</li>
<li>Misyonumuz</li>
<li class="dropdown">
</li>
<ul class="nav navbar-nav navbar-right">
<li>İletişim</li>
<li class="dropdown">
Daha Fazla<span class="caret"></span>
<ul class="dropdown-menu">
<li>Anasayfa</li>
<li>Bayiler</li>
<li>Vizyonumuz</li>
<li role="separator" class="divider"></li>
<li>Misyonumuz</li>
</ul>
</li>
</ul>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div>
{% block content %}
{% endblock %}
</div>
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "navbar-inner">
<div class = "container footer-margin-top">
<p class="muted pull-right" ><ins>Haydar Öztürk tarafından Bootsrap ile oluşturuldu.</ins></p>
<p class="muted pull-left" >Bütün hakları saklıdır. 2016</p>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="DENEME" tabindex="-1" role="dialog" aria-labelledby="modal0">
<div class="modal-dialog" role="document">
<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>
<h2 class="modal-title" id="modal0">Bayilere göre bölgeler</h2>
</div>
<div class="modal-body">
<h3>Başahşehir</h3>
<p> Başakşehir şubemiz, Başakşehir,Kayaşehir,Altınşehir,Şahintepe,Tahtakale,Bahçeşehir ve Esenkent'in bütün mahallelerini,cadde ve sokaklarını kapsamaktadır. </p>
<h3>Esenyurt</h3>
<p> Esenyurt şubemiz, Beylikdüzü,Esenyurt ve Avcılar ilçelerinin bütün mahalle,cadde ve sokaklarını kapsamaktadır. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DENEME1" tabindex="-1" role="dialog" aria-labelledby="modal1">
<div class="modal-dialog" role="document">
<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>
<h2 class="modal-title" id="modal1">Bayilere göre bölgeler</h2>
</div>
<div class="modal-body">
<h3>Başahşehir</h3>
<p> Başakşehir şubemiz, Başakşehir,Kayaşehir,Altınşehir,Şahintepe,Tahtakale,Bahçeşehir ve Esenkent'in bütün mahallelerini,cadde ve sokaklarını kapsamaktadır. </p>
<h3>Esenyurt</h3>
<p> Esenyurt şubemiz, Beylikdüzü,Esenyurt ve Avcılar ilçelerinin bütün mahalle,cadde ve sokaklarını kapsamaktadır. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DENEME2" tabindex="-1" role="dialog" aria-labelledby="modal2">
<div class="modal-dialog" role="document">
<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>
<h2 class="modal-title" id="modal2">Bayilere göre bölgeler</h2>
</div>
<div class="modal-body">
<h3>Başahşehir</h3>
<p> Başakşehir şubemiz, Başakşehir,Kayaşehir,Altınşehir,Şahintepe,Tahtakale,Bahçeşehir ve Esenkent'in bütün mahallelerini,cadde ve sokaklarını kapsamaktadır. </p>
<h3>Esenyurt</h3>
<p> Esenyurt şubemiz, Beylikdüzü,Esenyurt ve Avcılar ilçelerinin bütün mahalle,cadde ve sokaklarını kapsamaktadır. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DENEME3" tabindex="-1" role="dialog" aria-labelledby="modal3">
<div class="modal-dialog" role="document">
<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>
<h2 class="modal-title" id="modal3">Bayilere göre bölgeler</h2>
</div>
<div class="modal-body">
<h3>Başahşehir</h3>
<p> Başakşehir şubemiz, Başakşehir,Kayaşehir,Altınşehir,Şahintepe,Tahtakale,Bahçeşehir ve Esenkent'in bütün mahallelerini,cadde ve sokaklarını kapsamaktadır. </p>
<h3>Esenyurt</h3>
<p> Esenyurt şubemiz, Beylikdüzü,Esenyurt ve Avcılar ilçelerinin bütün mahalle,cadde ve sokaklarını kapsamaktadır. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
</body>
</html>
I thought <a href="{% url name_of_register_url %}>Register</a> This solution could solve my problem but it didn't. mybe partly did. after I implant this solution to my header.html file it become like this;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gülüm Halıyıkama</title>
<meta charset="utf-8" />
<meta name="description" content="Halı Yıkama Servisi">
<meta name="keywords" content="ucuz halıyıkama,başakşehir,halıyıkama,esenyurt,kaliteli halıyıkama">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load staticfiles %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body class="body" style="background-color:#f6f6f6">
<div class = "navbar navbar-default navbar-fixed-top">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url home.html %}"> <img alt="Brand" src= "/static/images/logo.jpg"</a><a class="navbar-brand" href="{% url home.html %}">Gülüm Halı®</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Anasayfa <span class="sr-only">(current)</span></li>
<li>Bayiler</li>
<li>Vizyonumuz</li>
<li>Misyonumuz</li>
<li class="dropdown">
</li>
<ul class="nav navbar-nav navbar-right">
<li>İletişim</li>
<li class="dropdown">
Daha Fazla<span class="caret"></span>
<ul class="dropdown-menu">
<li>Anasayfa</li>
<li>Bayiler</li>
<li>Vizyonumuz</li>
<li role="separator" class="divider"></li>
<li>Misyonumuz</li>
</ul>
</li>
</ul>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div>
{% block content %}
{% endblock %}
</div>
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "navbar-inner">
<div class = "container footer-margin-top">
<p class="muted pull-right" ><ins>Haydar Öztürk tarafından Bootsrap ile oluşturuldu.</ins></p>
<p class="muted pull-left" >Bütün hakları saklıdır. 2016</p>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="DENEME" tabindex="-1" role="dialog" aria-labelledby="modal0">
<div class="modal-dialog" role="document">
<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>
<h2 class="modal-title" id="modal0">Bayilere göre bölgeler</h2>
</div>
<div class="modal-body">
<h3>Başahşehir</h3>
<p> Başakşehir şubemiz, Başakşehir,Kayaşehir,Altınşehir,Şahintepe,Tahtakale,Bahçeşehir ve Esenkent'in bütün mahallelerini,cadde ve sokaklarını kapsamaktadır. </p>
<h3>Esenyurt</h3>
<p> Esenyurt şubemiz, Beylikdüzü,Esenyurt ve Avcılar ilçelerinin bütün mahalle,cadde ve sokaklarını kapsamaktadır. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DENEME1" tabindex="-1" role="dialog" aria-labelledby="modal1">
<div class="modal-dialog" role="document">
<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>
<h2 class="modal-title" id="modal1">Bayilere göre bölgeler</h2>
</div>
<div class="modal-body">
<h3>Başahşehir</h3>
<p> Başakşehir şubemiz, Başakşehir,Kayaşehir,Altınşehir,Şahintepe,Tahtakale,Bahçeşehir ve Esenkent'in bütün mahallelerini,cadde ve sokaklarını kapsamaktadır. </p>
<h3>Esenyurt</h3>
<p> Esenyurt şubemiz, Beylikdüzü,Esenyurt ve Avcılar ilçelerinin bütün mahalle,cadde ve sokaklarını kapsamaktadır. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DENEME2" tabindex="-1" role="dialog" aria-labelledby="modal2">
<div class="modal-dialog" role="document">
<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>
<h2 class="modal-title" id="modal2">Bayilere göre bölgeler</h2>
</div>
<div class="modal-body">
<h3>Başahşehir</h3>
<p> Başakşehir şubemiz, Başakşehir,Kayaşehir,Altınşehir,Şahintepe,Tahtakale,Bahçeşehir ve Esenkent'in bütün mahallelerini,cadde ve sokaklarını kapsamaktadır. </p>
<h3>Esenyurt</h3>
<p> Esenyurt şubemiz, Beylikdüzü,Esenyurt ve Avcılar ilçelerinin bütün mahalle,cadde ve sokaklarını kapsamaktadır. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DENEME3" tabindex="-1" role="dialog" aria-labelledby="modal3">
<div class="modal-dialog" role="document">
<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>
<h2 class="modal-title" id="modal3">Bayilere göre bölgeler</h2>
</div>
<div class="modal-body">
<h3>Başahşehir</h3>
<p> Başakşehir şubemiz, Başakşehir,Kayaşehir,Altınşehir,Şahintepe,Tahtakale,Bahçeşehir ve Esenkent'in bütün mahallelerini,cadde ve sokaklarını kapsamaktadır. </p>
<h3>Esenyurt</h3>
<p> Esenyurt şubemiz, Beylikdüzü,Esenyurt ve Avcılar ilçelerinin bütün mahalle,cadde ve sokaklarını kapsamaktadır. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
</body>
</html>
After this change it gave this error.
error looks like this
This is the text in this picture;
NoReverseMatch at /
Reverse for '' with arguments '()' and keyword arguments '{}' not found. 0 pattern(s) tried: []
Request Method: GET
Request URL: http://127.0.0.1:8000/
Django Version: 1.9
Exception Type: NoReverseMatch
Exception Value:
Reverse for '' with arguments '()' and keyword arguments '{}' not found. 0 pattern(s) tried: []
Exception Location: /usr/local/lib/python2.7/dist-packages/django/core/urlresolvers.py in _reverse_with_prefix, line 508
Python Executable: /usr/bin/python
Python Version: 2.7.6
Python Path:
['/home/haydar/haliyikama',
'/usr/lib/python2.7',
'/usr/lib/python2.7/plat-x86_64-linux-gnu',
'/usr/lib/python2.7/lib-tk',
'/usr/lib/python2.7/lib-old',
'/usr/lib/python2.7/lib-dynload',
'/usr/local/lib/python2.7/dist-packages',
'/usr/lib/python2.7/dist-packages',
'/usr/lib/python2.7/dist-packages/PILcompat',
'/usr/lib/python2.7/dist-packages/gtk-2.0',
'/usr/lib/python2.7/dist-packages/ubuntu-sso-client']
Server time: Sat, 7 May 2016 11:15:09 +0000
And this is the line it gives error says debug tool
/usr/local/lib/python2.7/dist-packages/django/core/urlresolvers.py in _reverse_with_prefix
lookup_view_s = "%s.%s" % (m, n)
else:
lookup_view_s = lookup_view
patterns = [pattern for (possibility, pattern, defaults) in possibilities]
raise NoReverseMatch("Reverse for '%s' with arguments '%s' and keyword "
"arguments '%s' not found. %d pattern(s) tried: %s" %
(lookup_view_s, args, kwargs, len(patterns), patterns)) ...
class LocaleRegexURLResolver(RegexURLResolver):
"""
A URL resolver that always matches the active language code as URL prefix.
There are a few issues with your setup; but nothing that's major:
Your file is called haliyikama/first/url.py; but you are including it as url(r'^', include('first.urls')), (note the urls); you need to change the name of your file to haliyikama/first/urls.py.
Your patterns are also incorrect. Your pattern needs to be ^$ for the very first pattern in your url list.
The reason admin is not working, is because you haven't mapped it to any url pattern; try adding url(r'^admin/', admin.site.urls), to your main urls.py.
href="{% url home.html %}" this is not how you use the url tag, you need to pass it the name of the view, not the template; like this href="{% url 'home' %}".
I also suggest you read a quick primer on regular expressions because these are important when defining urls; as they work on the concept of pattern matching.
Here are some quick tips:
Lets say you have a pattern like this url(r'^home/')
This means any url that starts with home/, so it will match home/foo/bar/zoo/hello along with anything else home/hello.html etc. This is why usually when you have an "open ended" pattern like this, you usually include a lot of other urls after it, like this url(r'^home/', include('home.urls')).
Now, when you do url(r'^home/', include('home.urls')) this means "any url that starts with home/, match it against the list of urls found in home/urls.py file".
Lets say in our home/urls.py file, we have:
url(r'^$', views.index),
This ^$ means a blank string, so views.index will be called when the url is http://localhost:8080/home/
Here is another example:
url(r'^members/$', views.members),`
Now this will match home/members/.
Hopefully this helps clarify the issues you are facing. Please have a read through the tutorial which covers these concepts.
The main problem I had was using the URL tags. If you had some problem like this and pop-up in here, here is the answer how I solve my problem with the help I get from Burhan Khalid;
Yes my url tag was wrong but instead of href="{% url home %}" doing something like that I should have do something like href="{% url 'home' %}"
there is not much difference but it will help to call the name so it can send you that link. The Url tags in the HTML file was wrong.