unable to get response of ajax request in symfony2 - javascript

I am new to symfony2. Basically I want to send a variable name to a file named sub.html.php. I am making an ajax request as following :
function onsub()
{
alert(document.getElementById('source').value);
var http=new XMLHttpRequest();
var name="rohit";
http.open("POST", {{path('task1')}}, false);
http.onreadystatechange = function()
{
alert(http.status);
if(http.readyState == 4 && http.status == 200)
{
alert('i m back');
}
else
{
alert('sorry');
}
}
http.send();
return false;
}
I have defined the route of task1 as follow:
task1:
pattern: /task1/
defaults: {_controller:AcmeTaskBundle:Task:task1}
and in TaskController I have defined task1Action as follow:
public function task1Action()
{
return $this->render('AcmeTaskBundle:Default:sub.html.php');
}
but I am unable to call the sub.html.php file anyhow. How can I call this file?

You can forward the request from the TaskController::task1Action() like so...
$response = $this->forward('VendorOtherBundleName:ControllerName:ActionName', array(
'some_variable' => $value
));
You can read more here

Related

Send array with vanilla Js from Ajax to Laravel controller

I would like to send an array with elements to my laravel controller with vanilla JS, (I don't want to use Jquery). But I can't get it work... I found several solutions on web with trying to make a json object and so on but nothing wanted to work...
This is my code:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200){
alert('sent');
}
};
xhttp.open("GET", '{{route('profile.toggleCategory', $user)}}', true);
xhttp.send(categories);
and my laravel controller:
public function toggleCategory(Request $request, User $user)
{
dd($categories = $request->categories);
$user->categories()->sync(collect($categories));
}
I changed a few things and now it is working!
The working code:
web.php:
Route::post('{user}/togglecategory', 'Site\ProfileController#toggleCategory')->name('toggleCategory');
Javascript code:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200){
alert('send');
}
};
xhttp.open("POST", '{{route('profile.toggleCategory', $user)}}', true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.setRequestHeader("X-CSRF-TOKEN", document.head.querySelector("[name=csrf-token]").content );
xhttp.send("categories="+categories);
});
Laravel Controller:
public function toggleCategory(Request $request, User $user)
{
$categories = explode(',', $request->categories);
$user->categories()->sync($categories);
}

Invalid method piSession.buildPageInteractionSession

hi I wrote simple AJAX call to php file I am getting error in my console . Request should go to the server and return back in the html input field . i am not able to solve
Below is my Code
HTML:
<label>Input your text: </label><input type="text" id="user_text" onkeyup="update1()"/></br></br>
<label>Response here: </label><input type="text" id="server_response" readonly/>
Javascript:
function update1(){
var current_text = document.getElementById("user_text").value;
var http = new XMLHttpRequest();
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
document.getElementById('server_response').value = response;
}
http.open("GET" , "http://localhost/inderstand_Ajax/server.php?user_text="+current_text , true);
http.send();
}
};
PHP:
<?php
$data = $_GET;
$user_text = $_GET['user_text'];
$response = strtoupper($user_text)
echo $response;
?>
Error in the console :
Uncaught (in promise) Object {message: "Invalid method piSession.buildPageInteractionSession", stack: "Error: Invalid method piSession.buildPageInteracti…on↵ at true-key://data/scripts/core.js:10:8889"}
Your code is wrong.
It should be:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("server_response").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://localhost/inderstand_Ajax/server.php?user_text="+current_text, true);
xhttp.send();
and not:
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
document.getElementById('server_response').value = response;
}
http.open("GET" , "http://localhost/inderstand_Ajax/server.php?user_text="+current_text , true);
http.send();
}
you cannot send the request inside onreadystatechange.
This problem occurred also for me today.
I removed true-key from my chrome-browser and now the error in the console is gone.
Try remove true-key from your chrome-browser and tell if the error still occurs in the console.
This is a problem with the latest version (at time of writing) of the True Key chrome extension.

AJAX xmlhttp.open sumit data using POST method

I am trying to send a form data using POST method and xmlhttp.open
Please help find the error in my code
function submitChat() {
if (form1.msg.value == '' ) {
alert ('ALL FIELDS ARE MANDATORY');
return;
}
var xmlhttp = new XMLHttpRequest();
var msg = form1.msg.value;
var params = 'msg=helloooooooo';
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', 'rtest.php?rid=14', true);
xmlhttp.send(params);
}
Everything is fine and it is working with GET method. but POST method is not working. Please help.

