Why generating pagination links raises 'Call to undefined method'? - pagination

I've got an problem. This is my first time using pagination.
This is my view:
#extends('base')
#section('title', 'News')
#stop
#section('main')
#if ($news->count())
#foreach($news as $news)
<div class="container">
<div class="doc-content-box">
<legend>{{ $news->title }} <div id="spaceholder"></div>
<p>
<h6><span class="muted"><i class="icon-calendar"></i> {{ $news->created_at }} {{ $news->author }}<span>
</p>
</h6>
</legend>
<div style="margin-top:7px">
<p>{{ $news->content }}</p>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="{{ URL::route('news.edit', $news->id) }}"><i class="icon-pencil"></i> Edit</a>
<a class="btn btn-danger" href="{{ URL::route('news.destroy', $news->id) }}"><i class="icon-trash icon-large"></i> Delete</a>
</div>
</div> <!-- /container -->
<div id="spaceholder"> </div>
#endforeach
{{ $news->links() }}
#else
<div class="container">
<div class="doc-content-box">
<legend>News</legend>
<p>There are no news.<br /><br />If you wish to create a news, you should go to our news management page!</p>
</div>
</div>
#endif
#stop
Then it results into an error Call to undefined method Illuminate\Database\Query\Builder::links().
I've also tried changing #foreach($news as $news) to #foreach($news->results as $news), but then I get an new error:
Undefined property: Illuminate\Pagination\Paginator::$results
The paginator itself works, but the pagination links (next and previous) won't work.

This happens when your query has not been executed. Your variable $news is a query builder not an array of objects. Before calling:
$news->links();
You need to execute your query by calling:
$news = $news->get();
Then after calling the get() method it will return an array representing the result set instead of an instance of Illuminate\Database\Query\Builder.
Note: when you do a foreach in a instance of Illuminate\Database\Query\Builder it will execute the query but the results will be scoped inside the foreach loop. That's the reason that you cannot retrieve the pagination links, because the object you are referencing is the query instead of the results.

If you test that code :
#foreach($news as $new)
<div class="container">
<div class="doc-content-box">
<legend>{{ $new->title }} <div id="spaceholder"></div>
<p>
<h6><span class="muted"><i class="icon-calendar"></i> {{ $new->created_at }} {{ $new->author }}<span>
</p>
</h6>
</legend>
<div style="margin-top:7px">
<p>{{ $new->content }}</p>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="{{ URL::route('news.edit', $new->id) }}"><i class="icon-pencil"></i> Edit</a>
<a class="btn btn-danger" href="{{ URL::route('news.destroy', $new->id) }}"><i class="icon-trash icon-large"></i> Delete</a>
</div>
</div> <!-- /container -->
<div id="spaceholder"> </div>
#endforeach

Related

HTMX hx-target moves content down instead of replacing it in designated id

