I get data using ajax with button load more, and if it's not have next pages, it will render "all data has been displayed"
index.html
<div class="panel-body">
<div id="display-data">
<span id="loading-help">Loading data. . .</span>
</div>
</div>
<script>
var page = 1
$(document).ready(function(){
$.get("{% url 'account:profile' %}?param=get_data&page="+page,
function(data){
$("#display-data").append(data)
$("#loading-help").remove()
page++
})
</script>
data-ajax.html
{% for data in datas %}
<div class="list-trx-data">
<div class="row align-items-center">
<div class="col-md-8">
<div class="row align-items-center">
<div class="col-md-4 col-sm-12 col-12 data-date">
{{data.get_formatted_date}}</div>
<div class="col-md-8 col-sm-12 col-12 data-name">
{{data.get_data}}</div>
</div>
</div>
<div class="col-md-4">
<div class="row align-items-center">
<div class="col-md-6 col-8 data-amount">
{{data.get_formatted_amount}}</div>
<div class="col-md-6 col-4 ">
<div class="data-progress">
<div class="pg-bar" style="width:
{{data.get_data.get_progress_str}}"></div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% if datas.has_other_pages %}
{% if datas.has_next %}
<a href="javascript:void(0)" class="btn btn-ghost btn-block mt-2"
id="load-more-btn">Load More</a>
{% else %}
<a href="javascript:void(0)" class="btn btn-ghost btn-block mt-2"
id="load-more-btn">All data has been displayed</a>
{% endif %}
{% endif %}
<script>
$("#load-more-btn").click(function(){
$.get("{% url 'account:profile' %}?param=get_data&page="+page,
function(data){
$("#display-data").append(data)
page++
})
})
</script>
I have try it but it's render all button
before click load more
after click load more
how to fix it ?
Firstly, don't place javascript in the data-ajax.html. All the javascript code should be placed in index.html, where all the logics need to be implemented. If there is not other data, data-ajax.html returned should be empty.
data-ajax.html
{% for data in datas %}
<div class="list-trx-data">
<div class="row align-items-center">
<div class="col-md-8">
<div class="row align-items-center">
<div class="col-md-4 col-sm-12 col-12 data-date">
{{data.get_formatted_date}}</div>
<div class="col-md-8 col-sm-12 col-12 data-name">
{{data.get_data}}</div>
</div>
</div>
<div class="col-md-4">
<div class="row align-items-center">
<div class="col-md-6 col-8 data-amount">
{{data.get_formatted_amount}}</div>
<div class="col-md-6 col-4 ">
<div class="data-progress">
<div class="pg-bar" style="width:
{{data.get_data.get_progress_str}}"></div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% if datas.has_other_pages %}
{% if datas.has_next %}
<a href="javascript:void(0)" class="btn btn-ghost btn-block mt-2"
id="load-more-btn">Load More</a>
{% endif %}
In your index.html, check if ajax call returned anything, if not, then change button text, else, remove the button element, since your data-ajax.html already has button based on {% if datas.has_other_pages %}.
index.html
<div class="panel-body">
<div id="display-data">
<span id="loading-help">Loading data. . .</span>
</div>
</div>
<script>
$(document).ready(function(){
var page = 1; //page defined in $(document).ready()
function getData(){
$.get("{% url 'account:profile' %}?param=get_data&page="+page, function(data){
$("#loading-help").remove();
if (data){
// data was received
$("#loading-help").remove();
$("#load-more-btn").remove(); # remove the load button if data is there.
$("#display-data").append(data);
page++;
} else {
$("#load-more-btn").text("All data has been displayed"); # else, change button text.
}
});
}
getData(); //Load data for the first time.
$("#load-more-btn").click(function(){
getData(); //Load data on button click.
});
</script>
I am getting this error while submitting an ajax request using django.
The funny thing is if I execute these commands by hand when the debugger hits it works.
Here is the views.py
def lhr_search_custodians(request):
print request
print request.GET
print "blah"
# pdb.set_trace()
if request.method == 'GET':
search_text = request.GET.get('search_text')
else:
search_text = ''
custodians = Person.objects.filter(last_name__contains=search_text)
context = {'custodians': custodians}
return render(request, 'corpsec/legalholdrequests/create.html', context)
Here is the javascript query.js
$(function () {
$('#custodian_search').keyup(function (){
console.log("search fired!!!");
$.ajax({
url: "new/search_custodians",
type: "GET",
data: {
'search_text' : $('#custodian_search').val(),
'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
},
success : searchSuccess,
dataType: 'html',
error: function(xhr, errmsg, err) {
$('#results');
}
});
});
});
function searchSuccess(data, textStatus, jqXHR) {
$('$search_results').html(data);
}
this is the template create.html
{% extends "blackbox/show.html" %}
{% load static from staticfiles %}
{% load formtags %}
{% block title %}
New Legal Hold Request | {{ block.super }}
{% endblock title %}
{% block javascript %}
{{ block.super }}
{% endblock javascript %}
{% block show_header_title %}
<h4>
New Legal Hold Request
</h4>
{% endblock show_header_title %}
{% block tab_menu %}
<li class="tab">
<a id="id_modal_matter"
href="#matter">
Matter
</a>
</li>
<li class="tab">
<a id="id_modal_custodians"
href="#custodians">
Custodians
</a>
</li>
<li class="tab">
<a id="id_modal_electronic_databases"
href="#databases">
Electronic Databases
</a>
</li>
<li class="tab">
<a id="id_modal_collection"
href="#collection">
Collection
</a>
</li>
{% endblock tab_menu %}
{% block tab_content %}
<form action="/corpsec/legalholdrequests/new"
role="form"
method="post">
<span id="csrfmiddlewaretoken">{% csrf_token %}</span>
{% if form.errors %}
<div class="alert alert-dismissable alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Error.</strong> Please correct the following errors:
<small>{{ form.errors }}</small>
</div>
{% endif %}
<div class="row">
<div class="col s12">
<button id="id_form_submit"
type="submit"
class="btn right">
Submit
</button>
</div>
</div>
<div class="row">
<div id="matter" class="col s12">
<div class="row">
<div class="col s12 m8 offset-m2">
<div class="card">
<div class="card-content">
{{ form.matter_name|bsf_field }}<br/>
{{ form.matter_number|bsf_field }}<br/>
{{ form.matter_category|bsf_field }}<br/>
{{ form.priority_rating|bsf_field }}<br/>
{{ form.preservation|bsf_field }}<br/>
{{ form.issue_start|bsf_field }}<br/>
{{ form.issue_stop|bsf_field }}<br/>
{{ form.market_area|bsf_field }}<br/>
{{ form.attorney|bsf_field }}<br/>
{{ form.paralegal|bsf_field }}<br/>
{{ form.risk_manager|bsf_field }}<br/>
{{ form.category|bsf_field }}<br/>
</div>
</div>
</div>
</div>
</div>
<div id="custodians" class="col s12">
<div class="row">
<!-- search card -->
<div class="col s12 m3">
<div class="card">
<div class="card-content">
<span class='card-title'>Search Custodians</span>
<script src="{% static 'js/ldap-lookup.js' %}" type="text/javascript"></script>
<script src="{% static 'js/custodian_query.js' %}" type="text/javascript"></script>
{% csrf_token %}
<input type="text" id='custodian_search' name="search">
</div>
</div>
</div>
<!-- results section placeholder for now-->
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<span class="card-title"> Results</span>
<ul id="search_results">
</ul>
</div>
</div>
</div>
<!-- action section -->
<div class="col s12 m3">
<div class="card">
<div class="card-content">
<span class="card-title">Action</span>
</div>
</div>
</div>
</div>
</div>
<div id="databases" class="col s12">
<div class="row" class='database_1'>
<div class="col s12 m8 offset-m2">
<div class="card">
<div class="card-content">
<div class="row">
{{ database_and_criteria_1.database|bsf_field }}<br/>
{{ database_and_criteria_1.criteria|bsf_field }}<br/>
</div>
</div>
<div class="card-action">
<button class='btn waves-effect waves-light' id='show_next_button' type="button" name="button">Add Database and Criteria</button>
</div>
</div>
</div>
</div>
<div class="row" id='database_2' style="display: none;">
<div class="col s12 m8 offset-m2">
<div class="card">
<div class="card-content">
<div class="row">
{{ database_and_criteria_2.database|bsf_field }}<br/>
{{ database_and_criteria_2.criteria|bsf_field }}<br/>
</div>
</div>
<div class="card-action">
<button class='btn waves-effect waves-light' id='show_next_button_2' type="button" name="button">Add Database and Criteria</button>
<button class='btn waves-effect waves-light red' id='remove_db_criteria_2' type="button" name="button">Remove</button>
</div>
</div>
</div>
</div>
<div class="row" id='database_3' style="display: none;">
<div class="col s12 m8 offset-m2">
<div class="card">
<div class="card-content">
<div class="row">
{{ database_and_criteria_3.database|bsf_field }}<br/>
{{ database_and_criteria_3.criteria|bsf_field }}<br/>
</div>
</div>
<div class="card-action">
<button class='btn waves-effect waves-light red' id='remove_db_criteria_3' type="button" name="button">Remove</button>
</div>
</div>
</div>
</div>
</div>
<div id="collection" class="col s12">
<div class="row">
<div class="col s12 m8 offset-m2">
<div class="card">
<div class="card-content">
<h4>Files<br/></h4>
{{ collection_form.email|bsf_field }}<br/>
{{ collection_form.netshare|bsf_field }}<br/>
{{ collection_form.computer_data|bsf_field }}<br/>
{{ collection_form.group_shares|bsf_field }}<br/>
{{ collection_form.pst_files|bsf_field }}<br/>
{{ collection_form.mobile_device|bsf_field }}<br/>
{{ collection_form.drive_cam_event_number|bsf_field }}<br/>
{{ collection_form.other_data_instructions|bsf_field }}<br/>
<h4>Processing</h4><br/>
{{ collection_form.processing_deadline|bsf_field }}<br/>
{{ collection_form.emails_attachments|bsf_field }}<br/>
{{ collection_form.everything|bsf_field }}<br/>
{{ collection_form.dedupe_matter|bsf_field }}<br/>
{{ collection_form.dedupe_custodian|bsf_field }}<br/>
{{ collection_form.keywords|bsf_field }}<br/>
{{ collection_form.archive_start|bsf_field }}<br/>
{{ collection_form.archive_stop|bsf_field }}<br/>
{{ collection_form.review_platform_external|bsf_field }}<br/>
{{ collection_form.delivery_instructions|bsf_field }}<br/>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$('#show_next_button').click(function() {
document.getElementById('database_2').style.display = 'block';
});
$('#show_next_button_2').click(function() {
document.getElementById('database_3').style.display = 'block';
});
$('#remove_db_criteria_2').click(function() {
document.getElementById('database_2').style.display = 'none';
});
$('#remove_db_criteria_3').click(function() {
document.getElementById('database_3').style.display = 'none';
});
</script>
{% endblock tab_content %}
I have a list of articles in my data and one of the fields is a link to an image. I'm using jeykll-assets, and I would like to load the images using the asset_path. However, the following isn't working:
{% for article in site.data.press %}
<div class="press-item">
<div class="press-image">
<div class="centerit"></div>
<a href="{{ article.url }}" target="_blank">
<img src="{% asset_path article.logo %}" />
</a>
</div>
<div class="press-excerpt">
<a href="{{ article.url }}" target="_blank">
<p>{{ article.title }}</p>
</a>
</div>
<div class="date">{{ article.date }}</div>
</div>
{% endfor %}
Specifically <img src="{% asset_path article.logo %}" /> because it doesn't load article.logo dynamically. What's the correct way to do this?
Use brackets like this : <img src="{% asset_path {{ article.logo }} %}" />
See https://github.com/jekyll/jekyll-assets#liquid-variables
Trying to create a component under October CMS which create a ToDo list (Look at this video). Adding an item works fine but now I'm trying to set up and Ajax handler to delete one element when a button is clicked.
Thi is the html code:
<form>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Tasks assigned to: {{ __SELF__.name }}</h3>
</div>
<div class="panel-body">
<div class="input-group">
<input name="task" type="text" id="inputItem" class="form-control" value="" \>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary"
data-request="{{ __SELF__ }}::onAddItem"
data-request-success="$('#inputItem').val('')"
data-request-update="'{{ __SELF__ }}::tasks': '#result'"
>Add</button>
</span>
</div>
<ul class="list-group" id="result">
{% partial __SELF__ ~ '::tasks' tasks=__SELF__.tasks removeId=__SELF__.removeId %}
</ul>
</div>
</div>
<form>
and the code of the component (named tasks) that render the list of tasks:
{% if tasks|length > 0 %}
{% for i in 0..tasks|length-1 %}
<li class="list-group-item">
{{ tasks[i] }}
<button class="close pull-right"
data request="{{ __SELF__ }}::onRemoveItem"
data-request-success="console.log(data)"
>
×
</button>
</li>
{% endfor %}
{% endif %}
Lastly the code of the handler (don't do so much):
public function onRemoveItem()
{
return [
'Name' => 'Federico';
];
}
Now, I set up the handler onRemoveItem putting its data-request in a button and, as explained on this page, clicking the button should start the handler's execution but this don't happen, while all works correctly in the Add button that insert the tasks in the database.
Can someone explain me what I'm doing wrong?
(In case someone want to see the page the link is http://afterlife.ddns.net/
EDIT:
Solved, I had to link the framework js in the layout file
This question already has an answer here:
Django template/view issues with carousel
(1 answer)
Closed 7 years ago.
OK, so here's the deal:
This is currently what I'm working on:
See the two arrows at the top? That's where a carousel of pictures should be. However, there are no pictures in this carousel. That is, until I click the 'Upload' Button.
So, my goal is to make the pictures appear on the first page before I even click the 'upload' button.
How can I fix this problem? I'm kind of a noob at Django, and writing this code is like pulling teeth.
My code:
Index.html
{% extends 'webportal/defaults.html' %}
{% block body %}
{% include 'webportal/carousel.html' %}
<br/>
<div class="container">
<div class="row">
<div class="col-md-12">
<p> So far we have been able to establish what the user tables will be have created or are in process of
creating
the ability to create, update, destroy users.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p> For now this ability is limited to the main user table, however the models will be easily extended
to other
tables as they are needed</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p> Also not a lot of thought has gone into styling yet, we know that the page is suppose to resemble
the parent
organizations page. Right now we have been more focused on getting each individual component
working. Later we
will merge them into a whole. </p>
</div>
</div>
</div>
{% include 'webportal/info_row.html' with one=one two=two three=three %}
{% endblock %}
Carousel.html:
{% load staticfiles %}
{% load filename %}
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
{% for document in documents %}
<div class="item {% if forloop.first %} active {% endif %}">
<div class="row">
<div class="col">
<li>{{document.docfile.name}}</li>
<img src = "{{STATIC_URL}}img/{{document|filename}}" >
<p align="center"><form style="text-align:center" action="{% url 'webportal:delete' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ form.non_field_errors }}</p>
<p>{{ form.Document.label_tag }} {{ form.Document.help_text }}</p>
<p>
{{ form.Document.errors }}
{{ form.Document.docfile }}
</p>
<p><input type="submit" value="Delete" /></p>
</form></p>
</div>
</div>
</div>
{% endfor %}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /.carousel -->
</div>
</div>
<form action="{% url 'webportal:carousel' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ form.non_field_errors }}</p>
<p>{{ form.docfile.label_tag }} {{ form.docfile.help_text }}</p>
<p>
{{ form.docfile.errors }}
{{ form.docfile }}
</p>
<p><input type="submit" value="Upload" /></p>
</form>
</div>
Views.py:
from django.shortcuts import render
from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth import authenticate, login
from webportal.views.authentication import LoginForm
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.http import HttpResponseRedirect
from django.http import HttpResponse
from django.core.urlresolvers import reverse
from django.conf import settings
from webportal.forms.forms import DocumentForm
from webportal.models import Document, DeleteForm
is_server = True
def delete(request, my_id):
Deleted=get_object_or_404(Document, docfile=my_id)
if request.method=='POST':
form=DeleteForm(request.POST, instance=Deleted)
if form.is_valid():
Deleted.delete()
return HttpResponseRedirect('http://127.0.0.1:8000/alzheimers/')
else:
form=DeleteForm(instance=Deleted)
return render_to_response(
'webportal/index.html',
{'documents': documents, 'form': form,},
context_instance=RequestContext(request)
)
# Redirect to the document list after POST
def carousel(request):
# Handle file upload
if request.method == 'POST':
form = DocumentForm(request.POST, request.FILES)
if form.is_valid():
newdoc = Document(docfile = request.FILES['docfile'])
newdoc.save()
# Redirect to the document list after POST
return HttpResponseRedirect('http://127.0.0.1:8000/alzheimers/')
else:
form = DocumentForm() # A empty, unbound form
# Load documents for the list page
documents = Document.objects.all()
#documents=DocumentForm().
# Render list page with the documents and the form
return render_to_response(
'webportal/index.html',
{'documents': documents, 'form': form,},
context_instance=RequestContext(request)
)
Models.py:
class Document(models.Model):
docfile = models.ImageField(upload_to='webportal/static/img/')
class DeleteForm(ModelForm):
class Meta:
model=Document
fields=[]
Forms.py:
class DocumentForm(forms.Form):
docfile = forms.ImageField(label='Select a file', help_text='max. 42 megabytes')
URls.py:
from django.conf.urls import patterns, url
from webportal.views import views, register, authentication, welcome, search, profile, event, csv_export, role_creation, \
edit_event, reports, accounts
urlpatterns = patterns('',
url(r'^reports', reports.report_page),
url(r'^search/criteria', search.get_criteria),
url(r'^search', search.search_page),
url(r'^register', register.SignUpView.as_view(), name="register"),
url(r'^login', authentication.login_view, name="login"),
url(r'^carousel', views.carousel, name="carousel"),
url(r'^delete', views.delete, name="delete"),
url(r'^profile', profile.ProfileView.as_view(), name="profile"),
url(r'^welcome', welcome.WelcomeView.as_view(), name="welcome"),
url(r'^event/creation', event.Creation.as_view(), name="event_creation"),
# url(r'^role_creation', role_creation.Creation.as_view(), name="role_creation"),
url(r'^csv_export', csv_export.CSVExport.as_view(), name="csv_export"),
url(r'^csv_import', reports.upload_file, name="csv_import"),
url(r'^logout$', 'django.contrib.auth.views.logout', {'next_page': '/alzheimers/'}),
url(r'^edit_event', edit_event.EditView.as_view(), name='edit_event'),
url(r'^parse_ajax', profile.parse_ajax),
url(r'^event/role_ajax', role_creation.ajax),
url(r'^event/all', event.view_all),
url(r'^event/information', event.ajax),
url(r'^accounts/personal', accounts.personal),
url(r'^accounts/create', accounts.create),
url(r'^accounts/edit', accounts.edit),
url(r'^accounts/remove', accounts.remove),
url(r'^$', views.bootstrap),
)
If there is a way to do this, does it involve ajax? I asked this again because of a lack of an adequate answer.
You should pass the documents context variable to the template in the view which handles the /alzheimers/ page.
UPDATE: The view you should change is the views.boostrap(). So rendering of the template will be something like this:
def bootstrap(request):
...
return render_to_response('webportal/bootstrap.html',
{'documents': Document.objects.all()},
context_instance=RequestContext(request)
)