Develop Reference

Can't get a json response from Cakephp 3 controller

I am trying to send an ajax request to a Cakephp 3 controller.
The controller will find the data from the model and return it to the same view to be displayed,
The view and the js function are as follows
<script type = "text/javascript" language = "javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type : "POST",
url : "<?php echo $this->Url->build(['controller' => 'users', 'action' => 'getByCategories', '_ext' => 'json']); ?>",
success: function (data){
console.log(JSON.stringify(data));
}
});
});
});</script>
The above function is in the index view of the controller.
Upon the click of the button a request will be sent to the getByCategories function in the same controller.
The getByCategories function is as follows
public function getByCategories()
{
$id = 33;
$this->request->allowMethod(['ajax']);
$this->autoRender = false;
$cat = $this->Users->Categories->get($id);
if ($this->Users->Categories->childCount($cat) > 0)
{
$result = $this->Users->Categories->find('all', ['conditions' => ['parent_id' => $id]]);
$this->set(compact($result));
$this->set('_serialize', $result);
}
else
{
$result['Machines'] = $this->Users->Machines->find('all', ['conditions' => ['category_id' => $id]]);
$result['Medias'] = $this->Users->Medias->find('all', ['conditions' => ['category_id' => $id]]);
$this->set(compact($result));
$this->set('_serialize', $result);
}
}
The ajax response from this function is alway empty but the debugkit display the _serialize variable correctly.
I have enabled the json extensions in the routes.php file. the variable for the this call in the debugkit is as follows
debugkit varables
I would appreciated if someone can guide to get the variable from the debugkit in the ajax response
Thank you in advance

Looks like you're close, except for a misunderstanding of how _serialize (and maybe either set or compact) works. Check the manual for all the details, but what you should be setting in _serialize is either a list of names of variables, or else true to serialize everything.
Also, if you're using compact with set, you give it names of variables, not the variables themselves.
So, what you should be using there is probably:
$this->set(compact('result'));
$this->set('_serialize', ['result']);

AJAX Sql Update not working

I stripped down my code to make this question a little simpler.
This is my PHP at the top of the file...
if (isset($_POST['action'])) {
$field = $_POST['db_field'];
$value = $_POST['db_value'];
$fields=array('points'=>($value));
$db->update('teams',$field,$fields);
}
Then I have this script on the same page...
<script type="text/javascript">
function performAjaxSubmission() {
$.ajax({
url: 'points3.php',
method: 'POST',
data: {
action: 'save',
field: $(this).attr("db_field"),
val: $(this).attr("db_value")
},
success: function() {
alert("success!");
}
});
return false; // <--- important, prevents the link's href (hash in this example) from executing.
}
jQuery(document).ready(function() {
$(".linkToClick").click(performAjaxSubmission);
});
</script>
Then I have 2 super simple buttons for testing purposes...
Click here-1
Click here-2
Currently, it just basically passes null to the database and gives me a success message.
If I change...
$field = $_POST['db_field'];
$value = $_POST['db_value'];
To...
$field = 233;
$value = 234;
It puts the number 234 in the proper column of item 233 in my database as I would like. So basically whatever is in that link is not getting passed properly to the post, but I don't know how to fix it. Any help would be awesome.

Change your data variable to this
data: {
action: 'save',
db_field: $(this).attr("db_field"),
db_val: $(this).attr("db_value")
},
And it won't send null value

Your variable name in js is this :
**field**: $(this).attr("db_field"),
**val**: $(this).attr("db_value")
So in php file use:
$_POST['field'];
$_POST['val'];
to get values of these two variables.

How to beat my CodeIgniter bad practices

