I would like to update a template with Ajax.
My problem is:
I select a client in a list on the form and display only the corresponding data in an another list on the same page in a second list
At this time, I can not update my template with protocols corresponding to the client
In my views, I try to create a list with a queryset (it works)
but I cannot update my template with the new list
I retrieve the selected client but when I post with render_to_request
it does not update the template
Is there any possibility to do that and how can I update my list with the ajax part of the program.
You can use something like this:
(based on https://stackoverflow.com/a/21762215/5244995)
second_list.tmpl (template)
{% for value in corresponding_data %}
<li>{{ value }} (replace with your own templating)</li>
{% endfor %}
views.py
def update_second_list(request, ob_id):
# (get the data here)
return render('second_list.tmpl', {'corresponding_data': ...}
JS script on main page (uses jQuery)
$.ajax({url:"", dataType:"text", success: function(html) {
var newDoc = $.parseHTML(html, document, false); // false to prevent scripts from being parsed.
var secondList = $(newDoc).filter(".secondList").add($(newDoc).find(".secondList"));
$(".secondList").replaceWith(secondList); // only replace second list.
// other processing
}});
Related
I have own plugin in October CMS what have a onFilter() function whats return and displays partials with data. When user click on name it redirect him to a detail page. And when user click back button in browser I want to display his last search.
I tried something like Session::push('data', $data) in onFilter() method and Session::get('data') in onInit() but it didnt work. $data is a list of pubs.
Had anyone same problem?
Edit
public function onFilter()
{
$result =
Lounge::filterLounge($categories, $tags, $regions, $paidIds, $price_from, $search);
Session::put('nameFilter', $result);
return [
'#list' => $this->renderPartial('loungelist::list.htm', [
'list_data' => $result])
];
}
public function getNameFilter() {
$nameFilter = Session::get('nameFilter');
return $nameFilter;
}
In partial .htm
{% set list_data = __SELF__.getNameFilter() %}
{% for lounge in list_data %}
{{ lounge.name }}
{% endfor %}
As #mwilson mentions I would use window.history on the front end with the pushstate() function so that when each filter is changed you push state including query strings before firing to php to get the filtered content. I have done this before and works very well.
You should post more code for us to be more helpful. I am assuming you are using a component. Are you using ajax? Session will do the job.
In your component.php put onNameFilter() event you can push the data into the session with Session::put('nameFilter' $data);. I suggest using more specific labels for your events and keys so I chose 'nameFilter'.
You will want to use a method in your component.php to call the session.
public function getNameFilter() {
$nameFilter = Session::get('nameFilter');
return $nameFilter;
}
Now in your partial.htm you can set the name filter data and access it as long as it is in the session:
{% set nameFilterData = __SELF__.getNameFilter() %}
EDIT TO SHOW REFLECTED CODE
I don't understand how it works the first time. What does your CMS Page look like? How do you show the filter the "first time"?
Your CMS Page has {% component 'something' %} right? Then in your default.htm file you have {% partial __SELF__~'::list %}?
In your partial you will need to display the list_data. Does this show anything?
{% for list in list_data %}
{{ list_data.name }}
{% endfor %}
This is driving me crazy. I am building an ecommerce app, with the cart in Django-carton. When I add an item to the cart, I can get the item's id from the context into the store, and pass it into my Ajax call and to the view when a customer adds the item with a button click.
I want the customer to be able to delete and edit quantities in the cart using a button, and am now trying to create my delete and my edit quantity functions. I'm stuck because I don't understand how to pass the id the the view in Ajax. The id isn't in the item context object. I can get the id in the view by printing ids = request.session['CART'], but it does not have the current id. The items in context are limited to the following:
self.product = product
self.quantity = int(quantity)
self.price = Decimal(str(price))
The example in Django-carton's documentation has this example, which doesn't use Javascript:
views:
def remove(request):
cart = Cart(request.session)
product = Product.objects.get(id=request.GET.get('id'))
cart.remove(product)
return HttpResponse("Removed")
urls:
u`rl(r'^remove/$', 'remove', name='shopping-cart-remove'),`
In my view, I can get the ids of all of the objects in the cart with
cart = Cart(request.session)
ids = request.session['CART']
which gives me the following object:
{u'meal_pk': 15, u'price': u'5', u'quantity': 39}
But this doesn't actually seem helpful. This is my first encounter with sessions. I've been reading through the code here https://github.com/lazybird/django-carton/blob/master/carton/cart.py How can I edit or delete an item in my cart?
You can still call the remove view via AJAX quite easily with Javascript; unless otherwise specified, the view does not care if the request is submitted via AJAX. So, we can set that up easily w/ JQuery.
So, in a template showing the shopping cart, for example:
{% load carton_tags %}
{% get_cart as cart %}
<script type="text/javascript" src="path/to/jquery.js">/script>
{% for item in cart.items %}
<a onclick='AjaxRemove("{% url 'shopping-cart-remove' %}?id={{ item.product.id }}")'>Remove this item</a>
{% endfor %}
<script type="text/javascript">
function AjaxRemove(remove_url) {
$.ajax({
url: remove_url,
success: function(response) {alert(response);},
error: function() {alert("Couldn't remove item");}
})
</script>
will remove the item and give an alert if the AJAX request responds with success.
You can further customize the view response to respond differently to AJAX requests using request.is_ajax():
def remove(request):
cart = Cart(request.session)
product = Product.objects.get(id=request.GET.get('id'))
cart.remove(product)
if request.is_ajax():
# do something, respond differently
return HttpResponse("Removed (via AJAX)")
return HttpResponseRedirect(reverse('shopping-cart-show'))
Im trying to do what is suggested here: How to reopen a Django form in a jQuery dialog when the form validation fails in the backend?
But I don't have enough points to add a comment there..
In my base html page i have a link which opens a dialog with a Django-form. I use the jquery load() to fill the Dialog with this child-html-template. In this child template i have a submit button. I'm trying to bind this button to an ajax function that will:
Post the form to the right URL
Fetch the response from Django view (the form as HTML to be able to show valdidation errors)
Replace the content in the dialog box with the data i get back from the submit-POST.
Is this possbible? Been working on this for days now and i just cant make it happen. Can somone post an example with code to end my suffering.. It's the ajax that is my biggest problem.
Where should i put the script? In the base or the child template? Do you have any alternative solutions?
Thank you!
I did this not long ago in. I found it easier to send the errors in json, and then handle them client-side and attach them to the relevent fields. Like so:
Use ajax to load the form from a view into the jQuery dialog box
When the user sends the data send the information to same view
If validation fails, send errors as a json array. Use js on client-side to attach them to the relevant fields
If succeeds send a positive response of some kind
Check out this excellent example for reference
edit
Here's a working example. Not sure I'm using the best methods to do this, but I think it's pretty understandable. Also, I'm not accounting for the possibility of non-ajax form submit (it's easy enough to do, some logical conditioning using form.is_ajax() and see example linked above for further reference).
So first the views (ContactForm is the same as the one linked):
import json
from django.http import HttpResponse
from django.shortcuts import render_to_response
def home(request):
return render_to_response('index.html') #nothing special here
from django.views.decorators.csrf import csrf_exempt
from cStringIO import StringIO
#csrf_exempt #you should use csrf, I'm just skipping this for the example
def contact(request):
if request.method == 'POST':
form = ContactForm(request.POST)
response = {}
if form.is_valid():
response["status"] = "OK"
# save the data, or do whatever.
else:
response["status"] = "bad"
response.update(form.errors)
# now just to serialize and respond
s = StringIO()
json.dump(response, s)
s.seek(0)
return HttpResponse(s.read())
else:
form = ContactForm() # An unbound form
return render_to_response('contact.html', {
'form': form,
})
As you can see, if there's nothing here you get an html with the form, if not, you get a json response with an object called response which contains 'status' and might also contain errors. I'm using StringIO with json.dump(data, file) as it has always proved the least buggy and most fluent way I ever used to serialize to json (seriously. You won't believe how easily it can break).
Now let's go over the client side:
base.html:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
contact.html:
{% extends 'base.html' %}
{% block content %}
<form method="post" id='myform'>
{{ form.as_p }}
</form>
{% endblock %}
and finally, the main.html with the relevant js. This is where the magic happens:
{% extends 'base.html' %}
{% block content %}
<button class='btn'>Contact!</button>
<div id="dialog-modal">
</div>
<script>
$(function() {
$('button').on('click', function() {
// first things firts, fetch the form into the dialog
$('#dialog-modal').load('contact/ #myform');
// initiate dialog
$('#dialog-modal').dialog({
height: 450,
modal: true,
// I'm using the built-in buttons, but you can use your own
buttons: {
Send: function() {
var dialog = $(this),
form = $('#myform'),
data = form.serialize();
$('.off').remove(); // this is to avoid duplicates
// run ajax post call
$.ajax({
url: 'contact/',
data: data,
type: 'post',
// if successful print response
success: function(response) {
res = $.parseJSON(response);
// if form was successful:
if (res['status'] == 'OK') {
// form was successful
alert('Thank you! Form has been submitted'); // say thank you
dialog.dialog('close'); // close dialog
}
// if not...
else if (res['status'] == 'bad') {
delete res['status'] // we don't need this anymore...
var errors = res; // just for simplicity
$.each(errors, function(key, value) {
// i.e. key='subject' and value is the error message itself
var err = $('<span></span>', {
'class': 'off',
'text': value
}),
br = $('<br></br>', {
'class': 'off',
}),
input = $('#id_'+key).parent(); //find the parent div for the relevant input by key
// add a small break
br.appendTo(input);
// add the error
err.appendTo(input);
// add some styling
err.css('color', 'red').css('font-size', '10px');
});
}
}
});
}
}
});
});
});
</script>
{% endblock %}
Hope that's not too much. Here's an image how it looks after attempting to send:
Pick it up from here. There's a lot of room to play around and extend this.
Good luck!
(I'm using jquery and django)
Let's say I have a todo list, with each item having a unique primary key (pk). In the template, I list these items with a for loop so that each item is clickable, to display item details on another portion of the page (without reloading the entire page of course).
What is the generally accepted best way to do this?
I have tried multiple ways of "uniqueifying" each div, and multiple ways of passing this pk along in the ajax request.
Part 1 - getting unique divs:
I put the pk as the suffix to each item div's id. e.g. {% for item
in todolist %} stuff
$('body').on('click',"#item_{{item.pk}}", function(){var id = {{item.pk}}, .ajax stuff })
{% endfor %}
instead of suffixing pk, I add a custom html attribute called
data-id. This allows me to use .attr("data-id") to get the pk from
the clicked div and to remove the js from the for loop.
instead of adding a custom html attribute, I add a hidden form field.
Part 2 - passing pk to ajax request:
in the $.ajax() body, I set url: id+"/details" with the data field empty. In Django, I grab the id from the url regex definition.
in the $.ajax() body, I set url: "/details" with data: {id:id}. In Django, I grab the id from inside views.py with request.POST['id'].
in js, I just submit the form. Django gets the id as a form field.
So... with so many (probably bad) ways of doing this, which would you use?
I will go for a single ajax function and it should be:
{% for item in todolist %}
<div id="{{item.id}}" class="item_ajax" >{{item.name}}</div>
{% endfor %}
<script>
$('.item_ajax').click(function(){
$.ajax({
type: 'POST',
url: '{% url item_url %}',
data: {'id': $(this).attr('id'), 'csrfmiddlewaretoken': '{{csrf_token}}'},
dataType: "text",
success: function(response) {
// do something
},
error: function(rs, e) {
alert(rs.responseText);
}
});
});
</script>
I have used a class selector, obviously you can choose what ever you like e.g. having a custom attribute but it should be common.
I have a 4 column table of products in template,each item in table has an anchor with onclick like this:
<div id="tablepro">
<table>
<tr>
{% for product in cat.products.all %}
{% if forloop.counter|divisibleby:4 %}
</tr>
<tr>
<td><center>delete</br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>
{% else %}
<td><center>delete</br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>
{% endif %}
{% endfor %}
</table>
</div>
in remove function I have :
function remove(id)
{
var URL='{% url CompanyHub.views.catDetails company.webSite,cat.id %}';
URL+='delpro/'+id+'/';
$.ajax({
url:URL,
type:'POST',
complete:function(){
var str='<table><tr>';
{% for product in cat.products.all %}
{% if forloop.counter|divisibleby:4 %}
str+='</tr><tr>';
str+='<td><center>delete</br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>';
{% else %}
str+='<td><center>delete</br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>';
{% endif %}
{% endfor %}
str+='</table>';
$('#tablepro').html(str);
},
error:function(){
alert('Error');
}
});
}
in views.py :
def deleteProduct(request,key,cat_id,pro_id):
try:
company=Company.objects.get(webSite__iexact=key)
except Company.DoesNotExist:
Http404
cat=Category.objects.get(pk=cat_id)
if pro_id:
try:
product=Product.objects.get(pk=pro_id)
product.delete()
except Product.DoesNotExist:
Http404
return render_to_response('CompanyHub/Company/%s/cat_details.html'%(company.theme),{'company':company,'cat':cat}, context_instance=RequestContext(request))
as U see I've returned cat object that now a product object has removed from its list,but I can't get my Div updated in template!that sounds like cat object has not been updated in template tag.
any suggestion is appreciated
Template are compiled on server side and the browser renders the HTML.
To update your div after ajax call, you'd need to update it using javascript code in complete method. Your server side view can return JSON, XML, HTML or any other data type and your complete method has to render that data. Here is an example of how your complete method should look like if your server side returns partial html (i.e. just the table):
complete:function(data) {
$('#tablepro').html(data);
},
Remember that templates are compiled on the server side and the resulting HTML is then passed to the client. This means that the template code you have within your complete function (in the ajax call) will always be the same - in other words, every time you delete an element (and remove is called), you are redisplaying all the original categories again, as the HTML generated within the for loop is created on the server side once - not asynchronously