Ajax with CodeIgniter - data not received on server side - php

I have the following AJAX:
$.ajax({
type: "POST",
url: base+"tree/plant/",
data:{
name: $('#field_treename').val(),
summary: $('#field_summary').val(),
description: $('#field_description').val(),
address: $('#field_url').val(),
category: $('#field_category').val()
}
})
.done(function(resp){
$('#plant-tree-inner').html(resp);
});
base is my base URL, tree is a controller and plant is a method in that controller.
The URL is correct, the controller and method are in place, with correct names. I've made sure of that by echoing a string in the plant method and it appeared correctly on the client after the AJAX response.
However, none of the post data seems to be arriving at the server.
Doing echo $this->input->post('name'); inside the plant method gives an empty string. Doing var_dump($_POST) gives an empty array. I even tried giving parameters to the plant method but that just throws a missing parameter error.
So where is the data getting lost and why?
EDIT: I see now that my question is wrong. It has nothing to do with CodeIgniter, since the data isn't being sent at all. The field values are undefined according to Javascript, but they certainly exist in HTML:
<input type="text" id="field_treename" placeholder="Tree name" value="" />

Seems like something is wrong with jQuery library.
For test' sake, try to send request avoiding it.

You may try this also..
$.ajax({
type: "POST",
url: base+"tree/plant/",
data:{
name: $('#field_treename').val(),
summary: $('#field_summary').val(),
description: $('#field_description').val(),
address: $('#field_url').val(),
category: $('#field_category').val()
}
success:function(resp){
$('#plant-tree-inner').html(resp);
}
});

Try to simulate the problem in the very basic method like creating another directory in your localhost or server like this and create files as describe below.
in the index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST Sending Problem</title>
<script src="jquery-1.12.2.js"></script>
</head>
<body>
Link
<script src="custom_function.js"></script>
</body>
</html>
Create js file for example test.js and put this as test
function test (id, base) {
$.ajax({
type: "POST",
data: {
'id': id
},
url: base,
success: function(data) {
alert(data);
},
error: function(data) {
alert('no data');
}
});
}
Next create a php file your_phpfile.php
<?php
if (isset($_POST['id'])) {
echo $_POST['id'];
} else {
echo "no-result";
}
?>
This would help you determine the problem. If this works fine, try applying it using codeigniter.
Good Luck

User this one..
var request = "name="+$('#field_treename').val()+"&"
request += "summary="+$('#field_summary').val()+"&"
request += "description="+$('#field_description').val()+"&"
request += "address="+$('#field_url').val()+"&"
request += "category="+$('#field_category').val()
and in set as data=request. This should work.

Related

How do you save a file to a directory given by an input type="text" with php?

I have a html page with jQuery and I used ajax to send data to the a php file to save the data.
I have seen other questions like this but none of them seemed to match my purpose.
The data is an iframe's srcdoc.
My html looks like this:
<iframe srcdoc="<h1>hello</h1>" id="iframe"></iframe>
<br />
<input type="text" placeholder="Filename to save as..." id="fn">
<input type="button" value="Save" onclick="saveDoc(document.querySelector('#fn').value)">
My jQuery and JS looks like this:
function saveDoc(e) {
let iframe = document.querySelector("#iframe");
let data = {"srcdoc": iframe.srcdoc, "lnk": e};
$.ajax({
type: "POST",
url: "saver.php",
dataType : "text",
contentType: "application/json",
data: data,
cache: false,
timeout: 3000,
success: function (data) {
alert("SUCCESS");
console.log(data);
},
error: function (e) {
alert(e);
}
});
}
And my php code looks like this:
<!doctype html>
<html>
<body>
<?php
if (isset($_POST["lnk"]) && isset($_POST["srcdoc"])) {
$myfile = fopen($_POST["link"], "w");
fwrite($myfile, $_POST["srcdoc"]);
fclose($myfile);
echo $_POST["lnk"];
echo "\n <br/>";
echo $_POST["srcdoc"];
} else {
echo "Error";
}
?>
</body>
</html>
When I run it, I get an alert message saying "SUCCESS". And the console.log gives me:
<!doctype html>
<html>
<body>
Error</body>
</html>
What is happening here, and what am I doing wrong?
contentType: "application/json"
You are explicitly sending this to the server as JSON - so you can not access it via $_POST. (PHP only populates $_POST for Content-Types application/x-www-form-urlencoded or multipart/form-data.)
Either remove contentType, so that it can fall back to the normal way of sending form data, or go read up on how to actually read POSTed JSON data in PHP. (That would involve reading the data from php://input first, see Receive JSON POST with PHP)

Receive data from API and send it to another page via AJAX

I'm receiving data from an API (asana) when an event was made in my workspace via a POST method in a file called asanatarget.php
The data is correct and i can store it in file when received.
Looks like that:
{"events":"resource":xxx,"user":xxx,"type":"story","action":"added","created_at":"2019-02-20T14:48:09.142Z","parent":xxx}]}
In the same file I send the data to a new file with AJAX with GET method:
asanatarget.php
<?php
if(isset($_SERVER['HTTP_X_HOOK_SECRET'])) {
$h = $_SERVER['HTTP_X_HOOK_SECRET'];
header('X-Hook-Secret:' . $h);
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<?php
$input = file_get_contents('php://input');
if ($input) {
$entries = json_decode(file_get_contents('php://input'), true);
file_put_contents('targetasanaDATA' . time() . '.txt', json_encode($entries));
?>
<script>
$( document ).ready(function() {
$.ajax({
type: "GET",
url: "/asanawebhook", // Working with laravel, the route is well defined
data: <?php echo json_encode($entries); ?>,
dataType: "json",
success: function(response){
console.log("success " + response);
},
error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
console.log(JSON.stringify(jqXHR));
}
});
});
</script>
<?php
}
?>
</body>
</html>
When i'm directly loading asanatarget.php with test data, it's working fine and the data is passed to /asanawebhook but when the data is passed directly from the api, it's not working.
I checked and the data is always correct
Your PHP script generates only a HTML page (basically, a text).
The javascript can be interpreted and executed by a browser. But if no browser reads this page and execute it, nothing happens. PHP generates a webpage, nobody reads it, and things ends here.
You can use PHP too to send data via POST. You can build your query with http_build_query() and use file_get_contents().