Accessing functions from the view?
I know the correct way should be that the controllers handles all the function calls, but
If I need to call another function and pass a variable that comes from a db data in a loop in view eg.
view:
if($persons != ""){
foreach($persons as $p){
echo $p->name;
echo $p->lastname;
// Now I need to call a function and pass parameters from loop
$is_banned = $this->model_users->checkIfBanned($p->name);
echo $is_banned;
}
}
How should I do this the right way in the controller?
Other thing is the javascript ajax calls. I have been putting lots of javascript in the controllers when I need to receive more than one response. For instance, if i need to get all the posts from a user via ajax and get the response to update the posts div, plus get the number of posts and update the post count div.
The wrong way I've been doing:
eg. js:
function insertNewPost(){
var the_text = $('#post_text_input').val();
if(the_text != ""){
$.ajax({
type:"POST",
url:base_url+"controller/insertNewPost",
data: {post_text: the_text},
cache:false,
success:function(response){
$('#post_output').prepend(response);
$('#post_text_input').val('');
}
});
}
Controller:
function insertNewPost(){
if($this->session->userdata('is_logged_in')){
$this->load->model('model_users');
$this->load->model('model_posts');
$email = $this->session->userdata('email');
$myid = $this->model_users->getUserId($email);
$post_text= $this->FilterData($this->input->post('post_text'));
if($this->model_posts->insertNewPost($myid,$post_text)){
$count = $this->model_posts->countPosts($myid);
echo 'More recent: '.$post_text;?>
<script>
var count = "<?php echo $count;?>";
$('#posts_count').html(count);
</script>
<?php
}
}else{
redirect("inicio");
}
}
Is it possible to get 2 responses at the same time and update content from 2 divs at the same time? How would I get hold of the $count variable and pass it on the same ajax response?
Any light shed would be very greatful.
Thanks in advance
As suggested by #charlietfl:
Changed the Controller:
function insertNewPost(){
if($this->session->userdata('is_logged_in')){
$this->load->model('model_users');
$this->load->model('model_posts');
$email = $this->session->userdata('email');
$myid = $this->model_users->getUserId($email);
$post_text= $this->FilterData($this->input->post('post_text'));
if($this->model_posts->insertNewPost($myid,$post_text)){
$content = 'More recent: '.$post_text;
$count = $this->model_posts->countPosts($myid);
$items = array($content,$count);
echo json_encode($items);
}
}else{
redirect("inicio");
}
}
And changed the js function:
function insertNewPost(){
var the_text = $('#post_text_input').val();
var post_count = '#posts_count';
if(the_text != ""){
$.ajax({
type:"POST",
url:base_url+"controller/insertNewPost",
data: {post_text: the_text},
cache:false,
success:function(response){
var content = json_encode(response);
$('#post_output').prepend(content[0]);
$(post_count).html(content[1]);
$('#post_text_input').val('');
}
});
}
it's not happening, i must be doing something wrong.

For your first problem:
Its OK the way you doing.But I don't recommend it because it is not programmer friendly.
You can solve it many way.
Here is one solution that you want.
Process your controller before sending data at view this way after getting persons
for($i=0;$i<sizeof($persons);$i++)
{
$persons[$i]->is_banned=$this->model_users->checkIfBanned($persons[$i]->name);
}
Now send this new $persons to your view.Your new view code will be like this
if($persons != "")
{
foreach($persons as $p)
{
echo $p->name;
echo $p->lastname;
echo $p->is_banned;
}
}
Hope you understand this.
For your second problem you can use #charlietfl solution.
Here is summary:
Instead of calling multiple ajax call- call one ajax and return all the results as array.Like
function insertNewPost()
{
//do your stuff;
$data['content']="something";//it may be anything array,string
//do your stuff;
$data['count']="something";
//do your stuff;
$data['moreresult']="something";
header('Content-type: application/json');
echo json_encode($data);
exit();
}
Now at your js
function insertNewPost()
{
var the_text = $('#post_text_input').val();
if(the_text != "")
{
$.ajax({
type:"POST",
url:base_url+"controller/insertNewPost",
data: {post_text: the_text},
dataType: "JSON",
success:function(response){
//here you will get datas as response.content,response.count,response.moreresult
//Now use them as you want as example
$('#post_output').prepend(response.content);
$('#post_text_input').val(response.count);
$('#anotherid').val(response.moreresult);
}
});
}
Hope it will help you.

Ajax driven content using CodeIgniter

I'm making an web that is a single-page website interacting with the server through Ajax in CodeIgniter. The general coding is of the following type:
controller (user.php):
public function get_user_content() {
$id = $this->input->post('id');
$hits = $this->user_model->user_data($id);
$s = '';
foreach ($hits as $hit) {
$s .= $hit->name;
$s .= $hit->age;
}
echo $s;
}
model(user_model.php):
function user_data($id) {
//do sql operation
return $query->result();
}
view:
...
...
Click here for user details
...
...
javascript:
('.user-data').click(get_user_data);
....
....
function get_user_data(response) {
return $.ajax({
type: "POST",
url: "<?php echo base_url();?>index.php/user/get_user_content",
data: { id: this.id },
success: function(response) {
$("#somediv").append(response);
$(".someclass").click(another_function);
},
error: function(error) {
alert("Error");
}
});
}
So, looking at the above javascript, there are separate functions for all actions that send some data to the server and the particular html content is updated via Ajax.
I had the following questions (I'm just new to this stuff):
1. Is there any better way of doing ajax in javascript than my implementation.
2. I'm not using the concept of views in CodeIgniter. I just `echo` results through my controller functions that gets embedded in javascript. This is because I want dynamic update in my app. It is a single page and there is no concept of new-page/new-tab. Is there any better way?
I'm not aware of any open-source projects that might make it easier/more optimized.

For making code more simplified, readable & with great coding standard answer will be yes for both to improve your javascript code & way you are getting a response from the Ajax call.
Improve Javascript :
You might have one common js included in you header portion, if not create & include one. This common jar contains only common functions throughout the application. Create one function with the name may be like sendAjaxRequest() in that common.js. This function will have some parameters like divId (refresh div id), url(post url), options(array of options) & function will look like this:
function sendAjaxRequest(strDivId, strRequestUrl, options) {
options = options || {};
var defaultOptions = {url: strRequestUrl, type: 'POST', beforeSend: function(request,options){showLoadingImage(strDivId);}, success: function(html){$('#'+strDivId).html(html); removeLoadingImage(strDivId); }};
options = $.extend({},defaultOptions,options);
$.ajax(options);
}
Call this function from where ever required on application.
like
('.user-data').click( function() { sendAjaxRequest('somediv', url,{data: { id: this.id }}) });
Benefit : This method is very useful in the future when you want to keep google analytics on ajax call also or want to track your ajax calls. It is always good to have common functions.
Resposnse from ajax call: You can load views in Controller->function in case of ajax call also, nothing need to change or configure for this. Use of this way is always good practice to maintain standardness & readablity in the code.
Note : Here in this case you might worry about using a second action on load of your first Ajax call, for this standard way is to write second action on load of view of that particular Ajax call view (Write second click code in that particular view only) like
('.someclass').click( function() { sendAjaxRequest('someOtherDiv', otherUrl,{data: { id: this.id }}) });
In short at the end user divide & conquer rule (Divide an html page into blocks & create the huge page) to create good applications. Its really fantastic way, as I am using this way in my codings overall.

1- There is other ways to do ajax calls , being better or not is based on your needs, This post clears this point
2- your way is good, still you could use some enhancements to your functions to be a complete web-services same as handling errors - in case - and to return the output data as json allowing you to control it from your JavaScript function for a better handling & representation.
3- from what i understood you're getting data for single user each time ,in this case using $query->row() would be make your life easier extracting the data than using $query->result() , but in case you are getting multiple records you could loop it withing your JavaScript function.
here's another approach to your example with little enhancements that might be helpful :
controller (user.php):
public function get_user_content($id) {
$output -> hit = $this -> user_model -> user_data($id);
if (!$output -> hit) {
$output -> msg = "NORECORDS";
} else {
$output -> msg = "SUCCESS";
}
echo json_encode($output);
}
model(user_model.php):
function user_data($id) {
//do sql operation
return $query -> row();
}
JavaScript :
function get_user_data(response) {
$.get("<?php echo base_url();?>index.php/user/get_user_content/" + this.id, function(data) {
if (data.msg != 'SUCCESS') {
alert(data.msg);
return;
}
var hit = data.hit;
$("#somediv").append("Name: " + hit.name + "Age: " + hit.age);
$(".someclass").click(another_function);
}, "json");
}

First Answer:
The ajax request seems fine, you can add dataType option also to expect particular type of response,
As you are using post you can use jquery.post as an alternative
Example
$.post( "<?php echo base_url();?>index.php/user/get_user_content", function(data) {
alert( "success" );
}, 'html') // here specify the datatype
.fail(function() {
alert( "error" );
})
You can also use done callback instead of success
Second answer:
Controller
public function get_user_content() {
$id = $this->input->post('id');
$hits = $this->user_model->user_data($id);
$user_array = array();
foreach ($hits as $hit) {
$temp_array = array();
$temp_array = array('name' => $hit->name);
$temp_array = array('age' => $hit->age);
$user_array = array($temp_array);
}
$this->load->view('user', $user_array);
}
Modal
Remains the same
View (user.php)
example say user.php
<?php
echo "<div class='somediv'>";
if (sizeof($user_array)) {
for ($row = 0; $row < sizeof($user_array); $row++ ) {
echo "User Details: Name - " . $user_array[$row]['name'] . ", Age - " . $user_array[$row]['age'];
echo "<br/>";
}
} else {
Click here for user details
}
echo "</div>";
?>
Javascript
$('.user-data').on('click' function () { // better to use event delegation as content is loaded dynamically
get_user_data();
});
function get_user_data() {
$.post( "<?php echo base_url();?>index.php/user/get_user_content", function(data) {
alert( "success" );
$("#somediv").append(data);
$(".someclass").click(another_function);
}, 'html') // here specify the datatype
.fail(function() {
alert( "error" );
});
}
Reference
stackoverflow.com/questions/18471627/codeigniter-load-a-view-using-post-and-ajax

Issue with HTML being returned in a $.ajax

Hey guys I have the following code:
$(document).ready(function () {
$(".atf-submit").click(function () {
atf_name = $(this).parent().parent().find(".user_table");
atf_amount = $(this).parent().parent().find(".user_atf");
runATFinsider();
});
});
function runATFinsider(){
var urlatfinsider = '/pcg/ATF/updateATF_window.php';
var tagatfinsider = $("#insider_dialog");
var promise1a = showUrlInDialogATFinsider(urlatfinsider);
var promise2a = sendUpdateATFwindow();
$.when(promise1a, promise2a).done(function(data1, data2) {
tagatfinsider.html(data1[0]).dialog({
width: '100%',
modal: true
}).dialog('open');
//$('.updaterATF_outerbody').text(data2[0].atfName),
//$('.updaterATF_outerbody').text(data2[0].atfAmount)
//alert(data2[0].atfname);
console.log(data2);
});
}
function showUrlInDialogATFinsider(urlatfinsider)
{
return $.ajax({
url: urlatfinsider
});
}
function sendUpdateATFwindow()
{
return $.ajax({
data: {
'atfName': atf_name.val(),
'atfAmount': atf_amount.val()
}
});
}
Look at the top and lets say the values of atf_name and atf_amount are 'joe and 0' When I do a console.log or alert(data2[0].atfName) it does not exist? It is not defined and when I did the console.log(data2), in place of where the values should be is abunch of HTML of the table and all that the values came from. I don't know why this is happening and it makes no sense because when I do alert(aft_name.val()) I would get the correct value that was taken?
If you could give me a hand I would appreciate it. Also this code runs when a dialog window is already opened and than this opens another one. I don't think that should be a problem.
David
Here is the HTML:
<input type='hidden' class='user_table' value='$memusername'/>
<input type='hidden' class='user_atf' value='$memATF'/>
These are inside a table.

Putting this as an answer because I pointed out you don't need to ajax call to get the values of atf_name and atf_amount in the comments to your solution. My suggestion, in order to keep the changes to your code to a minimum, would be to change the sendUpdateATFwindow() to:
function sendUpdateATFwindow() {
return {'atfName': atf_name.val(), 'atfAmount': atf_amount.val()};
}

Not sure but I've done jQuery AJAX return values like this:
$.ajax({
type: "POST",
url: url,
data: 'string'
}).done(function(returnVar) {
/* Do something with returnVar*/
});
I honestly don't know if this will help, but it's what I've used personally.
EDIT:
Also the return in AJAX file has to be sent out. I mainly deal with PHP files so I just do
ECHO $myVariable;

Hey guys I figured it out. I actually needed to create a separate file to return the values that were sent in so I just created this:
$name_ATF = trim( $_POST['atfName'] );
$amount_ATF = trim( $_POST['atfAmount'] );
$returnArray = array( 'atfName' => $name_ATF, 'atfAmount' => $amount_ATF);
echo json_encode($returnArray);
Worked great. Thanks guys for your hard work!
David