I'm trying to execute a jquery code from a php page called by ajax.
Change html of div.error
Here's the code(If there is an easier way just tell/post):-no $.load
HTML/jQuery: jquery.js already linked
<input type='text' id='test'>
<div id='error' style='display:inline-block;'>CHANGE HERE</div><bR>
<input type='submit' value='run' id='button'>
<script type='text/javascript'>
$('#button').click(function(){
$.ajax({
url: "test.php",
type: "POST",
data: "test="+ test,
success: function(jqXHR){
},
error: function() {
alert('error');
}
});
});
</script>
test.php
<script type='text/javascript'>
$('#error').html('working');
</script>
The test variable that you are using doesn't seem to be declared anywhere. Try hardcoding first. Also the {key:value} syntax is preferred as it ensures to properly url encode the value when sending to the server:
data: { test: 'some value' }
and if you want to use a variable, make sure you have declared it:
$('#button').click(function() {
var test = 'foo bar';
$.ajax({
url: 'test.php',
type: 'POST',
data: { test: test },
success: function(data) {
},
error: function() {
alert('error');
}
});
});
Also if you want the javascript to execute in your php script remove the <script> tags:
$('#error').html('working');
and specify the dataType parameter to script in your $.ajax call:
dataType: 'script'
Another possibility is to have your test.php script simply return the value:
working
and then inside the success callback refresh the DOM:
success: function(data) {
$('#error').html(data);
},
The JavaScript from inside test.php won't run because you've never told it to. It's not just gonna run because you loaded it. It needs to be in the DOM to run.
Try this:
$.ajax({
url: "test.php",
type: "POST",
data: "test="+ test,
success: function(data){
$(data).filter('script').appendTo('head');
},
error: function() {
alert('error');
}
});
Your test.php script should output what you want to display.
it should look something like:
echo "<html>";
echo "<div>working</div>";
echo "</html>";
so that it returns something. Right now, you are returning only javascript.
Related
I want to learn ajax.
Basically I begin to understand it, but I have one problem
here is my js code
$('#click').on('click',function () {
var a="good";
$.ajax({
url:'/ggg.php',
method:'post',
data:{
info:a
},
success:display_data
})
});
here is my html code
<input type="submit" value="do it" id="click">
here is my php code
<?php
echo $_POST['info'];
that's what I see in console.log
and the word "good" should appear
Use type instead of method. Also success might be a function.
$('#click').on('click',function () {
var a="good";
$.ajax({
url:'/ggg.php',
type: 'post',
data:{
info:a
},
success: function (data) {
//document.write(data)
console.log(data)
}
})
});
Reference
I am trying to send a variable from one PHP file to another PHP file and echo it:
<script>
$.ajax({
type: "POST",
url: 'AjaxCallTest.php',
data: ({Imgname:"13"}),
success: function() {
alert('form was submitted');
}
});
<script>
And then in the receiving PHP file (AjaxCallTest.php):
<?php
$temp = $_POST['Imgname'];
echo $temp;
?>
but AjaxCallTest file doesn't echo anything? I need to get this variable and echo it. Note that I've included jQuery library in my code but I didn't include it in AjaxCallTest.php.
replace this line data: ({Imgname:"13"}), with data: {"Imgname":"13"}
I tried this and it worked! Notice the closing <script> tag
I also added the return result to check the echo in 'AjaxCallTest.php'
<script>
$.ajax({
type: "POST",
url: 'AjaxCallTest.php',
data: ({Imgname:"13"}),
success: function(result) {
alert(result + ' form was submitted');
}
});
</script>
Your code worked fine for me. One error I could find is that you didnt closed the script tag correctly. close the script tag.
<script>
$.ajax({
type: "POST",
url: 'AjaxCallTest.php',
data: ({Imgname:"13"}),
success: function() {
alert('form was submitted');
}
});
<script>
I'm using an ajax script to post a value to a PHP file.
I'm not able to pass the variable.
My variable is declared in PHP and I would like to pass it with ajax.
Here is the variable and my button:
<?php $employee_id= '3'; ?>
<input class="btn btn-danger" type="submit" value="Delete" id="delete-btn">
This is the Javascript:
<script>
$(document).ready(function () {
$("input#delete-btn").click(function(){
$.ajax({
type: "POST",
url: "delete.php", //
data: {id: '$employee_id'},
success: function(msg){
$("#thanks").html(msg)
},
error: function(){
alert("failure");
}
});
});
});
</script>
Here is the PHP code where I want to receive the value:
if (isset($_POST['id'])) {
$emp_id = strip_tags($_POST['id']);
echo $emp_id;
$query = "DELETE FROM `employee` WHERE id='$emp_id'";
$result = mysql_query($query) OR die(mysql_error());
echo 'You successfully deleted the user.';}
I know I'm doing something wrong around the data...
That is because your variable is in php but you are not using php to attach your variable to your ajax, try wrapping your variable in php tags and then make sure you use 'echo' to print the value of your variable into javascript.
data: {id: <?php echo '$employee_id'?>},
Your javascript code, as far as the client will see, will end up looking like this for them:
data: {id: '3'},
They won't see the php code, they will just see the end result as their javascript.
You need PHP tags around your variables:
<script>
$(document).ready(function () {
$("input#delete-btn").click(function(){
$.ajax({
type: "POST",
url: "delete.php", //
data: {id: <?php echo '$employee_id'; ?> }, // <---
success: function(msg){
$("#thanks").html(msg)
},
error: function(){
alert("failure");
}
});
});
});
</script>
First, I'm using the codeigniter framework and I'm a beginner in JS and AJAX, so please bear with me.
I read this question, so I tried to follow the answers.
This is the script (UPDATED):
$(function() {
$( "#datepicker").datepicker().click(function() {
$.ajax({
type: 'POST',
url: "<?php echo base_url(); ?>backend/umat/add",
dataType: "json",
data: $('#form_daftar').serialize(),
success: function(data) {
console.log("Done");
}
});
return false;
});
});
And this is my datepicker HTML code:
<input type="text" id="datepicker" name="datepicker"
value="<?php echo isset($umat['tanggal_lahir'])?$umat['tanggal_lahir']:""?>"/>
My questions are (UPDATED):
Is the URL I provided in AJAX above correct?
How should I pass the data from AJAX to PHP (url: "<?php echo base_url(); ?>backend/umat/add")?
Thanks for your help :D
What you have missed here:
your click event is outside of the doc ready handler, that should be inside doc ready so that when page gets ready the element should be available to click.
You have missed a closing }); tag of the click event.(does not matter though)
so try this:
$(function() {
$( "#datepicker").datepicker();
$("#datepicker").click(function() {
$.ajax({
type: 'POST',
url: "<?php echo base_url(); ?>backend/umat/add",
dataType: "json",
data: {frmData : $('#form_daftar').serialize()}, // <----send this way
success: function(data) {
console.log(data.date);
// here data is the returned data from the specified url and make sure
// that url is generating a proper json structrue.
// suppose there is a key named date which holds the submitted date so
// data.date will get you the date.
}
});
}); //<----you missed this closing of click function.
}); //<----------put everything before this closing of doc ready handler.
Although you can chain it too like this:
$(function(){
$( "#datepicker").datepicker().click(function() {
//......ajax function in click here
});
});
See a demo here
Another approach would be to use the datepicker inbuilt methods to trigger ajax request like
$('#datepicker').datepick({
dateFormat:"yyyy-mm-dd",
onSelect:function(){
$.ajax({
type: 'POST',
url: "<?php echo site_url('backend/umat/add'); ?>",
dataType: "json",
data: $('#form_daftar').serialize(),
success: function(data) {
console.log("Done");
}
});
}
});
Check the manual or inbuild functions and callbacks with your datepicker js.
try it:
$(function() {
$( "#datepicker").datepicker();
$("#datepicker").change(function() {
$.ajax({
type: 'POST',
url: "<?php echo base_url(); ?>backend/umat/add",
dataType: "json",
data: $('#form_daftar').serialize(),
success: function(data) {
console.log("Done");
}
});
});
php get data form ajax:
<?php
$date = $_POST["datepicker"];
?>
Ok so I know long hand ajax but trying to use the jQuery short cut. I have two documents
form.php
submit.php
In my "form" page I am calling the "submit" page to process the insert. I am currently using the jquery ajax:
<script type="text/javascript">
jQuery('form').submit(function() {
string = jQuery("form").serializeArray();
jQuery.ajax({
type: "POST",
url: "submit.php",
data: string,
dataType: "json",
})
return false;
});
</script>
When I view firebug it is processing the ajax fine. I am getting 200 and post parameters are set. What I am trying to do is have the ajax return the submit.php file. I know it has something to do with the "success" function but I don't know how to add this. I tried a few things like:
<script type="text/javascript">
jQuery('form').submit(function() {
string = jQuery("form").serializeArray();
jQuery.ajax({
type: "POST",
url: "submit.php",
data: string,
dataType: "json",
success: function(html){
alert(html);
}
})
return false;
});
</script>
and
<script type="text/javascript">
jQuery('form').submit(function() {
string = jQuery("form").serializeArray();
jQuery.ajax({
type: "POST",
url: "submit.php",
data: string,
dataType: "json",
success: function(html){
$('.result').html(data);
}
})
return false;
});
</script>
but neither of these are working. Again I am simply trying to send the ajax request and then return the contents of the submit.php page. Not only does the submit.php page hold the script to process the php/ajax insert but it also display success statements like "insert was successful" so that is why I need to not only run the script in the page but also return the contents of that page. Thank you for any help.
Chagne the dataType:'json' to dataType:'html' for the callback that you wish to display the contents of submit.php.
You were close in your second attempt, but you made a typo. Try:
success: function (data) {
$('.result').html(data);
}
Also, unless your server is returning JSON, you probably want to change the dataType:
dataType: "html"