In my Django app i'm using bootstrap-datepicker. User chooses a date, then date is passed in Ajax post request to /check/ view, then sub_template is reloaded with retrieved data.
Everything works like a charm on desktop, but it seems like datepicker doesn't work on phones at all. I've tested it on Iphone 6s, android phone and windows phone(all default browsers). When i press date it just doesn't respond in any way.
Here is my main page html:
<div class="container">
<div class="row text-center">
<h2>Availability</h2>
</div>
<hr>
<div class="row text-center hidden-xs ">
</div>
<div class="row row-pad-30 text-center">
<div class="col-lg-1 md-hidden"></div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h3>1. Choose date</h3>
<form style="color: white;" class="form-date" role="form" action="" method="get">
{% csrf_token %}
<div class="form-group" id="datepicker">
<div></div>
<input data-date-format="YYYY-MM-DD" type="hidden" name="dt_due" id="dt_due" val="">
</div>
</form>
</div>
<div id="refresh-div" class="timedisplay">{% include 'booking/time.html' %}</div>
<div class="col-lg-1 md-hidden"></div>
</div>
</div>
sub page html:
<div class = "col-lg-6">
<h3 class = "h3-hour">2. Choose hour</h3>
<div class="row row-pad-20">
{% for time_list in availability_table %}
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{% for i in time_list %}
<button type="submit" class="fade-in-quick btn btn-lg btn-block btn-info btn-core" value="{{ forloop.counter0 }}" name="time" id="time">{{ i.0|date:'H:i' }} do {{ i.1|date:'H:i' }}</button>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
main page script:
$('#datepicker div').datepicker({
language:"pl",
startDate: "+1d"
}).on('changeDate', function(event) {
var date = event.format()
console.log(date);
$.ajax({
type:'POST',
url: '/check/',
data: {'date': date, 'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()},
success: function(data) {
$('#refresh-div').html(data);
}
});
});
Any idea why it doesn't work?
So apparently this div:
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12"></div>
Was causing problems. When i just deleted all classes after col-lg-4(they are not necessary anyway) everything is working correctly.
Related
<div class="container" id="cd">
<div class="row">
<div class="col-2">
<label for="serialno" class="h4 text-center mx-4"> S.No </label>
</div>
<div class="col-3">
<label for="billno" class="h4 text-center"> Bill No</label>
</div>
<div class="col-5">
<label for="Items" class="h4 text-center"> Items</label>
</div>
<div class="col-2">
<label for="total" class="h4 text-center"> Total</label>
</div>
<hr>
</div>
{% for b,d in history.items %}
<div class="row" id="refresh">
<div class="col-2 py-2">
<label class="h6">{{forloop.counter}}. | {{b.created_at}}</label>
</div>
<div class="col-3 py-2">
<label class="h5">{{b}}</label>
</div>
<div class="col-5 py-2">
{% for i in d %}
<label class="h6">{{i.itemname}} x {{i.qty}} {{i.subtotal}}</label><br>
{% endfor %}
</div>
<div class="col-2 py-2">
<span class="h6">₹</span>
<label class="h6">{{b.grandtotal}}</label>
</div>
</div>
{% endfor %}
</div>
<script>
$(document).on('change','#myform',function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:"{% url 'history' %}",
data:{
tb1:$('#cal').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success:function(response){
},
});
});
</script>
How Can I reload this {% for b,d in history.items() %} without refresh a page using ajax
Any way to change history value using ajax Important Note value processed by onchange event
I am trying to reload the loop without a page reload
I want to change the history.items() django variable value after the ajax call and corressponding values can be iterated
{% for b,d in history.items %}
<div class="row" id="refresh-main">
<div class="row" id="refresh-child">
<div class="col-2 py-2">
<label class="h6">{{forloop.counter}}. | {{b.created_at}}</label>
</div>
<div class="col-3 py-2">
<label class="h5">{{b}}</label>
</div>
<div class="col-5 py-2">
{% for i in d %}
<label class="h6">{{i.itemname}} x {{i.qty}} {{i.subtotal}}</label><br>
{% endfor %}
</div>
<div class="col-2 py-2">
<span class="h6">₹</span>
<label class="h6">{{b.grandtotal}}</label>
</div>
</div>
</div>
{% endfor %}
<script>
$(document).on('change','#myform',function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:"{% url 'history' %}",
data:{
tb1:$('#cal').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success:function(response){
var pageURL = $(location).attr("href");
$('#refresh-main').load(pageURL + ' #refresh-child');
},
});
});
</script>
I'd like to get data from one form that has multiple textareas inside , In my views: 'compare_ingredients' I've tried requesting data from my form id 'compareform' also the textarea id 'ingredients', but when I enter something into one texture and click on submit it comes back as 'None' when I print. Here is my html and views:
html :
<div class="container-fluid">
<h4>Please enter in your ingredients:</h4>
<h6>(Seperate each item by comma)</h6>
<br>
<button class="add_item">Add Item</button>
<br>
<div class="row row-cols-1 row-cols-md-2 mx-auto">
<form action="{% url 'compare_ingredients' %}" method="POST" name="compareform" id="compare">
{% csrf_token %}
<br>
<button type="submit" class="btn btn-info sub_btn">Submit</button>
<button type="submit" class="btn btn-secondary back_button">
Back
</button>
<br>
<br>
<div class="row form_row">
<div class="col mb-4">
<h5>Item 1</h5>
<div class="card form_card">
<div class="card-body compare_cardbody">
<textarea name="ingredients1" id="ingredients" cols="30" rows="10" form="compareform"></textarea>
</div>
</div>
</div>
<div class="col mb-4">
<h5>Item 2</h5>
<div class="card form_card">
<div class="card-body compare_cardbody">
<textarea name="ingredients2" id="ingredients" cols="30" rows="10" form="compareform"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
views.py:
def compare_ingredients(request):
if request.method == "POST":
ingredients = request.POST.get('compareform')
print(ingredients)
return render(request, 'result/compare.html')
ok, I figured it out , the problem was in the html textarea I had the name of the form as 'compareform' when it should have been 'compare' :
<textarea name="ingredients2" id="ingredients" cols="30" rows="10" form="compare"></textarea>
then in my views I did:
ingredients1 = request.POST.get('ingredients1')
I have many items and I want to delete one of them but when I delete one item it turns out that it deletes the last item which exists based on ordering so, if I have 10 records of id which start from 1 to 10 record so, it will remove the item number 10 til if I remove item number 5 will remove the number 10. this case occurs because of popup but if I remove popup and delete the items directly it will remove with no mistake so, How can I remove a particular item using popup?
profile.html
{% if request.user == profile.user %}
<div class="col-lg-7 offset-lg-1 col-12">
{% if profile.user.user_history.all.count != 0 %}
<form method="post">
{% csrf_token %}
<div class="clear_all fl-left">
<input class="global_checkbox" type="checkbox" name="remove_all_history" id="remove_all_history">
<label for="remove_all_history" class="ml">Remove All</label>
</div>
<div class="fl-right">
<input type="submit" value="Remove" class="clear_button btn btn-danger invisible"/>
</div>
</form>
{% else %}
<p class="text-center">you have no history yet!</p>
{% endif %}
<div class="clearfix"></div>
<div class="mt-6"></div>
{% for history in history_pages %}
{% if history.deleted_history == False %}
<div class="history">
<div class="row">
<div class="col-4">
<form method="post">
{% csrf_token %}
<input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
<span class="ml-2">{{ history.history_time|time }}</span>
<div class="ml ml-4">{{ history.history_time|date:'d M Y' }}</div>
</form>
</div>
<div class="history-content col-7">
<p><strong>text:</strong> {{ history.history }}</p>
<p><strong>action:</strong> {{ history.action_option }}</p>
<p><strong>position:</strong>
{% if history.verb_option == "" %}
POS
{% else %}
{{ history.verb_option }}
{% endif %}
</p>
</div>
<form method="post" action="{% url 'accounts:remove_history' history.id %}">
{% csrf_token %}
<div class="history-list col-1">
<span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu">
<a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
</div>
</div>
{% include 'accounts/popup.html' %}
</form>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
popup.html
<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">Warning!!</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 want to remove this history item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-outline-danger">Remove</button>
</div>
</div>
</div>
</div>
views.py
#login_required
def userProfile(request, slug=None):
profile = None
try:
profile = Profile.objects.get(user__slug=slug)
paginator = Paginator(profile.user.user_history.all(), 100)
page_number = request.GET.get('page_number')
history_pages = paginator.get_page(page_number)
except:
return redirect('accounts:index_404')
return render(request, 'accounts/profile.html', {'profile': profile, 'history_pages': history_pages})
def remove_history(request, id=None):
if id and id is not None:
# History.objects.get(id=id)
print(id)
return redirect("accounts:profile", request.user.username)
Note: I tested the delete using print(id)
In your current code you have included popup.html mutliple times so when you click on a tag its not confirm which modal will get open has all are triggering exampleModal i.e :data-target="#exampleModal" .
So , to overcome this one way would be including only one modal and adding form tags around submit button . Then , whenever user click on a tag you can get action value from form where a tag has been clicked and then add this action value inside modal form tag .
Demo Code :
//on click of `a` tag
$(".dropdown-item").on("click", function() {
//get closest form from `a` tag then get action from it
var action_ = $(this).closest("form").attr("action");
$("#exampleModal form").attr("action", action_) //add that action inside modal form tag
console.log(action_)
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="history">
<div class="">
<div class="">
<form method="post">
{% csrf_token %}
<input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
<span class="">12:30</span>
<div class="">12-04-21</div>
</form>
</div>
<div class="history-content">
<p><strong>text:</strong> Somethigs</p>
<p><strong>action:</strong>Ok</p>
<p><strong>position:</strong> POS
</p>
</div>
<form method="post" action="{% url 'accounts:remove_history' 1 %}">
<div class="history-list">
<span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu">
<a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
</div>
</div>
<!--remove this line {% include 'accounts/popup.html' %}-->
</form>
</div>
</div>
<div class="history">
<div class="">
<div class="">
<form method="post">
{% csrf_token %}
<input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
<span class="">12:32</span>
<div class="">22-04-21</div>
</form>
</div>
<div class="history-content">
<p><strong>text:</strong> Somethigs2</p>
<p><strong>action:</strong>Ok2</p>
<p><strong>position:</strong> POS
</p>
</div>
<form method="post" action="{% url 'accounts:remove_history' 2 %}">
<div class="history-list">
<span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu">
<a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
</div>
</div>
<!--remove this line {% include 'accounts/popup.html' %}-->
</form>
</div>
</div>
<!--just use only one modal no need to include it every time on your page-->
<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">Warning!!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--added form tag-->
<form method="post" action="">
<!--added csrf token-->
{% csrf_token %}
<div class="modal-body">
Do you want to remove this history item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-outline-danger">Remove</button>
</div>
</form>
</div>
</div>
</div>
I am using the following UpdateView in order to alter some values in the database:
class MyUpdateView(UpdateView):
model = MyModel
fields = ['VideoURL', 'MainDescription']
template_name = 'myapp/edit.html'
This is my template:
<div class="row">
<div class="col-12 col-lg-7">
<form method='post' class="card shadow-soft border p-4 mb-4">
{% csrf_token %}
<h5 class="mb-4">General</h5>
<div class="form-group">
<label for="MainDescription">Title</label>
{{form.MainDescription|add_class:"form-control shadow-soft"}}
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-dark mt-2 animate-up-2"
type="submit">Update</button>
</div>
</div>
</form>
</div>
<div class="col-12 col-lg-5">
<form method='post' class="card shadow-soft border p-4 mb-4">
{% csrf_token %}
<div class="form-group">
<label for="VideoURL">Video URL:</label>
{{form.VideoURL|add_class:"form-control shadow-soft"}}
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right"
type="submit">Update</button>
</div>
</div>
</form>
</div>
</div>
However, I am facing some difficulties doing so because although both fields belongs to the same model, I cannot update any of the information. What I have noticed though is that if I place the both fields under the same HTML form, it works:
<div class="col-12 col-lg-5">
<form method='post' class="card shadow-soft border p-4 mb-4">
{% csrf_token %}
<div class="form-group">
<label for="VideoURL">Video URL:</label>
{{form.VideoURL|add_class:"form-control shadow-soft"}}
</div>
<div class="form-group">
<label for="MainDescription">Main Description:</label>
{{form.MainDescription|add_class:"form-control shadow-soft"}}
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right"
type="submit">Update</button>
</div>
</div>
</form>
</div>
What am I missing here? Can anyone give me a hint? Thanks
Edit
It's due to how the forms are being displayed in the HTML form. They should be independent:
My Flask app already serves up several pages. I just made channels.html. For a route, I copied down and changed /messages, which already works. I then tried adding a link from messages.html to channels.html, but received the error: Could not build url for endpoint 'channels'. Did you mean 'index' instead? The error references the line Channels in messages.html. I checked spelling, syntax, decorator placement, and duplicative names; everything looks ok. Plus, the new code was built off of code that was previously tested.
So, why the error?
#app.route('/channels', methods=["GET", "POST"])
def channels():
return render_template("channels.html")
#app.route('/messages', methods=["GET", "POST"])
def messages():
return render_template("messages.html")
messages.html (top part)
{% extends "layout.html" %}
{% block body %}
<div class="container">
<div class="row" style="min-height: 100vh">
<div class="col-md-3 border border-danger rounded">
<div class="row mt-2 justify-content-start">
Header
</div>
<!-- <div class="row mt-2 justify-content-start" id="channelHeader">
Channels
</div>-->
<div class="row mt-2 justify-content-start" id="channels">
Channels
</div>
<div class="row justify-content-start" id="dmsg">
Direct Messages
</div>
</div>
<div class="col-md-9 border border-danger rounded">
{% endblock %}
channels.html
{% extends "layout.html" %}
{% block body %}
<div class="container">
<div class="display-3">
<strong>Create A Channel</strong>
</div>
<form action="{{ url_for('channels') }}" id="channelForm" class="mt-4">
<!-- Will need check for duplicate email -->
<div class="form-group">
<label for="channelName">Channel Name</label>
<input type="text" class="form-control" id="channelName" aria-describedby="channelName" placeholder="Enter Channel Name">
</div>
<!-- Will need check for duplicate username -->
<div class="form-group">
<label for="inviteUsers">Invite Other Users (optional)</label>
<input type="text" class="form-control" id="inviteUsers" aria-describedby="inviteUsers" placeholder="Search by name">
</div>
<div class="form-group">
<label for="purpose">Purpose</label>
<textarea type="text" class="form-control" id="purpose" rows="3" placeholder="Purpose">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{% endblock %}