I am having the problem where my hx-target doesn't seem to be replacing the content where the target I point to. I'm using a a base html file that has a div with an id of requestcontent in it. All of my links, form actions and hx actions that I'm using point to this div for replacement.
My initial access from an item on the menu sidebar works fine and gives results as shown here:
Even when I click on the "Add bill" button the page renders correctly:
However if I press close or save on this page when I return to the original page the top of the add page is still present:
This is true from both my add and delete pages.
The initial page that starts out the entire process is in billlist.html
<div class="container shadow min-vh-100 py-2">
{% include 'acctsite/partials/messages.html' %}
<h2>Accounts Payable / Bills Listing</h2>
<div class="row" align="right">
<div class="col-10"></div>
<div class="col-2 pb-1">
<button class="btn btn-primary btn-sm"
hx-trigger="click" hx-get="{% url 'expadd' %}" hx-target="#requestcontent">
Add bill
</button>
</div>
</div>
<div class="row">
<div class="col h5">Date</div>
<div class="col h5">Vendor</div>
<div class="col h5">Description</div>
<div class="col h5">Amount</div>
<div class="col h5">Paid Info</div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
</div>
<div class="row">
<hr>
</div>
{% for bill in bills %}
<div class="row ">
<div class="col">
{{bill.date}}
{% if bill.due_date is not None %}
<br>{{ bill.due_date }}
{% endif %}
</div>
<div class="col">{{bill.vendor.name}}</div>
<div class="col">{{bill.description}}</div>
<div class="col" align="right">${{bill.amount|floatformat:2}}</div>
<div class="col">
{% if bill.paid_date is not None %}
{{ bill.paid_date }} <br>
{{ bill.check_number}}
{% endif %}
</div>
<div class="col-1">
<button class="btn btn-primary btn-sm" hx-trigger="click">Edit</button>
</div>
<div class="col-1">
{% if bill.paid_date is None %}
<button class="btn btn-primary btn-sm" hx-trigger="click" >Pay</button>
{% endif %}
</div>
<div class="col-1">
<button class="btn btn-danger btn-sm" hx-trigger="click" hx-get="{% url 'expdel' bill.transactionID %}" hx-target="#requestcontent" >Delete</button>
</div>
</div>
<div class="row">
<hr>
</div>
{% endfor %}
</div>
The add and delete page are very similar in the way they are written. Add uses a form to gather the information to perform the add:
expadd.html
<div class="container shadow min-vh-100 py-2">
{% include 'acctsite/partials/messages.html' %}
<h2>Add Expense/Bill</h2>
<form hx-post="{% url 'expadd' %}" hx-targe="#requestcontent" method="POST">
{% csrf_token %}
<div class="row">
<div class="col-2">
<strong>Vendor</strong>
</div>
<div class="col-5">
<select class="form-control" name="vendor">
{% for vendor in vendors %}
<option value="{{vendor.id}}">{{vendor.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Date</strong>
</div>
<div class="col-2">
<input class="form-control" type="date" name="date">
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Due Date</strong>
</div>
<div class="col-2">
<input class="form-control" type="date" name="duedate">
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Description</strong>
</div>
<div class="col-5">
<input class="form-control" type="text" name="description">
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Amount</strong>
</div>
<div class="col-2">
<input class="form-control" type="number" step=".01" name="amount">
</div>
</div>
<div class="row">
<div class="col-5">
</div>
<div class="col-1">
<input class="form-control btn btn-secondary" type="submit" name="action" value="Close">
</div>
<div class="col-1">
<input class="form-control btn btn-primary" type="submit" name="action" value="Save">
</div>
</div>
</form>
</div>
expdel.html
<div class="container shadow min-vh-100 py-2">
{% include 'acctsite/partials/messages.html' %}
<h2>Confirm Expense Delete</h2>
<form hx-post="{% url 'expdel' %}" hx-targe="#requestcontent" hx-swap="outerHTML" method="POST">
{% csrf_token %}
<input type="hidden" name="tranID" value="{{ bill.transactionID}}">
<div class="row">
<div class="col-2">
<strong>Vendor</strong>
</div>
<div class="col-5">
{{ bill.vendor.name }}
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Date</strong>
</div>
<div class="col-2">
{{ bill.date }}
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Due Date</strong>
</div>
<div class="col-2">
{{ bill.due_date }}
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Description</strong>
</div>
<div class="col-5">
{{ bill.description }}
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Amount</strong>
</div>
<div class="col-2">
${{ bill.amount | floatformat:2 }}
</div>
</div>
<div class="row">
<div class="col-5">
</div>
<div class="col-1">
<input class="form-control btn btn-secondary" type="submit" name="action" value="Close">
</div>
<div class="col-1">
<input class="form-control btn btn-primary" type="submit" name="action" value="Delete">
</div>
</div>
</form>
</div>
The base template contains the definition of the page that contains the div id=requestcontent.
base.html
{% load static %}
{% load humanize %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}RJD Crew Accounting{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<style>
.hoverDiv {background: #fff;}
.hoverDiv:hover {background: #f5f5f5;}
</style>
{% block head %}
{% endblock %}
</head>
<body class="bg-light">
<nav class="navbar navbar-dark bg-primary navbar-expand-lg ">
<div class="container-fluid">
<div class="p-3 mb-2 bg-primary text-white">
<a class="navbar-brand text-white" href="{% url 'home' %}"><img src="{% static 'rjdcrew-logo.png' %}" height="50" ><br>Accounting</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" >
<a class="nav-link {% if '/' == request.get_full_path %}active{% endif %}" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Expenses
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item {% if 'expenses' in request.get_full_path %}active{% endif %}" href="{% url 'expenses'%}">Reimbursements</a></li>
<li><a class="dropdown-item" href="#">Bills</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{%url 'logout' %}">logout</a>
</li>
{% else %}
<li class="nav-item">Register</li>
<li class="nav-item">
<a class="nav-link" href="{%url 'login' %}">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container p-10">
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
<div class="container-fluid overflow-hidden">
<div class="row vh-100 overflow-auto">
<div class="col-12 col-sm-3 col-xl-2 px-sm-2 px-0 bg-light d-flex sticky-top">
<div class="d-flex flex-sm-column flex-row flex-grow-1 align-items-center align-items-sm-start px-3 pt-2 text-white">
<ul class="nav nav-pills flex-sm-column flex-row flex-nowrap flex-shrink-1 flex-sm-grow-0 flex-grow-1 mb-sm-auto mb-0 justify-content-center align-items-center align-items-sm-start" id="menu">
<li class="nav-item">
<a href="{% url 'home' %}" class="nav-link px-sm-0 px-2">
<i class="fs-5 bi-house"></i><span class="ms-1 d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="{% url 'reports' %}" class="nav-link px-sm-0 px-2">
<i class="fs-5 bi-speedometer2"></i><span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle px-sm-0 px-2" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fs-5 bi-credit-card"></i><span class="ms-1 d-none d-sm-inline">Expense Reimburse</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item" hx-get="{% url 'approve' %}" hx-target="#requestcontent">Approve</a></li>
<li><a class="dropdown-item" hx-get="{% url 'pay' %}" hx-target="#requestcontent">Pay</a></li>
<li><a class="dropdown-item" hx-get="{% url 'explist' %}" hx-target="#requestcontent">List</a></li>
<li>
<hr class="dropdown-divider">
</li>
</ul>
</li>
<li >
<a href="#" class="nav-link px-sm-0 px-2" hx-get="{% url 'billlist' %}" hx-target="#requestcontent" hx-swap="outerHTML" >
<i class="fs-5 bi-receipt"></i><span class="ms-1 d-none d-sm-inline">Expense Bills</span>
</a>
</li>
<li >
<a href="#" class="nav-link px-sm-0 px-2" hx-get="{% url 'payments' %}" hx-target="#requestcontent" >
<i class="fs-5 bi-journal-minus"></i><span class="ms-1 d-none d-sm-inline">Payments</span>
</a>
</li>
<li >
<a href="#" class="nav-link px-sm-0 px-2" hx-get="{% url 'journal' %}" hx-target="#requestcontent" >
<i class="fs-5 bi-currency-dollar"></i><span class="ms-1 d-none d-sm-inline">Journal</span>
</a>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle px-sm-0 px-2" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fs-5 bi-printer"></i><span class="ms-1 d-none d-sm-inline">Reports</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item" hx-get="{% url 'checkreg' %}" hx-target="#requestcontent">Check Register</a></li>
<li><a class="dropdown-item" hx-get="{% url 'journalrep' %}" hx-target="#requestcontent">Journal</a></li>
<li><a class="dropdown-item" hx-get="{% url 'accountrep' %}" hx-target="#requestcontent">Accounts</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-sm-0 px-2">
<i class="fs-5 bi-people"></i><span class="ms-1 d-none d-sm-inline">Users</span> </a>
</li>
<li>
<a href="#" class="nav-link dropdown-toggle px-sm-0 px-2" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fs-5 bi-gear"></i><span class="ms-1 d-none d-sm-inline">Settings</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item" hx-get="{% url 'adduser' %}" hx-target="#requestcontent">Add User</a></li>
<li><a class="dropdown-item" hx-get="{% url 'addvendor' %}" hx-target="#requestcontent">Add Vendor</a></li>
</ul>
</li>
<li><i class="fs-5 bi-sign-stop"></i><span class="ms-1 d-none d-sm-inline">Sign out</span></li>
</ul>
</div>
</div>
<div class="col d-flex flex-column h-100">
<main class="row">
<div class="col pt-4" id="requestcontent">
{% block content %}
Content goes here
{% endblock %}
</div>
</main>
<footer class="row bg-light py-4 mt-auto">
<div class="col"> Copyright 2022 Skyout Services</div>
</footer>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org#1.8.2" integrity="sha384-+8ISc/waZcRdXCLxVgbsLzay31nCdyZXQxnsUy++HJzJliTzxKWr0m1cIEMyUzQu" crossorigin="anonymous"></script>
<script src="{% static "dialog.js" %}"></script>
</body>
</html>

twig: take an api and print it in html

i am using grav, and with twig i have an html file like this:
<div class="singlePostContainer">
<span class="postNumber">
01
</span>
<div class="postTextContainer">
<div class="postTitle">
title
</div>
<div class="postDate">
date
</div>
<div class="postAuthor">
author
</div>
</div>
</div>
then I have this API: https://5efc440acf235d0016ad72be.mockapi.io/api/floating-point/floating-point
I want to take the data from that api (date, author etc) and print it inside the corresponding html div
Fetch the data and transform the JSON to an array, then pass it to your view, e.g.
$api_data = json_decode(file_get_contents('https://5efc440acf235d0016ad72be.mockapi.io/api/floating-point/floating-point'), true);
<div class="postTextContainer">
<div class="postTitle">title</div>
<div class="postDate">date</div>
<div class="postAuthor">author</div>
</div>
{% for row in api_data %}
<div class="postTextContainer">
<div class="postTitle">{{ row.title }}</div>
<div class="postDate">{{ row.date }}</div>
<div class="postAuthor">{{ row.author }}</div>
</div>
{% endfor %}

how to get to the next element of list inside for loop in django template?

i have a list like
lst = [
['img1','img2','img3','img4','img5'],
['img6','img7','img8','img9']
]
and a template like
<div class="row"> -- 1st row
<div class="col-lg-3" data-aos="fade-up"> --col-lg-3
<a href="{{img1}}"> --img1
<img src="{{img1}}"> -- img1
</a>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100"> --col-lg-6
<a href="{{img2}}"> --img2
<img src="{{img2}}"> --img2
</a>
</div>
<div class="col-lg-3" data-aos="fade-up" data-aos-delay="200"> --col-lg-3
<a href="{{img}}"> --img3
<img src="{{img}}"> --img3
</a>
</div>
</div>
<div class="row"> ---2nd row
<div class="col-lg-8" data-aos="fade-up" data-aos-delay="100"> --col-lg-8
<a href="{{img2}}"> --img2
<img src="{{img2}}"> --img2
</a>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200"> --col-lg-4
<a href="{{img}}"> --img3
<img src="{{img}}"> --img3
</a>
</div>
</div>
please note few things:
every col-lg size is of different size
every and tag of a column contain 1 img
i want to iterate over the whole template but in a different way
eg: i can do this in python where i can iterator over list and assign the value as well
for data in lst:
it = iter(data)
print (next(it)) ---where print will be replaced with img tag
print (next(it))
print (next(it))
print (next(it))
print (next(it))
but how can i do this in django template
Django's for-in template loop builds the DOM defined between the template tag loop for each item in data.
That being said, you could adapt your solution like so:
<div class="row align-items-stretch">
{% for img in data %}
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="{{ data.img }}" class="d-block photo-item" data-fancybox="gallery">
<img src="{{ data.img.url }}" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
{% endfor %}
</div>
If data contains three items/images, the output will be something like:
<div class="row align-items-stretch">
# 1st iteration
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">
<img src="link" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
# 2nd iteration
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">
<img src="link" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
# 3rd iteration
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">
<img src="link" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
</div>

Htmlspecialchar in twig

I have a problem with Htmlspecialcharon twig I have this
` <div class="row justify-content-center">
<div class="col-lg-10">
{{ form_row(formEdit.description) }}
</div>
</div>`
I checked the twig documentation I found, I tried to fix it by adding (raw)
<div class="row justify-content-center">
<div class="col-lg-10">
{{ form_row(formEdit.description|raw) }}
</div>
</div>
but it doesn't resolve the problem

Index value in for loop with Twig

I'd like to store the iteration value to use in data-target so it would be #question0, #quesion1, #question2 and so on...
I tried using {{item.id}} but this didn't work.
{% for item in post.get_field('qanda') %}
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed"
data-parent="#faqAccordion" data-target="#question{{item.id}}"
data-toggle="collapse">
<h4 class="panel-title"><a class="ing">Q:
{{item.question}}</a></h4>
</div>
<div class="panel-collapse collapse" id="question{{item.id}}" style=
"height: 0px;">
<div class="panel-body">
{{item.answer}}
</div>
</div>{% endfor %}
</div>
You can use the variable loop.index0 (for zero based indexing).
data-target="#question{{loop.index0}}"
should do what you want. See the for loop documentation for more info for more information.

Resources