Say I have a controller like this:
public function showAction(Request $request, $id, $context = array())
{
$url = $this->getPlayUrl($id, $context);
//some code here}
I want to use the variable $url in a frontend js file like this :
var html = '<iframe src=\''+ url +'\' name=\'viewerIframe\' id=\'viewerIframe\' width=\'100%\'allowfullscreen webkitallowfullscreen height=\'100%\' style=\'border:0px\'></iframe>';
How am I supposed to make this happen? For the code above ,it gave me 'undefined url' error.
Thank you.
Another option would be to have your template call a controller action (so you can pass parameters as required), for example, like this example for using highchart.js:
{% block javascripts %}
{{ parent() }}
<script src="/js/highcharts.js"></script>
<script src="/js/exporting.js"></script>
<script type="text/javascript">
{{ render(controller('AppBundle:Default:script')) }}
</script>
{% endblock %}
In the controller it looks like this:
public function scriptAction() {
$reports = $this->get('app.reports');
$chart = $reports->getDistsFYToDate();
return $this->render('Default/script.js.twig', array(
'chart' => $chart,
));
}
and script.js.twig looks like this:
$(document).ready(function () {
var options = {
chart: {
type: 'line'
},
title: {
text: 'Distributions, FY{{ chart.fy }} to date'
},
xAxis: {
categories: [{% for category in chart.categories %}{{category|raw}}{%endfor%}]
},
yAxis: {
title: {
text: 'Distributions'
}
},
series: {{ chart.series|raw }}
};
$('#linechart').highcharts(options);
})
Maybe it's better if you use HTML5 data attributes: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
In you view add some script tags and assign a javascript vraible to the twig variable. Don't forget to quote the twig (if required).
Firstly, I would ensure that the $url always had a value;
return $this->render('MyWebBundle:Player:show.html.twig', array(
'file' => $file,
'url' => (empty($url)) ? '' : $url,
'context' => $context,
'player' => $player,
'agentInWhiteList' => $agentInWhiteList
));
Something like;
<script>
var jsVar = '{{ url }}';
var html = false;
if (jsVar.length > 0) {
html = '<iframe src=\''+ jsVar +'\' name=\'viewerIframe\' id=\'viewerIframe\' width=\'100%\'allowfullscreen webkitallowfullscreen height=\'100%\' style=\'border:0px\'></iframe>';
}
// test html !== false before using it
</script>
Related
I'm trying to create a dynamic 2-step form using Jquery where in "step 1", I want to submit the form data without refreshing my page so that I can hide my html division containing my form and show the other representing my step 2 using Jquery.
The problem is that I'm using a collection of forms in my controller action like this:
public function indexAction(Request $request)
{
$user = $this->getUser();
$em = $this->getDoctrine()->getManager();
$repository = $em->getRepository('ATPlatformBundle:NoteDeFrais');
$form = $this->get('form.factory')->createBuilder(FormType::class)
->add('ndf', CollectionType::class,array(
'entry_type' => NoteDeFraisType::class,
'label' => false,
'allow_add' => true,
'allow_delete' => true,
))
->getForm();
And I'm getting the forms data submitted from like this:
if ($request->isMethod('POST') && $form->handleRequest($request)->isValid()
&& isset($_POST['next_button'])) {
$notesDeFrais = $form['ndf']->getData();
foreach ($notesDeFrais as $ndf) {
$ndf->setUser($user);
$em->persist($ndf);
}
$em->flush();
}
elseif (isset($_POST['validate_button'])) {
foreach ($listNdf as $ndf) {
$ndf->setSubmitted(true);
}
$em->flush();
}
So what I wanted to know is how to send my data via an ajax request and how to get them from my action. So far I tried to proceed like this but it (logically) doesn't work.
$("div#bloc_validation").css("display", "none");
$("#next_button").click(function(){
$(".form_ndf").each(function(){
$.post("{{ path('platform_homepage') }}",
{ndf: $(this).serialize()}, //My issue is here
function(){
alert('SUCCESS!');
}
);
});
$("div#form_bloc ").css("display", "none");
$("div#bloc_validation").css("display", "block");
});
Do you have any ideas ? Thanks in advance
The most basic approach is this:
add a javascripts block in your twig file with the content as below.
Change appbundle_blog in the first line inside the .ready() function in the name of your form. (Inspect your html to find it).
{% extends 'base.html.twig' %}
{% block body %}
{{ form_start(edit_form) }}
{{ form_widget(edit_form) }}
<input type="submit" value="Save Changes" />
{{ form_end(edit_form) }}
{% endblock %}
{% block javascripts %}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script>
$(document).ready( function() {
var form = $('form[name=appbundle_blog]');
form.submit( function(e) {
e.preventDefault();
$.ajax( {
type: "POST",
url: form.attr( 'action' ),
data: form.serialize(),
success: function( response ) {
console.log( response );
}
});
});
});
</script>
{% endblock %}
If the form has been submitted you have to answer to an AJAX request. Therefore you could render another template..
/**
* Displays a form to edit an existing blog entity.
*
* #Route("/{id}/edit", name="blog_edit")
* #Method({"GET", "POST"})
*/
public function editAction(Request $request, Blog $blog)
{
$editForm = $this->createForm('AppBundle\Form\BlogType', $blog);
$editForm->handleRequest($request);
if ($editForm->isSubmitted() && $editForm->isValid()) {
$this->getDoctrine()->getManager()->flush();
/* render some new content */
return $this->render('blog/ajax.html.twig', array(
'blog' => $blog,
));
}
return $this->render('blog/edit.html.twig', array(
'blog' => $blog,
'edit_form' => $editForm->createView(),
));
Or answer in JSON:
use Symfony\Component\HttpFoundation\JsonResponse;
/**
* Displays a form to edit an existing blog entity.
*
* #Route("/{id}/edit", name="blog_edit")
* #Method({"GET", "POST"})
*/
public function editAction(Request $request, Blog $blog)
{
$editForm = $this->createForm('AppBundle\Form\BlogType', $blog);
$editForm->handleRequest($request);
if ($editForm->isSubmitted() && $editForm->isValid()) {
$this->getDoctrine()->getManager()->flush();
return new JsonResponse(array(
'status' => 'success',
// ...
));
}
return $this->render('blog/edit.html.twig', array(
'blog' => $blog,
'edit_form' => $editForm->createView(),
));
}
If you want you can even test if the request is an AJAX request or not:
if($request->isXmlHttpRequest()) {
// yes it is AJAX
}
I am using tagsinput for some tagging operation. I want to add some default value to the tag field that is sent from controller. But it seems that the way i am trying to use the js expression is not working. Can anyone help me. Here is code.
<script>
var cities = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: members
});
cities.initialize();
var elt = $('#researcher');
elt.tagsinput({
itemValue: 'value',
itemText: 'text',
allowDuplicates: false,
typeaheadjs: {
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}
});
#foreach ($memberResearch->member as $member)
{!! $text = $member->firstName." ".$member->lastName !!}
{!! $id = $member->member_id !!}
#if($member->pivot->role == "Researcher")
elt.tagsinput('add' , {"value" : {{ $id }} , "text" :{{ $text }} });
#endif
#endforeach
</script>
PHP and Javascript are two very seperate entities.
For this kind of stuff, the best approach is for laravel to dump the contents (the data) into the page somewhere where the frontend (javascript) can then pick up.
For example:
// controller
$appConfig = [ 'foo' => 'bar' ];
// blade
<script>
var AppConfig = {!! ! empty($appConfig) ? json_encode($appConfig) : "{}" !!};
</script>
// js
var foo = JSON.parse(AppConfig).foo;
console.log(foo); // outputs bar
I'm a beginner in Symfony, PHP and Javascript. I'm struggling with a Javascript tree form based on Fancytree. Thanks to the forum, I made everything working up to POSTing back the form data to the controller, handling the request and redirecting to a success page. The problem is that the success page never shows. Nor IE neither Firefox debuggers show errors. I don't progress anymore, I'm stuck.
Here is my controller:
namespace Solar\DataBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Config\Definition\Exception\Exception;
class DefaultController extends Controller
{
/**
* Test data sent to Twig and javascript tree
*
* #Route("/form_tree_demo", name="form_tree_demo")
* #Method({"GET", "POST"})
*/
public function formTreeDemoAction(Request $request)
{
$test = 'Test string';
$testArray =
array(
array(
'name'=> '1',
'title' => '1',
'children' =>
array(
array('name' => '1.1',
'title' => '1.1'
),
array('name' => '1.2',
'title' => '1.2'
)
)
),
array(
'name'=> '2',
'title' => '2',
'children' =>
array(
array('name' => '2.1',
'title' => '2.1'
),
array('name' => '2.2',
'title' => '2.2'
)
)
)
);
$form = $this->createFormBuilder()
->add('save', SubmitType::class, array('label' => 'Post to the controller'))
->getForm();
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
//for debug
//throw new Exception(var_dump($form->getData()));
return $this->redirectToRoute('success', array('message' => 'Post handled'));
}
return $this->render('formtreedemo.html.twig',
array(
'tree_form' => $form->createView(),
'test_array' => json_encode($testArray)
)
);
}
/**
* #Route("/success", name="success")
*/
public function successAction()
{
return $this->render('success.html.twig');
}
}
Here is the Twig form:
{% extends 'base.html.twig' %}
{% block body %}
<h1>A demo form with Fancytree</h1>
{{ form_start(tree_form) }}
<div id="tree" name="selNodes">
</div>
Additional data: <input type="text" name="otherFormData" /><br><br>
{{ form_end(tree_form) }}
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{asset('assets/vendor/jquery/dist/jquery.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendor/jquery-ui/jquery-ui.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendor/bootstrap/dist/js/bootstrap.js')}}"></script>
<link rel="stylesheet" type="text/css" id="skinSheet" href="{{asset('assets/vendor/fancytree/src/skin-lion/ui.fancytree.css')}}" />
<script type="text/javascript" src="{{asset('assets/vendor/fancytree/src/jquery.fancytree.js')}}"></script>
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
checkbox: true,
selectMode: 2,
source:$.parseJSON('{{test_array}}'.replace(/"/ig,'"'))
});
$("form").submit(function() {
$("#tree").fancytree("getTree").generateFormElements();
jQuery.ajax({
type: "POST",
url: "{{path("form_tree_demo")}}",
data: formData
});
return false;
});
});
</script>
{% endblock %}
And finally here is the IE console dump :
URL Method Result Type Initiateur
/web/app_dev.php/form_tree_demo GET 200 text/html actualiser
/web/assets/vendor/bootstrap/dist/css/bootstrap.css GET 200 text/css <link rel="stylesheet">
/web/assets/vendor/bootstrap/dist/css/bootstrap-theme.css GET 200 text/css <link rel="stylesheet">
/web/assets/vendor/jquery/dist/jquery.js GET 200 application/javascript <script>
/web/assets/vendor/jquery-ui/jquery-ui.js GET 200 application/javascript <script>
/web/assets/vendor/bootstrap/dist/js/bootstrap.js GET 200 application/javascript <script>
/web/assets/vendor/fancytree/src/skin-lion/ui.fancytree.css GET 200 text/css <link rel="stylesheet">
/web/assets/vendor/fancytree/src/jquery.fancytree.js GET 200 application/javascript <script>
/web/app_dev.php/_wdt/115370 GET 200 text/html XMLHttpRequest
/web/assets/vendor/fancytree/src/skin-lion/icons.gif GET 200 image/gif background-image
/web/app_dev.php/form_tree_demo POST 302 text/html XMLHttpRequest
/web/app_dev.php/success?message=Post%20handled GET 200 text/html XMLHttpRequest
Additional info:
I run Symfony 3.2 under Windows 8, OpenSuse and Ubuntu VM server. Same results everywhere. Same results with deprecated Dynatree also.
Kind help would be appreciated.
Jean-Michel
You need to handle the success/failure of the ajax and load the new page from there. At present you are returning the html of the redirect call in your controller and your javascript function does not handle the return in any way and just returns false.
If the form in your controller only responds to ajax, then on success pass back the url to redirect to, then get your javascript to perform the redirect.
If the form is only to handle the ajax call, I personally would create a route/function to handle just that.
That why you can perform some checks (like $request->isXmlHttpRequest()) to ensure the call is coming from the ajax only.
E.g.
public function ajaxAction(Request $request)
{
if ($request->isXmlHttpRequest()) {
$form_element1 = $request->request->get('form_element1');
$form_element2 = $request->request->get('form_element2');
// do whatever
$data['success'] = true;
$data['url'] = $this->generateUrl('new_route');;
return new \Symfony\Component\HttpFoundation\JsonResponse($data);
}
}
Then your javascript
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
checkbox: true,
selectMode: 2,
source:$.parseJSON('{{test_array}}'.replace(/"/ig,'"'))
});
$("form").submit(function(e) {
e.preventDefault();
var formData = $("#tree").fancytree("getTree").generateFormElements();
var jqxhr = $.ajax({
type: "POST",
url: "{{path('ajax_action')}}",
data: formData
})
.done(function(data) {
if (data.success === true) {
window.location.href = data.url;
}
})
.fail(function(data) {
alert('error');
})
.always(function(data) {
});
return false;
});
});
</script>
Twig malforms my array keys and adds " " brackets to my array keys passed from a symfony2 controller.
The array is passed to a Javascript graphics library which requires:
[{x:"disabled test object",y:"17",label:"disabled test object"}]
Instead {{ array|json_encode|raw }} as suggested by the Twig docs and other SO questions I've read through returns the unreadable:
[{"x":"disabled test object","y":"17","label":"disabled test object"}]
I figure this should not be complicated to achieve but going through the json_encode options so far has not resulted in a clear answer. I am unsure whether there is something I can do from PHP so I've added the tag for now.
EDIT:
I am now attempting to step through the array manually using Twig. {{dump(points)}} confirms it is filled properly
{% set points = chart.dataPoints|json_encode|raw %} <=== this was the problem
dataPoints:
{% for point in points %}
{{ dump(point) }}
{ x: {{ point.x }}, y: {{ point.y }}, label: {{ point.label }} }
{% if loop.lastIndex != true %}
,
{% endif %}
{% endfor %}
But this does not work either as the dump is never reached. Is this the correct way of trying to access objects in a foreach via Twig though? This code is an amalgamation of several Twig docs tutorials.
EDIT 2, the solution:
The line {% set points = chart.dataPoints|json_encode|raw %} turned the whole array into a single string, making it impossible for javascript to interpret as an array. After removing this, all that was left was to make sure the query result had the proper array keys and to transform the X-axis data before passing it to Twig.
$i = 0;
$points = array();
/** #var array $query_result*/
foreach($query_result as &$row) {
foreach($row as $value) {
$point[] = [
'x' => ($i)*10,
'y' => $value['y'],
'label' => $value['label']
];
$points[$i] = $point;
$i++;
}
}
Quotes are not a problem for CanvasJS. As you can see in the example below, "x": works (I took this example):
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Top Oil Reserves"
},
data: [{
dataPoints: [
{ x: 1, y: 297571, label: "Venezuela"},
{ "x": 2, "y": 267017, label: "Saudi" }
]
}]
});
chart.render();
}
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 200px; width: 100%;"></div>
</body>
</html>
So we need to provide a JSON array for dataPoints:
Define the PHP array in your Controller's function and pass it to the template:
public function myAction()
{
// …
$json = array(
array(
'x' => 1,
'y' => 297571,
'label' => 'Venezuela',
),
array(
'x' => 2,
'y' => 267017,
'label' => 'Saudi',
),
);
return array(
// …
'json' => $json,
);
}
Display the array in the template and pass it to dataPoints :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script>
var json = {{ json|json_encode|raw }};
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Top Oil Reserves"
},
data: [{
dataPoints: json
}]
});
chart.render();
}
</script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
The rendered output will be:
// …
<script>
var json = [{"x":1,"y":297571,"label":"Venezuela"},{"x":2,"y":267017,"label":"Saudi"}];
// …
CanvasJS will be able to read this JavaScript array and display the chart.
It looks like the first one is a JavaScript object, and the second one is JSON, try running JSON.parse on the string like this to convert it back in to an object:
var fixed = JSON.parse('[{"x":"disabled test object","y":"17","label":"disabled test object"}]');
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
i called a controllerAction in symfony2 from jquery script in twig template for form validation and verification. After a successful response i called another controller from jquery script using $.post() for rendering a template for user-dashboard. but all i am getting is a template displayed in console but not in the user browser window. How to achieve this in the above stated way. ??
Thanks for help (in advance)
AKSHAT.
<script>
// my jquery code
$(document).ready(function()
{
$('.sign_in_box').click(function()
{
var data = new Object();
data.email=$('.email_txt').val();
data.password=$('.pwd_txt').val();
$.ajax('{{ path('login_login_validation') }}', {
type : 'POST',
data : data,
success : function(response){
var json = JSON.parse(response);
var flag = json.success;
if(flag)
{
$('#pwd_login_error').css('opacity' , '0');
$('#email_login_error').css('opacity' , '0' );
$.ajax('{{ path('login_login_verification') }}',{
type : 'POST',
data : data,
success : function(response){
var login = JSON.parse(response);
if(login.login)
{
alert("login success");
$.post('{{ path('login_dashboard') }}', data);
}
else
{
$('#pwd_login_error').css('opacity' , '0.5' );
}
}});
}
else
{
$('#pwd_login_error').css('opacity' , '0' );
$('#email_login_error').css('opacity' , '0.5' );
}
}
});
});
});
</script>
//////////////////////////////////////////////////////////////////////////////////////////////////////////
// controller
<?php
namespace Login\Bundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
class DashboardController extends Controller
{
public function indexAction()
{
$email = $this->get('request')->get('email');
return $this->render('LoginBundle:Dashboard:index.html.twig', array('email'=> $email));
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// routing file
login_homepage:
pattern: /
defaults: { _controller: LoginBundle:Homepage:index }
login_login_validation:
pattern: /ajax_validate
defaults: { _controller: LoginBundle:Login:validation }
login_login_verification:
pattern: /ajax_verify
defaults: { _controller: LoginBundle:Login:verification }
login_dashboard:
pattern: /dashboard
defaults: { _controller: LoginBundle:Dashboard:index }
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// twig file
{% block message %}
hello ! {{ email | json_encode | raw }}
welcome to dashboard .
{% endblock%}
The only wrong thing is this your are rendering the index page . after successfull login you have to redirect you page by
window.location = "http://somewhereelse.com";
Or You can also append data in any div , Its on to you which way you want to follow .