Hi i've got an ajax post and the response div i want from the other file will be generated after $document_ready function. But the div show empty string when i alert it. Here's my code
var cekJawaban = function(){
var form_data={
kode:$("#code").val(),
id_materi:$("#idmateri").val(),
id_user:$("#iduser").val(),
id_lesson:$("#idlesson").val()
};
$.ajax({
url: 'http://localhost/ta2/frontpage/cekKode',
type: 'POST',
async : true,
data: form_data,
dataType: 'html',
success: function(data){
/*var res = resp;
if(resp=="true")
{
$("#alertsukses").show();
$("#submit").hide();
$("#lanjut").show();
}
else
{
$('#salah').html(resp);
$("#alertsalah").show();
}*/
console.log($(data).find('#mocha').text());
},
error: function(xhr) {
}
});
return false;
};
And here's the target url file:
<!DOCTYPE html>
<html>
<head>
<script src="<?php echo base_url('assets/jquery-2.0.3.min.js')?>"></script>
<script src="<?php echo base_url('assets/expect/jquery.expect.min.js')?>"></script>
<script src="<?php echo base_url('assets/mocha/mocha.js')?>"></script>
<link href="<?php echo base_url('assets/mocha/mocha.css') ?>" rel="stylesheet">
</head>
<body>
<script>mocha.ui('bdd');
mocha.reporter('html');</script>
<div id="mocha"></div>
<?php echo $code; ?>
<div id="cek">
</div>
<script type="text/javascript">
describe("Index", function () {
it("Harus punya div",function(){
fn();
})
})
mocha.run();
$(document).ready(function(){
var notif=""
if($('.error').length>0)
{
var err = $('.error').html();
var sub = err.substr(0,err.indexOf('#'));
notif=sub;
}
else
{
notif="pass";
}
$('#cek').text(notif);
});
var fn = function(){
$expect('body').to.exist('Jangan lupa buat body')
.and.to.have.children('p', "Jangan lupa buat p");
};
</script>
</body>
</html>
I think this is not possible, javascript is executed on client side and if you're requesting the page by ajax you will get only the static content of it. You must consider to change the work flow of your code and stick to dynamic content generation of the target url on the server-side code.
if you pursue this workflow you may get the content and also the javascript code which I think you don't want
Instead of putting your javascript document.ready() function in the "target url file", you can put the javascript code into the success-function of the Ajax call.
So you call the url, the url returns your content, and after content has been returned you can execute javascript code in the success()-function.
Example:
$.ajax({
url: 'http://localhost/ta2/frontpage/cekKode',
type: 'POST',
async : true,
data: form_data,
dataType: 'html',
success: function(data){
//Call your document.ready() here instead.
var notif=""
if($('.error').length>0){
var err = $('.error').html();
var sub = err.substr(0,err.indexOf('#'));
notif=sub;
}
}
});
Related
I'm trying to do something I would think would be really simple: Pass form data to a PHP page with AJAX, and get the result of the PHP back.
Edited to Add: As written right now, it only returns successfully sporadically, rather than every time it's run, for some reason.
Edited to Add (05/30/2020):
I was able to get it working such as it is by changing the ajax like this:
<script>
$(document).ready(function(){
$("#button").click(function(){
var DDD_Number=$("#DDD_Number").val();
var Manager_Review=$("#Manager_Review").val();
var dataTosend='?DDD_Number='+DDD_Number+'&Manager_Review='+Manager_Review;
$.ajax({
type: "GET",
url:'showme.php' + dataTosend,
data:dataTosend,
async: false,
success:function(data){
document.getElementById('txtresponse').innerHTML = "Success.";
document.getElementById('thisworks').innerHTML = data;
},
error: function(data){
document.getElementById('txtresponse').innerHTML = "failure.";
}
});
});
});
</script>
Now I have to work on serializing the form, because it's actually multiple rows I have to pass. I don't know if I need that as a second question, though.
This is my main page:
<html>
<head>
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.plugin.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.datepick.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
var DDD_Number=$("#DDD_Number").val();
var Manager_Review=$("Manager_Review").val();
var dataTosend='DDD_Number='+DDD_Number+'&Manager_Review='+Manager_Review;
$.ajax({
type: "POST",
url:'showme.php',
data:dataTosend,
async: true,
success:function(data){
document.getElementById('txtresponse').innerHTML = "Success.";
document.getElementById('thisworks').innerHTML = "Successful.";
},
error: function(data){
console.log(data);
document.getElementById('txtresponse').innerHTML = "failure.";
console.log(data);
}
});
});
});
</script>
</head>
<body>
<form id="dddform" method="post">
<input type="text" id="DDD_Number" name="DDD_Number"><br>
<input type="text" id="Manager_Review" name="Manager_Review"><br>
<button id="button" name="Submit">Click Me</button>
</form>
<div id="txtresponse"></div>
<div id="thisworks"><?php if(!isset($_POST['Submit'])){echo $Manager_Review;} ?></div>
</div>
</body>
</html>
This is showme.php:
<?php
$Manager_Review_Date = $_POST['Manager_Review'];
echo $Manager_Review_Date;
?>
<script language = 'Javascript'>
document.getElementById('thisworks').innerHTML = '<?php echo $Manager_Review_Date; ?>';
</script>
The call is made successfully. (The "Success"and "Successful" messages appear), but I can't get the value of $Manager_Review_Date to appear in the "thisworks" DIV.
Any pointers? I'm fairly new to AJAX (if you couldn't tell from my code).
Your php should be:
<?php
$Manager_Review_Date = $_POST['Manager_Review'];
echo $Manager_Review_Date;
// NO javascript here
And the output of this script is in data variable of success callback:
success:function(data){
document.getElementById('txtresponse').innerHTML = "Success.";
document.getElementById('thisworks').innerHTML = data;
},
I want to post values of a JavaScript variable to a PHP page, and then use those values there.
I get back a new HTML page, which I did not want to happen. Also, it is showing the error message produced by:
echo"some error";
What am I missing? I don't understand why this happens?
Here is my html file try.html
<html>
<head>
<title>try</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a id="button" href="try.php" target="_blank">send data</a>
<script>
var sum2= 2010;
$('#button').click(function() {
var val1=sum2;
$.ajax({
type: 'POST',
url: 'try.php',
data: { text: val1 },
dataType: 'script' // I am not sure about what I write here script,json,html?
});
});
</script>
</body>
</html>
And this is my PHP file try.php
<?php
if(isset($_POST['text']))
{
$text = $_POST['text'];
echo $text;
}
else {
echo"some error";
}
?>
In try.php if you echo something which in turn will comeback to try.html.
If you just want to post the data to try.php and echo there the just use form and submit. You dont need ajax in that.
Ajax is to send the data/receive back without reloading the existing page. The response will be seen in the current page itself.
<html>
<head>
<title>try</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a id="button" href="try.php">send data</a>
<script>
var sum2= 2010;
$('#button').click(function() {
var val1=sum2;
var json_params = {
text: val1
};
var json_data = JSON.stringify(json_params);
$.ajax({
type: 'POST',
url: 'try.php',
data: json_data,
dataType: "html",
success: function(response)
{
alert(response);
}
});
});
</script>
</body>
</html>
In the try.php page you can place this code
<?php
if (isset($_POST)){
$data = json_decode(file_get_contents('php://input'));
print_r($data);
}
else{
echo "not set";
}
?>
Firstly, remove script from data-type.
This is how you can pass the data to php file:
$('#button').click(function() {
var val1=sum2;
$.ajax({
type: 'POST',
url: 'try.php',
data: { text: val1 },
});
});
dataType - The type of data that you're expecting back from the
server. Here you don't want anything in return then it's fine. If you
are expecting anything like json or something, you can specify it.
If You want anything in response, you can handle in this manner
$('#button').click(function() {
var val1=sum2;
$.ajax({
type: 'POST',
url: 'try.php',
data: { text: val1 },
});
success: function (data) {
//Your success handler code
},
});
success - A callback function to be executed when Ajax request
succeeds.
Firstly remove href from link. By this it is directly redirecting to try.php
<a id="button" href="javascript:void(0);" target="_blank">send data</a>
I am having trouble passing a Javascript array to a PHP array on the same page when the submit button is pressed. I have seen discussion of JSON.stringify and json_encode on other posts, but I am not sure how to use those functions with my code.
JS:
<script>
var kegs = [];
var textarea = document.getElementById("your_textarea");
$("#kegId").on('keyup', function (e) {
if (e.keyCode == 13) {
kegs.push($(this).val());
$("#kegId").val("");
textarea.value = kegs.join("\n");
};
});
</script>
PHP:
if (!isset($_POST['btn-addkegs'])) {
//I want to set the Javascript array 'kegs' to a php variable here
Using Ajax will do it for you! I wrote this code that sends an array to PHP on the same page. Once you get the array in PHP you can do whatever you want with it :).Just copy and paste this file and called it index.php to see the result. This will totally help you!
<?php
$data = array();
if(isset($_POST['myArray']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH'])){
$data = 'You array is: ' . $_POST['myArray'];
echo json_encode($data);
die();
}
?>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "random"></div>
<script type = "text/javascript">
$(document).ready(function() {
var arr = [2,4,5,6,7];
var myArray = JSON.stringify(arr);
$.ajax({
url: "index.php",
method: "POST",
dataType: "json",
data: {myArray: myArray},
success: function (result) {
alert("result: " + result);
console.log(result);
$("#random").html(result);
}
});
});
</script>
</body>
</html>
This can be achieved by using ajax(), its syntax is:
$.ajax({
url: 'process.php', // file where data processing is done
type: 'POST',
data: {
var1 :val1,
var2 :val2
// parameter set
},
success: function(response){ // response from process.php
// do your stuff here
}
});
Read more about ajax
As you are using the jquery
var jsArray = makeJavascriptArrayhere //
$.ajax({
url: urlToPhpFile, // file where data processing is done
type: Method,
data:jsArray,
success: function(response){ // response from process.php
// do your stuff here
}
});
now in your php file
var_dump($_POST); //see on network liner tabs
I am a ajax beginner, Here I am trying to show a text box value in same page using Ajax.
My Controller code:
<?php
class Merchant extends CI_Controller
{
public function ajaxtest()
{
$this->load->helper('url');
$this->load->view('ajaxtest');
$fullname = $this->input->post("fullname");
echo $fullname;
}
}
?>
Here is my view code:
<head>
<script src="<?php echo base_url();?>assets/js/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#getinfo").click(function()
{
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>merchant/ajaxtest",
data: {textbox: $("#fullname").val()},
dataType: "text",
cache:false,
success:
function(data){
$('#mytext').html(data);
}
});
return false;
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" id="fullname"/>
<input type="button" value="getinfo" id="getinfo"/>
<span id="mytext"></span>
</form>
</body>
When I click on the button getinfo, I want to show the text inside the text box as span text. But now it shows nothing..
Updated:
After experts' opinion, I edited some text(see my edit note), Now When i click on the button, it shows again a textbox and a button.. !!
Did you set the base_url variable with a link on the Javascript?
Because your post url contains this variable and you need set this to make it work. So initialize the variable with the base_url link.
See the corrected example below . Set your domain instead of the yourbaseurl.com
<script type="text/javascript">
$(document).ready(function(){
var base_url='http://yourbaseurl.com/index.php/';
$("#getinfo").click(function()
{
$.ajax({
type: "POST",
url: base_url + "merchant/ajaxtest",
data: {textbox: $("#fullname").val()},
dataType: "text",
cache:false,
success:
function(data){
$('#mytext').html(data);
}
});
return false;
});
});
</script>
Your base_url variable seems to be undefined in your JavaScript.
One simple approach to get the base URL is to echo it out in a hidden input, and then grab the value of that input in your JS code:
HTML
<input type='hidden' id="baseUrl" value="<?php echo base_url(); ?>" />
JS
var base_url = $('#baseUrl').val();
$.ajax({
type: "POST",
url: base_url + "/merchant/ajaxtest",
data: {textbox: $("#fullname").val()},
dataType: "text",
// ...
you are passing in textbox as parameter from your ajax to controller and trying to get POST data with name fullname. That wont work, since you passed in the name of parameter as textbox, access that in your post, as :
class Merchant extends CI_Controller
{
public function ajaxtest()
{
$this->load->helper('url');
//you dont need to load view so comment it
//$this->load->view('ajaxtest');
$fullname = $this->input->post("textbox"); //not fullname
echo $fullname;
}
}
js
<script type="text/javascript">
$(document).ready(function(){
var base_url='http://yourbaseurl.com/index.php/';
$("#getinfo").click(function() {
var fullname = $("#fullname").val();
alert("Fullname:" + fullname); //do you get this alert
$.ajax({
type: "POST",
url: base_url + "merchant/ajaxtest",
data: {textbox: fullname},
cache:false,
success:function(data){
alert("Response:" + data); //do you get this alert
$('#mytext').html(data);
}
});
return false;
});
});
</script>
Try using this:
<base href="<?=base_url();?>">
<script src="assets/js/jquery-latest.min.js"></script>
And this in ajaxtest:
$this->load->helper('url');
And also Comment out this:
// $this->load->view('ajaxtest');
Might be a little late with this response - but someone might find this while searching for a solution.
I was having the same issues with Codeigniter and JQuery ajax/post response. I could not get this to work no matter what I tried.
In the end, it turned out to be php_error that was causing the problem. Once I removed it, everything worked fine with my post/response.
I have a form that when clicked the submit button makes a call via ajax. This ajax is inside a php file because I need to fill in some variables with data from the database. But I can not use the calls before / success. They just do not work, I've done tests trying to return some data, using alert, console.log and nothing happens. Interestingly, if the ajax is isolated within a file js they work. Some can help me please?
File:
<?php
$var = 'abc';
?>
<script type="text/javascript">
$(document).ready(function() {
$('#buy-button').click(function (e){
var abc = '<?php echo $var; ?>';
$.ajax({
type: 'POST',
data: $('#buy-form').serialize(),
url: './ajax/buy_form.php',
dataType: 'json',
before: function(data){
console.log('ok');
},
success: function(data){
},
});
});
});
</script>
HTML:
<form id="buy-form">
<div class="regular large gray">
<div class="content buy-form">
/* some code here */
<div class="item div-button">
<button id="buy-button" class="button anim" type="submit">Comprar</button>
</div>
</div>
</div>
</form>
----
EDIT
----
Problem solved! The error was in the before ajax. The correct term is beforeSend and not before. Thank you all for help.
You said it was a submit button and you do not cancel the default action so it will submit the form back. You need to stop that from happening.
$('#buy-button').click(function (e){
e.preventDefault();
/* rest of code */
Now to figure out why it is not calling success
$.ajax({
type: 'POST',
data: $('#buy-form').serialize(),
url: './ajax/buy_form.php',
dataType: 'json',
before: function(data){
console.log('ok');
},
success: function(data){
},
error : function() { console.log(arguments); } /* debug why */
});
});
My guess is what you are returning from the server is not valid JSON and it is throwing a parse error.
Try this
<script type="text/javascript">
$(document).ready(function() {
$('#buy-button').click(function (e){
e.preventDefault();
var abc = '<?php echo $var; ?>';
$.ajax({
type: 'POST',
data: $('#buy-form').serialize(),
url: './ajax/buy_form.php',
dataType: 'json',
beforeSend: function(data){
console.log('ok');
},
success:function(data){
}
});
});
});
And make sure that your php file return response