'Request missing required body param' when submitting front end entry form - Craft CMS - frontend

I'm pretty new to craft and creating my first front end entry form using the demo code provided by craft. For some reason I'm getting a 'Request missing required body param' error. I've tried adding <input type="hidden" name="entryId" value=""> but that didn't solve the issue.
Here's my code:
{% extends "_layout.twig" %}
{% macro errorList(errors) %}
{% if errors %}
{{ ul(errors, {class: 'errors'}) }}
{% endif %}
{% endmacro %}
{# If there were any validation errors, an `entry` variable will be
passed to the template, which contains the posted values
and validation errors. If that’s not set, we’ll default
to a new entry. #}
{% set entry = entry ?? create('craft\\elements\\Entry') %}
{# Add `enctype="multipart/form-data"` to `<form>` if you’re
uploading files. #}
<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
{{ csrfInput() }}
{{ actionInput('entries/save-entry') }}
{{ redirectInput('viewentry/{slug}') }}
{{ hiddenInput('friends', '2') }}
<input type="hidden" name="entryId" value="">
<div class="mb-6">
<label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your Dog's Name</label>
{{ input('text', 'title', entry.title, {
id: 'title',
class:'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
}) }}
{{ _self.errorList(entry.getErrors('title')) }}
</div>
<div class="mb-6">
<label for="featureImage" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Feature Image</label>
{{ input('file', 'featureImage', entry.featureImage, {
id: 'featureImage',
}) }}
{{ _self.errorList(entry.getErrors('featureImage')) }}
</div>
<div class="mb-6">
<label for="postContent" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tell us about your dog</label>
{{ tag('textarea', {
id: 'postContent',
name: 'fields[postContent]',
class:'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
}) }}
{{ _self.errorList(entry.getErrors('postContent')) }}
</div>
<div class="mb-8">
<label for="postCategories" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Breed</label>
<select name="fields[postCategories]" id="postCategories">
{# Create a category query with the 'group' parameter #}
{% set myCategoryQuery = craft.categories()
.group('blog') %}
{# Fetch the categories #}
{% set categories = myCategoryQuery.all() %}
{# display post categories #}
{% if entry.postCategories|length %}
<div class="border-t py-2 mb-6">
{% for category in entry.postCategories.all() %}
<a href="{{ category.url }}" class="inline-block border rounded px-2 py-1 text-sm">
{{- category.title -}}
</a>
{% endfor %}
</div>
{% endif %}
{% nav category in categories %}
<li>
<option>{{ category.title }}</option>
</li>
{% endnav %}
</select>
</div>
{#
{% set field = craft.app.fields.getFieldByHandle('postCategories') %}
{{ hiddenInput('fields[postCategories]', '') }}
<select multiple name="fields[postCategories][]">
{% for option in field.options %}
{% set selected = entry is defined
? entry.postCategories.contains(option.value)
: option.default %}
<option value="{{ option.value }}"
{% if selected %} selected{% endif %}
>
{{ option.label }}
</option>
{% endfor %}
</select>
#}
<div class="mb-6">
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Publish</button>
</div>
</form>
{% endblock %}

I didn't realise that the 2 in {{ hiddenInput('sectionId', '2') }} had to be changed for the ID of the channel - not the handle.
For anyone else stuck with this, the ID can be found in the URL when you're editing the channel in the dashboard settings.
More details here >>

Related

Multiple Load More OOB Button Sprig

I am trying to create multiple dynamic load more oob buttons using Sprig plugin in Craft CMS and they are appearing properly. But the issue comes up when one button is due to be swapped with the hidden one, it results to all the load more buttons disappearing.
Here is the for loop code that I have tested:
{% for city in cities %}
{% set articleOffset = articleOffset ?? 0 %}
{% set articlesQuery = cityArticles[loop.index0].offset(articleOffset).limit(articleLimit) %}
{% set articles = articlesQuery.all() %}
<div class="filtered-bookmark mb-5">
<span> {{ city.title }}</span>
<div class="row" id="container-{{ city.slug }}">
{% for article in articles %}
{% set featureImage = article.articleFeaturedImage.one().url ?? "" %}
{% set categorySlug = article.channelsCategory.one().channel.one().slug %}
<section class="col-12 col-sm-6 col-xl-4 mb-4">
{#article card template here#}
</section>
{% endfor %}
</div>
{% if articlesQuery.count() > articles|length + articleOffset %}
<button id="{{city.slug}}-oob" sprig
s-val:articleOffset="{{ articleOffset + articleLimit }}"
s-target="#container-{{ city.slug }}"
s-select="#container-{{ city.slug }} section"
s-swap="beforeend"
{{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }}> View More </button>
{% else %}
<button id="{{ city.slug }}-oob" s-swap-oob="true" style="display: none"></button>
{% endif %}
</div>
{% endfor %}
Asked the question on PutYourLightsOn's Sprig GitHub and got a response. This did the trick:
<button id="{{ city.slug }}-oob" {{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }} style="display: none"></button>
GitHub link for reference:
https://github.com/putyourlightson/craft-sprig/issues/247

The listing is incorrect

can anyone please help me with this formula? It doesn't give me what I need. The first two posts to the active section, all the others to the inactive one.
{% set memberLength = members|length / 2 %}
{% for i in 1..memberLength %}
{% set sliceStart = i * 2 - 2 %}
{% set sliceLength = 2 %}
{% if i < 2 %}
<div class="carousel-item active">
<div class="row m-0">
{% for key, member in members|slice(sliceStart,sliceLength) %}
<div class="col-lg-6 py-4 ps-lg-3 pe-lg-5 d-lg-block d-none">
<div class="pb-4 mb-2 text-white">
<p class="fw-7 mb-0">{{ member.name }}</p>
<p>{{ member.podjmeno }}</p>
</div>
<div class="text-primary PF fz-19">
<h2 class="fw-4 mb-3">{{ member.nadpisvelky }}</h2>
<p><em>{{ member.description }}</em></p>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div class="carousel-item">
<div class="row m-0">
{% for key, member in members|slice(sliceStart,sliceLength) %}
<div class="col-lg-6 py-4 ps-lg-3 pe-lg-5 d-lg-block d-none">
<div class="pb-4 mb-2 text-white">
<p class="fw-7 mb-0">{{ member.name }}</p>
<p>{{ member.podjmeno }}</p>
</div>
<div class="text-primary PF fz-19">
<h2 class="fw-4 mb-3">{{ member.nadpisvelky }}</h2>
<p><em>{{ member.description }}</em></p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
If you want to create a repeating HTML structure you are best off with using the filter batch
To set the class active on the first item you can use the attribute first of the loop variable
{% for items in members|batch(2) %}
<div class="carousel-item{{ loop.first ? ' active' }}">
{% for item in items %}
<div class="col-lg-6 py-4 ps-lg-3 pe-lg-5 d-lg-block d-none">
<div class="pb-4 mb-2 text-white">
<p class="fw-7 mb-0">{{ item.name }}</p>
<p>{{ item.podjmeno }}</p>
</div>
<div class="text-primary PF fz-19">
<h2 class="fw-4 mb-3">{{ item.nadpisvelky }}</h2>
<p><em>{{ item.description }}</em></p>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
demo

How add space between two cards - bootstrap?

I was creating a simple blog page using Django. When I added cards for the articles it came like this
There is no space between the cards.
{% extends 'base.html' %}
{% block content %}
<div class="card mt-3" style="width: 100%;">
{% for post in posts %}
<div class="card-header">
<cite title="Source Title">{{ post.author }}</cite>
<small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
</div>
<div class="card-body">
<div class="card-title">{{ post.title }}</div>
<p class="card-text">{{ post.content }}</p>
</div>
{% endfor %}
</div>
{% endblock content %}
How do I add space between these cards?
your for loop is not in correct place change code from
{% extends 'base.html' %}
{% block content %}
<div class="card mt-3" style="width: 100%;">
{% for post in posts %}
<div class="card-header">
<cite title="Source Title">{{ post.author }}</cite>
<small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
</div>
<div class="card-body">
<div class="card-title">{{ post.title }}</div>
<p class="card-text">{{ post.content }}</p>
</div>
{% endfor %}
</div>
{% endblock content %}
to bellow code
{% extends 'base.html' %}
{% block content %}
{% for post in posts %}
<div class="card mt-3" style="width: 100%;">
<div class="card-header">
<cite title="Source Title">{{ post.author }}</cite>
<small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
</div>
<div class="card-body">
<div class="card-title">{{ post.title }}</div>
<p class="card-text">{{ post.content }}</p>
</div>
</div>
{% endfor %}
{% endblock content %}
Firstly, you need to do the loop for every card, instead of doing it for the inner divs 'card-header' and 'card-body'. Secondly, to answer you question, you should use a spacing by either a margin or a padding.
I would suggest to make the cards a standard width and use a 'margin right 3':
{% for post in posts %}
<div class="card mt-3 mr-3" style="width: 250px">
<div class="card-header">
...
</div>
<div class="card-body">
...
</div>
</div>
{% endfor %}
Besides this solution, I suggest you read the Bootstaps Grid Layout documentation, so you can place the cards nicely within your content block.

How can i access to array key in twig view symfony 3

I have a method that returns multiple arrays and I want to access to their data to manipulate them in twig:
repository
public function getmemberlist($list){
$memberId = explode('-',$list);
$membres = $this->getEntityManager()
->createQuery(
'SELECT m.nom, m.prenom, m.profile_pic
FROM MainBundle:Member m
WHERE m.id IN(:id)'
)
->setParameter('id',array_values($memberId))
->getResult();
return $membres;
}
controller
public function membreGroupeAction()
{
$em = $this->getDoctrine()->getManager();
$str = $em->getRepository("GroupGroupBundle:Groupe")->findOneBy(array('id'=>1));
$member = $em->getRepository("GroupGroupBundle:Groupe")->getmemberlist($str->getMembres());
var_dump($member);
return $this->render('#GroupGroup/layout/membres.html.twig',array("mem"=>$member));
}
this is the result of var_dump($member)
everything is good until now but i didn't find how to manipulate the data in my twig. I've tried this but it shows me an error
twig
{% extends '#GroupGroup/Group/groupe_mur_base.html.twig' %}
{% block panel %}
{% for i in mem %}
{% for j in i %}
{{ j[0].nom }}
{% endfor %}
{% endfor %}
<div class="jumbotron list-content" style="display: block;">
<ul class="list-group">
<li href="#" class="list-group-item title">
Liste des Membres
</li>
<li href="#" class="list-group-item text-left" id="listmembre" style="display: block;">
<div class="image">
<img class="img-thumbnail" src="http://bootdey.com/img/Content/User_for_snippets.png">
<span id="membername">Juan guillermo cuadrado</span>
<div><button id="btnajout" class="btn btn-primary">Ajouter</button></div>
</div>
<div class="break"></div>
</li>
<li href="#" class="list-group-item text-left" id="listmembre" style="display: block;">
<div class="image">
<img class="img-thumbnail" src="http://bootdey.com/img/Content/User_for_snippets.png">
<span id="membername">Juan guillermo cuadrado</span>
<div><button id="btnajout" class="btn btn-primary">Ajouter</button></div>
</div>
<div class="break"></div>
</li>
error
I'm not sure why you are using 2 for-loops in your code,
{% for i in mem %} {# here you are looping members #}
{% for j in i %} {# here you are looping attributes of the member #}
{{ j }} {# output is bg, wass, http://.... #}
{% endfor %}
{% endfor %}
If you want to display the name of the members you should only use one loop
{% for i in mem %}
<div>
<img src="{{ i.profile_pic }}" alt="{{ i.nom }} {{ i.prenom }}" title="{{ i.nom }} {{ i.prenom }}" />
{{ i.nom }} {{ i.prenom }}
</div>
{% endfor %}

Silex - Symfony Froms - How to wrap each radio button and its label in to separate div for each radio in choice list?

I am using Silex micro faramework with Symfony forms. In twig templet I generate this field using :
...
{{ form_widget(form.transport_selection) }}
...
How can I overwrite this symfony twig form templet to generate wrap for each set (input field and label) in Silex.
This is my twig registration:
use Silex\Provider\FormServiceProvider;
use Symfony\Component\Translation\Loader\YamlFileLoader;
use Symfony\Component\Validator\Constraints as Assert;
$app->register(new Silex\Provider\TwigServiceProvider(), array(
'twig.path' => [
__DIR__.'/App/View',
]
));
How to wrap radio button and label with div for each radio choice ?
output:
<div id="form_transport_selection">
<input type="radio" id="form_transport_selection_0" name="form[transport_selection]" required="required" value="country" checked="checked">
<label for="form_transport_selection_0" class="required">country</label>
<input type="radio" id="form_transport_selection_1" name="form[transport_selection]" required="required" value="abroad">
<label for="form_transport_selection_1" class="required">abroad</label>
</div>
Expected output:
<div id="form_transport_selection">
<div class="radio1">
<input type="radio" id="form_transport_selection_0" name="form[transport_selection]" required="required" value="country" checked="checked">
<label for="form_transport_selection_0" class="required">country</label>
</div>
<div class="radio2">
<input type="radio" id="form_transport_selection_1" name="form[transport_selection]" required="required" value="abroad">
<label for="form_transport_selection_1" class="required">abroad</label>
</div>
</div>
Thanks
You can make new template for this form and redefine radio buttons view
my.form.twig
{% extends "form_div_layout.html.twig" %}
{%- block choice_widget_expanded -%}
<div {{ block('widget_container_attributes') }}>
{% set i=1 %}
{%- for child in form %}
<div class="radio-{{i}}">
{{- form_widget(child) -}}
{{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
</div>
{% set i=i+1 %}
{% endfor -%}
</div>
{%- endblock choice_widget_expanded -%}
and use it in controller template, where form is shown
{% form_theme form 'my.form.twig' %}
....
{{ form_widget(form.transport_selection) }}
Expanding on MaxP's answer. Make sure to only modify this for radio buttons, you don't want this used in checkboxes! I've added a different class for checkboxes. Note the if/else to do this.
{% extends "form_div_layout.html.twig" %}
{% block choice_widget_expanded %}
<div {{ block('widget_container_attributes') }}>
{% set i=1 %}
{% for child in form %}
{% if form.vars.multiple == false %}
<div class="radio-{{i}}">
{% elseif form.vars.multiple == true %}
<div class="checkbox-{{i}}">
{% endif %}
{{ form_widget(child) }}
{{ form_label(child, null, {translation_domain: choice_translation_domain}) }}
</div>
{% set i=i+1 %}
{% endfor %}
</div>
{% endblock choice_widget_expanded %}
And use it in controller template, where form is shown
{% form_theme form 'my.form.twig' %}
....
{{ form_widget(form.transport_selection) }}
When using Symfony, I recommend overriding all Twig fields in app/Resources/views/Form/fields.html.twig
And then on config.yml you just need to make this available by adding it to twig's config
twig:
form_themes:
- 'Form/fields.html.twig'

Resources