I am trying to work with jQuery in Zend Framework. And the use case I am facing problem is when I am trying to save data to the db. Always receiving ajax error though the data is being saved in the database.
The controller that I am using to add data is like below:
public function addAction()
{
// action body
$form = new Application_Form_Costs();
$form->submit->setLabel('Add');
$this->view->form = $form;
if($this->getRequest()->isPost())
{
$formData = $this->getRequest()->getPost();
{
if ($form->isValid($formData))
{
$costTitle = $this->_request->getPost('costTitle');
$costAmount = $this->_request->getPost('costAmount');
$costs = new Application_Model_DbTable_Costs();
if($costs->addCosts($costTitle, $costAmount))
{
echo "suces";
}
// $this->_helper->redirector('index');
}
else
{
$form->populate($formData);
}
}
}
}
And the jQuery that is passing data is as follows:
$('#cost').submit(function (){
data = {
"cost_title":"cost_title",
"cost_amount":"cost_amount"
};
$.ajax({
dataType: 'json',
url: '/index/add',
type: 'POST',
data: data,
success: function (response) {
alert(response);
},
timeout: 13*60*1000,
error: function(){
alert("error!");
}
});
});
I am getting always error.
What is the problem in this code?
Thanks in advance.
I would strongly recommend you implement the newest Zend/AJAX methods.
// Inside your php controller
public function init()
{
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('add', 'json')
->initContext();
}
public function addAction()
{
// action body
$form = new Application_Form_Costs();
$form->submit->setLabel('Add');
$this->view->form = $form;
if($this->getRequest()->isPost())
{
$formData = $this->getRequest()->getPost();
{
if ($form->isValid($formData))
{
$costTitle = $this->_request->getPost('costTitle');
$costAmount = $this->_request->getPost('costAmount');
$costs = new Application_Model_DbTable_Costs();
if($costs->addCosts($costTitle, $costAmount))
{
// The view variables are returned as JSON.
$this->view->success = "success";
}
}
else
{
$form->populate($formData);
}
}
}
// Inside your javascript file
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.get("/index/add/format/json", function(data) {
alert(data);
})
.error(function() { alert("error"); });
For more information:
AjaxContext (ctrl+f)
jQuery.get()
I think you are getting an error on Session output. Why don't you disable the view-renderer, since you just need an answer for the request echo "suces" which is more than enough for your AJAX.
Related
please I need you to help me with a problem in Server xampp, laravel 6 with axios, apparently it doesn't allow me to request ajax. attached image for more detail. Thanks in advance.
methods: {
loadEstados() {
axios.get(`http://localhost/estados/pais/${this.selected_pais}`).then((response) => {
this.careers = response.data;
})
.catch(function (error) {
console.log(error);
});
Route::get('estados/pais/{pais_id}', 'UsuarioController#getEstadosByPais');
public function getEstadosByPais($pais_id)
{
if ($request->ajax()) {
$estados = Estado::where('id', $pais_id)->get();
foreach ($estados as $estado) {
$estadoArray[$estado->id] = $estado->esta_nombre;
}
return response()->json($estadoArray);
}
//
}
browser error
I found the solution, the problem was how i put the address
in the web.php
Route::get('estados/pais/', 'UsuarioController#getEstadosByPais');
in the file js
if (this.selected_pais !="") {
axios.get(`http://127.0.0.1:80/estados/pais`,
{params: {pais_id: this.selected_pais} }).then((response) => {
this.estados = response.data;
document.getElementById('estado').disabled =false;
});
}
in the file controller
public function getEstados(Request $request)
{
if ($request->ajax()) {
$estados = Estado::where('id', $request->pais_id)->get();
foreach ($estados as $estado) {
$estadoArray[$estado->id] = $estado->esta_nombre;
}
return response()->json($estadoArray);
}
}
Including port if necessary
thank you very much
I am trying to make the request
....port/trimService/fragments/?fragment_name=:fragmentName
However if I try to make the "?fragment_name" a parameter, it breaks. As I am going to have more requests, my action with change so I cannot leave it in the url portion of the resource.
angular.module(foo).factory('FragmentService', ['$resource',
function ($resource)
{
var FragmentService = $resource('.../fragments/:action:fragmentName',
{},
{
'getFragments':
{
method: 'GET',
isArray: true,
params:
{
fragmentName: "#fragmentName",
action: "?fragment_name="
}
}
});
return FragmentService;
}
]);
As of right now, I have no idea what my URL is actually outputting.
EDIT: I changed my resource as /u/akonsu had mentioned below. I also added my controller as it is still not working correctly.
angular.module(foo).factory('FragmentService', ['$resource',
function ($resource)
{
var FragmentService = $resource('.../fragments/',
{},
{
'getFragments':
{
method: 'GET',
isArray: true,
params:
{
fragmentName: "#fragmentName",
}
}
});
return FragmentService;
}
]);
angular.module(foo).controller('FragmentController', ['$scope', 'FragmentService',
function ($scope, FragmentService)
{
$scope.fragmentQuery = {
fragmentName: 'a',
};
$scope.fragmentQuery.execute = function ()
{
if ($scope.fragmentQuery.fragmentName == '')
{
$scope.fragments = {};
}
else
{
$scope.fragments = FragmentService.getFragments(
{
fragmentName: $scope.fragmentQuery.fragmentName,
});
}
};
$scope.fragmentQuery.execute();
}
]);
Try omitting the query string altogether in the resource URL and just supply your fragmentName as a parameter to the action call. It should add it to the query string if it is not in the list of URL parameters.
$resource(".../port/trimService/fragments/").get({fragmentName: 'blah'})
I am doing the following stuff when a form is submitted. But I get this error:
Error decoding response: SyntaxError: syntax error
Here is my onSubmit success function:
onSubmit: function() {
var vals = this.form.getValues();
Ext.Ajax.request({
url: 'ticketSession.php',
jsonData: {
"function": "sessionTicket",
"parameters": {
"ticket": vals['ticket']
}
},
success: function( result, request ) {
var obj = Ext.decode( result.responseText );
if( obj.success ) {
//alert ('got here');
th.ticketWindow.hide();
Web.Dashboard.loadDefault();
}
},
Here is my ticketSession.php
<?php
function sessionTicket($ticket) {
if( $_REQUEST['ticket'] ) {
session_start();
$ticket = $_REQUEST['ticket'];
$_SESSION['ticket'] = $ticket;
echo("{'success':'true'}");
}
echo "{'failure':'true', 'Error':'No ticket Number found'}");
}
?>
I also modified my onsubmit function but didnt work:
Ext.Ajax.request({
url: 'ticketSession.php',
method: 'POST',
params: {
ticket: vals['ticket']
},
i am simply echoing this but I still get that error
echo("{'success':'true'}");
Maybe this can help you. It's a working example of an ajax-request which is nested in a handler.
var deleteFoldersUrl = '<?php echo $html->url('/trees/delete/') ?>';
function(){
var n = tree.getSelectionModel().getSelectedNode();
//FolderID
var params = {'folder_id':n['id']};
Ext.Ajax.request({
url:deleteFoldersUrl,
params:params,
success:function(response, request) {
if (response.responseText == '{success:false}'){
request.failure();
} else {
Ext.Msg.alert('Success);
}
},
failure:function() {
Ext.Msg.alert('Error');
}
});
}
Heres the jsfiddle, jsfiddle.net/kqreJ
So I was using .bind no problem for this function but then I loaded more updates to the page and found out that .bind doesn't work for content imported to the page but just for content already on the page! Great!
So I switched it up to .delegate which is pretty cool but now I can't figure out how to .bind .unbind my function the way it was???
Function using .bind which worked perfect... except didn't work on ajax content.. :(
$('.open').bind("mouseup",function(event) {
var $this = $(this), handler = arguments.callee;
$this.unbind('mouseup', handler);
var id = $(this).attr("id");
var create = 'nope';
var regex = /\d+$/,
statusId = $('#maindiv .open').toArray().map(function(e){
return parseInt(e.id.match(regex));
});
var divsToCreate = [ parseInt(id) ];
$.each(divsToCreate, function(i,e)
{
if ( $.inArray(e, statusId) == -1 ) {
create = 'yup';
}
});
if( create == 'yup' ) {
if(id) {
$.ajax({
type: "POST",
url: "../includes/open.php",
data: "post="+ id,
cache: false,
success: function(html) {
$('.open').html(html);
$this.click(handler);
}
});
}
}
});
New function using .delegate that is not binded and creates multiple instances?
$('#maindiv').delegate("span.open", "mouseup",function(event) {
var $this = $(this), handler = arguments.callee;
$this.unbind('mouseup', handler);
var id = $(this).attr("id");
var create = 'nope';
var regex = /\d+$/,
statusId = $('#maindiv .open').toArray().map(function(e){
return parseInt(e.id.match(regex));
});
var divsToCreate = [ parseInt(id) ];
$.each(divsToCreate, function(i,e)
{
if ( $.inArray(e, statusId) == -1 ) {
create = 'yup';
}
});
if( create == 'yup' ) {
if(id) {
$.ajax({
type: "POST",
url: "../includes/open.php",
data: "post="+ id,
cache: false,
success: function(html) {
$('.open').html(html);
$this.click(handler);
}
});
}
}
});
I've spent hours trying to figure this out because I like learning how to do it myself but I had to break down and ask for help... getting frustrated!
I also read that when your binding and unbinding .delegate you have to put it above the ajax content? I've tried using .die() and .undelegate()... Maybe I just don't know where to place it?
Take a look at undelegate
It does to delegate what unbind does to bind.
In your case, I think it'd be something like:
$('#maindiv').undelegate("span.open", "mouseup").delegate("span.open", "mouseup" ...
Then you can drop the $this.unbind('mouseup', handler); within the function.
My Zend controller is like below:
public function deleteAction()
{
$this->_helper->layout->disableLayout();
$id = (int)$this->_request->getPost('id');
$costs = new Application_Model_DbTable_Costs();
if($costs->deleteCosts($id)){
$this->view->success = "deleted";
}
}
And ajax call I ma using to post data is :
$.ajax({
dataType: 'json',
url: 'index/delete',
type: 'POST',
data:id,
success: function () {
alert("success");
},
timeout: 13*60*1000,
error: function(){
console.log("Error");
}
});
And in my delete.phtml the code is like:
<?php
if($this->delete === true):
echo 'true';
else:
echo 'Sorry! we couldn\'t remove the source. Please try again.';
endif;
?>
The response is returning the html.
Its my first project with Zend Framework.
Thanks in advance.
Your controller action is returning HTML, not JSON.
You should consider using the AjaxContext action helper
public function init()
{
$this->_helper->ajaxContext->addActionContext('delete', 'json')
->initContext();
}
public function deleteAction()
{
$id = (int)$this->_request->getPost('id');
$costs = new Application_Model_DbTable_Costs();
try {
$costs->deleteCosts($id));
$this->view->success = "deleted";
} catch (Exception $ex) {
$this->view->error = $ex->getMessage();
}
}
The only other thing you need to do here is supply a format parameter of json in the AJAX request, eg
$.post('index/delete', { "id": id, "format": "json" }, function(data) {
if (data.error) alert("Error: " + data.error);
if (data.success) alert("Success: " + data.success);
}, "json");
You may want to handle the response differently but that should give you an idea.