After updating from Symfony 2.X to Symfony 4.4 and verifying the operation, I found that Twig does not recognize modal.
Since it does not recognize modal, it will be displayed even when the code that is not displayed in modal in the if statement is displayed in modal.
When I tried "if modal is empty", the code in the if statement was displayed, so it seems that the modal is not passed.
The code that passes the modal has changed with the Symfony update. This may have an effect.
Do you have any idea?
Old_code
<div id="imageDialog" title="Image management">
{{ render(controller("AppBundle:Shop/Image:manager", {"modal": true})) }}
</div>
Changed_code
<div id="imageDialog" title="Image management">
{{ render(controller("AppBundle\\Controller\\Shop\\ImageController::managerAction", {"modal": true})) }}
</div>
Code in question
<div class="tabpanel selected" id="imageFolder" >
<div class="tabcontent">
<div class="operations">
{% if not modal %}
<div class="pull-right">
<form method="post" action="{{ path('app_shop_image_delete') }}">
<input type="hidden" name="methods" value="delete">
<input type="hidden" name="_csrf_token" value="{{ csrf_token("authenticate") }}">
<input type="hidden" name="ids" value="[]">
<button type="submit" class="delete btn btn-danger"><i class="icon-trash"></i> Delete</button>
</form>
</div>
{% endif %}
</div>
</div>
</div>
ImageController
*
* #Method("GET")
* #Route("/manager")
*
* #Template("#AppBundle/Shop/Image/manager.html.twig")
*/
public function managerAction(Request $request)
{
$routeParams = $request->get('_route_params');
$uploadUrl = $this->generateUrl("app_shop_image_save");
return array(
'modal' => isset($routeParams["modal"]) ? $routeParams["modal"] : false,
'form' => $this->createUploadForm($uploadUrl)->createView(),
);
}
It worked fine with the following method.
I couldn't get $routeParams["modal"], but please let me know if there is a way to get it.
public function managerAction(Request $request)
{
$routeParams = $request->query->get('modal');
$uploadUrl = $this->generateUrl("app_hq_image_save");
return array(
'modal' => isset($routeParams) ? $routeParams : false,
'form' => $this->createUploadForm($uploadUrl)->createView(),
);
}
<div id="imageDialog" title="Image management">
{{ render(controller("AppBundle\\Controller\\Shop\\ImageController::managerAction", {}, {"modal": true})) }}
</div>
public function managerAction(Request $request)
{
$isModal = $request->query->get('modal') != null ? $request->query->get('modal') : false;
$uploadUrl = $this->generateUrl("app_hq_image_save");
return array(
'modal' => $isModal,
'form' => $this->createUploadForm($uploadUrl)->createView(),
);
}
But I wonder if you shouldn't make modal as a real route param with a default value false.
https://symfony.com/doc/4.4/routing.html#optional-parameters
Related
In res.data.tweets i am fetching tweets from server and storing values for every tweet in tweetData obj. In tweet_text, i would like to add a link to the tagged twitter users(clickin on tag will redirect to twitter profile). I figured out how do i find tagged users but i am not able to add a link either with .link or .href attribbute.
axios.post(API_URL, null, { params }).then(res => {
this.currentPage = res.data.page
this.numberOfPages = res.data.numberOfPages
res.data.tweets.forEach(tweet => {
const tweetData = {
id: tweet.id,
tweet_text: tweet.tweet_text,
twitter_name: tweet.twitter_name,
twitter_username: tweet.twitter_username,
added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
}
this.tweets.push(tweetData)
// Below this line i am trying to achieve something by adding a link
this.tweets.forEach(el => {
el.tweet_text.split(' ').forEach(word => {
if (word.includes('#')) {
// word = 'this is tag'
word.link('https://twitter.com')
console.log(word.link)
}
})
})
})
})
This is component where data is shown
<div class="tweets-container">
<div
v-for="tweet in tweets"
:key="tweet.id"
>
<div class="tweet-card">
<div class="username-time">
<div class="user-info">
<p class="name">
{{ tweet.twitter_name }}
</p>
<p class="user-info-p">
#
</p>
<p class="username">
<a
:href="'https://twitter.com/' + tweet.twitter_username"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
</div>
<div class="time">
<p>{{ tweet.added_at }}</p>
</div>
</div>
<div class="text">
<p>{{ tweet.tweet_text }}</p>
</div>
</div>
</div>
</div>
I don't think it's going to work this way.
You should use a computed property which will append the username to the twitter base link. Then, in your template, you can link the href property to the computed property.
computed: {
userLink: function () {
return "http://twitter.com/" + this.tweet.twitter_username
}
}
You can now use this "userLink" directly in your template.
<p class="username">
<a
:href="userLink"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
I didn't test the code I wrote, feel free to let me know if you need further advice ;)
With Django I made a Show more comments button using ajax. This system works, but the problem is that there are form fields in the comments I brought in this way, and when I click the more button, csrf_token does not appear in this comment field. As such, I get a csrf_token error when I submit the form. I leave my codes below.
To solve this problem, I ran the form with the get method, but as such, the function in the views directs me to the page with JsonResponse. Another solution was to give the header information csrf_token, but that didn't solve the problem either.
blog_detail.html
<script>
$(document).ready(function(){
$('#load_form').submit(function(e){
e.preventDefault();
var limit = $(this).attr('limit')
var page = document.getElementById('pagination')
var blog_comment_list = $('#blog-comment-list')
var serializedData = $(this).serialize();
$.ajax({
type:'GET',
url: "{% url 'load-more-comments' %}",
data : serializedData,
success: function(response){
blog_comment_list.html(response.comment_html)
if (page.value >= limit){
$('#submit_button').hide()
}
page.value = parseInt(page.value)+1
},
})
})
})
</script>
<div id="blog-comment-list">
{% include 'front_end/blog/comment/partial-comment.html' %}
</div>
<form method="GET" id="load_form" limit="{{num_pages}}">
<input type="hidden" name="pk" value="{{details.id}}">
<input type="hidden" name="page" value="2" id="pagination">
<input type="submit" name="load" value="Load More" id="submit_button">
</form>
partial-comment-html
<div class="media-holder mt-5">
<h3 class="title mb-3">All Comments</h3>
{% for item in comments %}
<div class="infinite-container">
<div class="media mb-5">
<img class="img-fluid rounded-circle box-shadow mr-4" alt="image" src="{{item.owner.get_image_or_default}}" style="width: 100px;height: 100px;">
<div class="media-body">
<h6>{{item.owner.name}} {{item.owner.surname}}</h6>
<br>
<small><span style="font-size:14px;" class="stars-container stars-{% widthratio item.rate.rate 1 20 %}" id="stars">★★★★★</span></small>
<div class="comment-date"> <span class="date">{{item.created_date|naturaltime}}</span>
</div>
<p>{{item.content}} </p>
<div align="center">
{% if item.comments.all %}Cevapları Görüntüle ({{item.comments.count}}){% else %}Cevap Ver{% endif %}
</div>
<div class="generic-comment" id="generic-comment-id-{{item.id}}" style="display:none;">
<!-- -->
<div class="infinite-generic-comment">
<form action="{% url 'comment-answer' %}" method="POST" id="answer_form">
{% csrf_token %}
<input type="hidden" name="comment_id" value="{{item.id}}">
<div class="row">
<div class="col-9">
<input type="text" placeholder="Cevap Ver" name='generic_comment' class="form-control">
</div>
<div class="col-2">
<input type="submit" value="Cevap Ver" class="btn btn-outline-primary">
</div>
</div>
</form>
{% for comment in item.comments.all %}
<div class="media mb-2">
<img class="img-fluid rounded-circle box-shadow mr-4" alt="image" src="{{item.owner.get_image_or_default}}" style="width: 100px;height: 100px;">
<div class="media-body">
<h6>{{comment.owner.name}} {{comment.owner.surname}}</h6>
<div class="comment-date"> <span class="date">{{comment.created_date|naturaltime}}</span>
</div>
<p>{{comment.content}} </p>
</div>
</div>
{% endfor %}
</div>
<!-- -->
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<script>
var aTag = document.getElementsByClassName('show-answers')
for (let i = 0; i< aTag.length; i++){
aTag[i].addEventListener('click', (event) => {
var generic = document.getElementById(`generic-${event.target.id}`)
if (generic.style.display == 'none'){
$(`#generic-${event.target.id}`).slideDown('slow')
}
else{
$(`#generic-${event.target.id}`).slideUp('slow')
}
})
}
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(document).ready(function(){
$('#answer_form').submit(function(e){
e.preventDefault()
var serializedData = $(this).serialize()
var url = $(this).attr('action')
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
//headers: { "X-CSRFToken": getCookie("csrftoken") }
});
$.ajax({
type:'POST',
url: url,
data:serializedData,
success: function(response){
if (response.success){
$('#answer_form').trigger('reset')
Swal.fire(
'Başarılı!',
'Cevap onaya gönderildi',
'success'
)
}
}
})
})
})
</script>
views.py
def answer_comment(request):
if request.method=='POST':
comment = Comment.objects.get(id=request.POST.get('comment_id'))
comment.comments.create(owner=request.user, content=request.POST.get('generic_comment'))
return JsonResponse({'success':True},status=200)
return JsonResponse({'success':False}, status = 403)
Note: I tried the csrf_exempt decorator function, but still could not solve the problem.
The methods I use are available in the script tag in partial-comment-html. How can I solve this problem. As I said, when I press the load more button, the necessary form fields to respond to a comment are just below these comments and when load more with ajax, the csrf_token information is deleted in these form fields, and nothing happens in new comments.
Note 2: When {{csrf_token}} is entered, I added the hidden input field with javascript myself, but Django realized that I added it and prevented me.
I am trying to deal between Symfony 5 & Tempus Dominus Bootstrap4 Datetimepicker. My Datetime input form only work with an update function, when an event exist. I want to pass an attribute to my form but it seems to doesn't work.
I have this builder :
$builder->add('date', DateTimeType::class, [
'required' => true,
'widget' => 'single_text',
'attr' => [
'html5' => false,
'placeholder' => 'Date',
'class' => 'form-control datetimepicker-input',
'data-target' => '#datetimepicker1'
],
]);
My template :
<div class="row row-datetime">
<div class="input-group date col" id="datetimepicker1" data-target-input="nearest">
{{ form_widget(form.date, {'html5':false } ) }}
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text datetimepicker-button">
<i class="fa fa-clock"></i>
</div>
</div>
</div>
</div>
{% block javascripts %}
{{parent()}}
<script>
$('#datetimepicker1').datepicker({
format: 'dd.MM.yyyy',
});
</script>
{% endblock %}
But the result is unexpected, Chrome returns my input type as "datetime-local".
In another template for editing an existing event, I have this code, Without form_widget :
<div class="row row-datetime">
<div class="input-group date col" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text datetimepicker-button">
<i class="fa fa-clock"></i>
</div>
</div>
</div>
</div>
And it works like a charm I don't understand... If I try this code in my first template, Twig create two datetime inputs. One with the datetimepicker and another classic datetime.
I really don't understand.
Can somebody help me with this please ?
Thanks.
Best,
Py
Change your builder to this:
$builder->add('date', DateTimeType::class, [
'required' => true,
'widget' => 'single_text',
'attr' => [
'placeholder' => 'Date',
'class' => 'datetimepicker-input',
'data-target' => '#datetimepicker1'
],
'html5' => false,
]);
Note that the html5 specification does not go in the attr array. Also note that you don't have to add the form-control class since symfony will do this on its own where needed.
I would like to wrap the checkboxes with custom HTML in twig template when Symfony3 renders the form.
Instead of this:
<input type="checkbox" id="form_role_1" name="form[role][]" value="1" />
<label for="form_role_1">ROLE 1</label>
<input type="checkbox" id="form_role_2" name="form[role][]" value="2" />
<label for="form_role_2">ROLE 2</label>
<input type="checkbox" id="form_role_3" name="form[role][]" value="3" />
<label for="form_role_3">ROLE 3</label>
I would like to get something like this:
<div class="input-group">
<input type="checkbox" id="form_role_1" name="form[role][]" value="1" />
<label for="form_role_1">ROLE 1</label>
</div>
<div class="input-group">
<input type="checkbox" id="form_role_2" name="form[role][]" value="2" />
<label for="form_role_2">ROLE 2</label>
</div>
<div class="input-group">
<input type="checkbox" id="form_role_3" name="form[role][]" value="3" />
<label for="form_role_3">ROLE 3</label>
</div>
in the controller action:
$form = $this->createForm(RolesFormType::class, $roles);
$form->handleRequest($request);
return $this->render(
'role/edit_roles.html.twig',
array(
'form' => $form->createView()
)
);
in the form type:
class RolesFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add('role', EntityType::class, array(
'label' => 'form.elements.roles',
'class' => 'RoleBundle\Entity\Role',
'choice_label' => 'role_name',
'expanded' => true,
'multiple' => true
));
}
}
the classic template looks like this:
<div class="container-fluid">
<div class="row">
{{ form_start(form, {'method': "POST"}) }}
<div class="col-md-12">
<div class="form-group">
{{ form_errors(form.role) }}
{{ form_widget(form.role, {}) }}
</div>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
</div>
</div>
I tried it this way in the twig template, but only the labels were rendered:
<div class="container-fluid">
<div class="row">
{{ form_start(form, {'method': "POST"}) }}
<div class="col-md-12">
{% for role in form.role %}
<div class="input-group">
{{ form_label(role) }}
{{ form_widget(role) }}
</div>
{% endfor %}
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
</div>
</div>
Is ii possible without creating a new field type?
solution
concerning #xabbuh's answer I found the solution at How to Customize Form Rendering in Symfony 3
I created a folder in my Bundle:
src/RoleBundle/Resources/views/form
and I put a new file (fields.html.twig) into it with this content
{%- block choice_widget_expanded -%}
<div {{ block('widget_container_attributes') }}>
{%- for child in form %}
<div class="input-group">
{{- form_widget(child) -}}
{{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
</div>
{% endfor -%}
</div>
{%- endblock choice_widget_expanded -%}
In the meantime I found another question which deals with this problem:
Overriding symfony radio widget
You can customise the rendering of your form using a custom form theme. You can so either on the project level or even do that just for a particular form (see How to Customize Form Rendering and How to Work with Form Themes for more information).
Your example looks like you need to override the choice_widget and choice_label
When I play with symfony is not very skilled, I don't often use this accepted solution to solve it
view:
<label class="layui-form-label">所属地市:</label>
<div class="layui-inline">
<select name="{{ form.cityId.vars.full_name }}" lay-verify="" id="{{ form.cityId.vars.id }}" lay-filter="case_city">
<option value="0">请选择</option>
{% if citylist is not empty %}
{% for list in citylist %}
<option value="{{ list.id is defined ? list.id : 0 }}">{{ list.areaName is defined ? list.areaName : '' }}</option>
{% endfor %}
{% endif %}
</select>
</div>
controller:
$caseReg = new CaseRegister();
$form = $this->createForm('Alarm\Component\Form\CaseRegisterType', $caseReg);
$form->handleRequest($request);
$citylist = $this->getDoctrine()->getRepository('AlarmComponent:OfficeArea')->findBy(array('pid'=>0,'status'=>0));
$caseType = $this->getDoctrine()->getRepository('AlarmComponent:CaseType')->findBy(array('status'=>0));
if ($form->isSubmitted()) {
$em = $this->getDoctrine()->getManager();
$param = $request->request->get('alarm_component_caseregister');
if($param['receiveId'] == 0)
{
$case = new CaseType();
$case->setCaseName($param['receiveName']);
$em->persist($case);
$em->flush($case);
$caseReg->setReceiveId($case->getId());
$caseReg->setReceiveName($case->getCaseName());
}
if($param['cityId'] != 0)
{
$city = $this->getDoctrine()->getRepository('AlarmComponent:OfficeArea')->find($param['cityId']);
$caseReg->setCityId($city);
}
if($param['subofficeId'] != 0)
{
$suboffice = $this->getDoctrine()->getRepository('AlarmComponent:OfficeArea')->find($param['subofficeId']);
$caseReg->setSubofficeId($suboffice);
}
$em->persist($caseReg);
$em->flush($caseReg);
return $this->redirectToRoute('case_register_index');
}
return $this->render('AlarmWebBundle:BackendBat\CaseRegister:new.html.twig', array(
'caseReg' => $caseReg,
'form' => $form->createView(),
'citylist' => $citylist,
'casetype' => $caseType
));
It is also can solve my problem, but when I was late to optimize this or they must be altered. But I hope this answer can solve your current problem.
i'm creating a form to update my project but i get this error Creating default object from empty value
Here is my route :
Route::get('admin/projects/edit/{id}','ProjectsController#edit');
Route::put('admin/projects/update/{id}','ProjectsController#update');
The edit view :
#extends ('layout.admin')
#section ('content')
{{ Form::open(array('url'=>'admin/projects/update/'.$project->id.'','enctype'=>'multipart/form-data','method'=>'put','style'=>'margin:0!important;')) }}
{{ Form::token() }}
<div class="form-group">
{{ Form::label('name','Nom :') }}
{{ Form::text('name',$project->name,array('class'=>'form-control')) }}
#if($errors->first('name'))
<div class="alert alert-danger" role="alert">{{ $errors->first('name') }}</div>
#endif
</div>
<div class="form-group">
{{ Form::label('slug','Slug :') }}
{{ Form::text('slug',$project->slug,array('class'=>'form-control')) }}
#if($errors->first('slug'))
<div class="alert alert-danger" role="alert">{{ $errors->first('slug') }}</div>
#endif
</div>
<div class="form-group">
{{ Form::label('category_id','Category :') }}
{{ Form::select('category_id',$cats,$project->category_id) }}
</div>
<div class="form-group">
{{ Form::label('thumbnail','Image :') }}
{{ Form::file('thumbnail',array('class'=>'form-control')) }}
#if($errors->first('thumbnail'))
<div class="alert alert-danger" role="alert">{{ $errors->first('thumbnail') }}</div>
#endif
</div>
<div class="form-group">
{{ Form::label('description','Description :') }}
{{ Form::textarea('description',$project->description,array('class'=>'form-control')) }}
#if($errors->first('description'))
<div class="alert alert-danger" role="alert">{{ $errors->first('description') }}</div>
#endif
</div>
{{ Form::submit('Modifier', array('class'=>'btn btn-primary','style'=>'float:left')) }}
{{ Form::close() }}
<button class="btn btn-danger" style="float:left;margin-left:20px;">Supprimer</button>
#stop
And my controller
public function update($id){
$inputs = Input::all();
$rules = array(
'name'=>'required|min:5',
'description'=>'required|min:10'
);
$validation = Validator::make($inputs,$rules);
if($validation->fails()){
return Redirect::to('admin/projects/edit/'.Input::get('id').'')->withInput()->withError();
}
$project=Project::find($id);
$project->name = Input::get('name');
$project->slug = Slug::create(Input::get('slug'));
$project->category_id = Input::get('category_id');
$project->description = Input::get('description');
if(Input::hasFile('thumbnail')){
$img = Str::slug(Input::get('name').'png');
$post->thumbnail = 'img/'.$img.'';
}
if(Input::hasFile('thumbnail')){
Input::file('thumbnail')->move('img/',$img);
}
return Redirect::to('admin/projects')->with('Alert_succes','Votre projet a bien été mis à jour');
}
public function edit($id)
{
$project = Project::find($id);
$categories = Category::all();
$cats = array();
foreach ($categories as $category){
$cats[$category->id] = $category->name;
}
return View::make('projects.edit')->with(array('project'=>$project,'cats'=>$cats));
}
I Dont really understand where the errors is , the problem come from this line according to laravel debuger : $post->thumbnail = 'img/'.$img.'';
Thank You for your help
You are using $post->thumbnail = 'img/'.$img.''; but you didn't create a $post object. Instead you have $project object from this code:
$project = Project::find($id);
Where is $post in your code ? It should be $project and also make sure if you got an object, using something like this:
$project = Project::find($id);
if($project) {
//...
}
It looks that, $post->thumbnail should be $project->thumbnail in your update method.