Using XMLHttpRequest for Mozilla Extension development

I have some problems of calling a php file using Ajax in my
Mozilla Extension.
The javascript (Ajax) and php are both located at directory /myextension/content, I am call the php using
function ajaxFunction(){
var req = new XMLHttpRequest();
req.open('GET', 'myphp.php', true);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
if(req.status == 200)
alert(req.responseText);
else
alert("Error\n");
}
};
req.send(null);
}
, and my php looks like
<? php
echo "Server Received with thanks!";
?>
I keep geting "alert("Error\n");".
Did i do anything wrong?
Well formatted Ajax code for Firefox:
var URL="http://yourdomain.com/Work.php?val=Test";
var objXmlHttp = null;
try
{
objXmlHttp = new XMLHttpRequest();
}
catch(e)
{return;}
objXmlHttp.onreadystatechange=function()
{
if ((objXmlHttp.readyState == 4 || objXmlHttp.readyState == "complete") && objXmlHttp.status == 200)
{
//Write code for success
}
else if (objXmlHttp.status == 404)
{
//OnError
}
else
{
//OnWait
}
}
objXmlHttp.open("GET", URL, true);
objXmlHttp.send(null);

send an http request without XHR in an event handler

How to send an http request with either post/get method using javascript as an eventhandler? Thanks! Paul
Okay, you don't want to use Ajax.
You can use an event handler to submit a form!
<a href='#' onclick='cow_submit("zoodle")'>send</a>
<form method='post' id='formie' action='find_some_action.php'>
<input type='hidden' id='snoutvar' name='snoutvar' value='snout'>
</form>
<script>
function cow_submit(a_var_to_set){
var plip=document.getElementById('formie');
var snout=document.getElementById('snoutvar');
snout.value=a_var_to_set;
plip.submit();
}
See https://developer.mozilla.org/en/DOM/form
use XmlHttpRequest
sample code:
var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "test.xml");
client.send();
function handler()
{
// your handler
}
You can use XMLHttpRequest for sending request from javascript
Sending GET request
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("GET", url+"?"+params, true);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(null);
Sending POST request
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
And don't forget to encode parameters using encodeURIComponent for param value encoding in case of user input
e.g.
params="paramName="+encodeURIComponent(paramValue);
The standard class for doing this is XmlHttpRequest, but it's not universally supported. On some browsers you have to use ActiveXObject("Microsoft.XMLHTTP") instead.
Look into the jQuery system which provides HTTP download (AJAX style) methods regardless of the underlying browser APIs (hence avoiding a lot of the code shown in Tzury's answer).
The jQuery AJAX documentation is at http://docs.jquery.com/Ajax
You should try to add atring in a hidden field and then call the form.submit() to submit your form into the page define in action.
<script type="text/javascript">
function doTestFormSubmit(yourString) {
document.getElementById("myString").value=myString;
document.getElementById("testForm").submit();
}
</script>
<form name="testForm" id="testForm" action="yourDesiredPage.php" method="post">
<input type="hidden" name="myString" id="myString" value=""/>
</form>
Ajax Tutorial (http://code.google.com/edu/ajax/tutorials/ajax-tutorial.html)
var obj;
function ProcessXML(url) {
// native object
if (window.XMLHttpRequest) {
// obtain new object
obj = new XMLHttpRequest();
// set the callback function
obj.onreadystatechange = processChange;
// we will do a GET with the url; "true" for asynch
obj.open("GET", url, true);
// null for GET with native object
obj.send(null);
// IE/Windows ActiveX object
} else if (window.ActiveXObject) {
obj = new ActiveXObject("Microsoft.XMLHTTP");
if (obj) {
obj.onreadystatechange = processChange;
obj.open("GET", url, true);
// don't send null for ActiveX
obj.send();
}
} else {
alert("Your browser does not support AJAX");
}
}
function processChange() {
// 4 means the response has been returned and ready to be processed
if (obj.readyState == 4) {
// 200 means "OK"
if (obj.status == 200) {
// process whatever has been sent back here:
// anything else means a problem
} else {
alert("There was a problem in the returned data:\n");
}
}
}

Categories

Resources