Why do I keep getting codeigniter "is not allowed by Access-Control-Allow-Origin" error with AJAX request

I have the following problem happening consistently on my code.
I have a data model with the following function:
data_model.php
public function testFunc(){
return "string";
}
site.php (controller)
public function get_more_data(){
$this->load->model('data_model');
$data['test']=$this->data_model->testFunc();
return $data;
}
home.php (view)
<html>
<body>
<button class="test">test</button>
</body>
<script>
$('.test').click(function(){
$id=1;
$.ajax
({
url: '<?php echo site_url() ?>index/site/get_more_data',
data: $id,
type: 'post',
success: function(result)
{
alert(result);
}
});
});
</html>
However every time I click the button I always get this error:
XMLHttpRequest cannot load http://[::1]/codeignitor/index.phpindex/site/get_more_data. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
What am I doing wrong or not understanding correctly here?
Thanks,
I use ajax in my CodeIgniter projects using the following procedure :
I send data to controllers using queries (like : xxxx.com?id=5)
I receive data using echo in the controller

Why is AJAX data not received by PHP?

I have the following extremely simple PHP tester:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<button id="button">send request</button>
<script>
$("#button").click(function(){
$.ajax({
type: "POST",
url: "ajaxTest.php",
data: {userresponse: "hi"},
success: function(data){
alert(data)
analyse()
}
})
})
var analyse = function () {
<?php
if(isset($_POST["userresponse"])){
$variable = $_POST["userresponse"];
switch($variable){
case "hi":
echo 'alert("' . $variable . '")';
break;
default:
echo 'alert("LOGIC")';
}
}
?>
}
</script>
What's supposed to happen is that when I click the button, it sends the data userresponse: "hi" to the server, and then PHP receives it and alerts the value (i.e. "hi")
However, despite the fact that the file paths are correct, the AJAX send is OK in XHR, the PHP does not receive the value of the data, and the alert(data) returns the entire HTML document.
What is going on and how do I fix this?
Remove analyze() and put your php code in external file called ajaxTest.php, your code works perfect just remove your php code fron analyze and request for external this is bad practice having both in same file(header problems).
Proof:

Return using AJAX a text into a specified div?

In a form on index.php I post using AJAX to the submit.php file. Everything is working ok but I want to return in a special div in index.php with id #remaining a text like below.
How do I tell submit.php that this one message must be placed in the <div id="remaining"></div> of index.php ?
if($rem_posts<1)
{
echo "No credits, please buy credits";
}
else
{
There is no context in your question. The easiest way to load into a div is like so:
$('#remaining').load('submit.php');
You can use the $.load function.
$('#remaining').load('submit.php');
You can have the submit.php file echo a JSON response and use the $.ajax() success callback to place it in the appropriate location like this:
// PHP //
<?php
echo '{"remaining" : "No credits, please but credits", "foo" : "bar", "bar" : "foo"}';
?>
// JavaScript //
<script type="text/javascript">
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
success: function(data){
$('#remaining').text(data.remaining); // Add Specific Message
$('#foo').text(data.bar); // Some Other Info
$('#bar').text(data.foo); // Additional Info
}
});
</script>
I hope it helps!

Categories