In my ajax script below when I do console.log for duration it returns <select name="duration" id="duration"> instead of the value. I think for this reason my function is not working properly. I am not getting any response back from the PHP page and the loading image keeps on loading.
$(document).ready(function() {
$("#submit").click(function() {
var dataString = {
quantity: $("#quantity").val(),
duration: $("select[name='duration']").val()
};
console.log(duration);
$.ajax({
type: "POST",
dataType : "json",
url: "rent-process.php",
data: dataString,
cache: true,
beforeSend: function(){
$("#submit").hide();
$("#loading-rent").show();
},
success: function(json){
$("#loading-rent").hide();
$("#submit").show();
$(".message").html(json.status).fadeIn();
$('#wallet-av').html('$' + json.wallet);
$('#ref-av').html(json.referrals);
}
});
return false;
});
});
Related
I need to send a response from the ajax to the php code. Alert msg as to be displayed when success.. I have to get entered date should be displayed in the url and response as to be sent..
<script>
$(document).ready(function() {
$('#txtdate').change(function(){
date = $(this).val();
$.ajax({
type: 'GET',
url: "http://localhost/data/check_date.php?date=" +date ,
success: function() {
alert(data);
}
});
});
});
</script>
Two error:
1:
date = $(this).val();
to
var date = $(this).val();
2:
url: "http://localhost/data/check_date.php?date=" +date ",
to
url: "http://localhost/data/check_date.php?date=" +date ,
3:
success: function() {
to
success: function(data) {
All script:
<script>
$(document).ready(function() {
$('#txtdate').change(function(){
var date = $(this).val();
$.ajax({
type: 'GET',
url: "http://localhost/data/check_date.php?date=" +date ,
success: function(data) {
alert(data);
}
});
});
});
</script>
Remove " mentioned at the end of the url because date is variable to be passed through url.
To overcome all mistakes change your whole code to
<script>
$(document).ready(function() {
$('#txtdate').change(function(){
var date = $(this).val();
$.ajax({
type: 'GET',
url: "http://localhost/data/check_date.php?date=" +date,
success: function(date) {
alert(date);
}
});
});
});
</script>
var date = $(this).val();
$.ajax({
type: 'GET',
url: "http://localhost/data/check_date.php?date=" +date ,
dataType: 'text',
success: function(data) { //add data in the function which is returned from the file
alert(data);
}
});
also try opening your network tab by clicking F12 in your browser before doing ajax request, if there's some error in your php file you can view it here in network tab, see if it helps
I am trying to upload file through jquery formdata without any form. My problem is that it is not sending any data to php file.
Here is my jquery code
jQuery(document).ready(function() {
jQuery('#e_picture').change(function() {
var file_data = jQuery('#e_picture').prop('files')[0];
var form_data = new FormData();
form_data.append('e_picture', file_data);
form_data.append('e_uid', '3585');
//});
// data: {e_uid: e_uid, e_picture:'23'},
jQuery.ajax({
url: "index.php?option=com_objectified&task=course_reg.addPicture",
type: 'POST',
data: {
form_data
},
processData: false,
contentType: false,
success: function(result) {
alert('This is ' + result); // Here I show onlu e_uid but it alerts blank result
}
});
});
});
Html
<input type="file" class="form-control" name='e_picture' id='e_picture'>
You are sending the form_data in wrong way
instead of
data: {
form_data
},
just send it like
data: form_data,
jQuery(document).ready(function() {
jQuery('#e_picture').change(function() {
var file_data = jQuery('#e_picture')[0].files;
var form_data = new FormData();
form_data.append("e_picture[]", file_data[0]);
form_data.append('e_uid', '3585');
//});
// data: {e_uid: e_uid, e_picture:'23'},
jQuery.ajax({
url: "index.php?option=com_objectified&task=course_reg.addPicture",
type: 'POST',
data: {
form_data
},
processData: false,
contentType: false,
success: function(result) {
alert('This is ' + result); // Here I show onlu e_uid but it alerts blank result
}
});
});
});
ange content type to :
contentType: 'multipart/form-data',
i'm using ajax in my codeigniter project but whenever i send data i get error and the response will be 'Undefined'.
i built the simplest code i've ever imagine but nothing works.
would you please tell me where is the wrong ??
<script type="text/javascript">
$(document).ready(function() {
var content = "test";
var datastring = 'content='+ content;
jQuery.ajax({
type:"POST",
url:"<?php echo site_url('test/test'); ?>",
data: datastring,
dataType: "html",
async: false,
success: function(data) { alert("succsess"); },
error: function(ts) { alert(ts.responseText); },
onComplete: function(data) {alert(data); }
});
});
</script>
and my codeigniter code is :
function test() {
echo $this->input->post('content');
}
ErrorText is the last parameter of error callback.
error: function(xhr, status, errorText) {
alert(errorText);
}
You should use complete in the place of oncomplete. The re-written code will be
<script type="text/javascript">
$(document).ready(function() {
var content = "test";
var datastring = 'content='+ content;
jQuery.ajax({
type:"POST",
url:"<?php echo site_url('test/test'); ?>",
data: datastring,
dataType: "html",
async: false,
success: function(data) { alert("succsess"); },
error: function(ts) { alert(ts.responseText); },
complete: function(data) {alert(data); }
});
});
</script>
why isn't this working?
jQuery AJAX Code:
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
});
});
PHP Code(Just a test Code):
if($_POST["search"]) {
echo "TEST MESSAGE!";
}
It doesn't show The echo :/
thanks for ur help ;)
You need to display the data you receive from the ajax call.
Example, to put the result into a <div> called YourresultDiv:
Try with this
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#YourresultDiv').html(data);
alert("Successful");
}
});
});
Hopes this will help you....
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
async: false
},success: function (data) {
$('div#posteddata').append(data);
}
);
});
<html>
<head>
</head>
<body>
<div id="posteddata"></div>
</body>
</html>
You need to specify an element you want to update.. for example
<div id="result"> </div>
and then append a success event handler to your ajax call
$("header input").bind("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
}).success(function (data) {
$("#result").html(data);
}).fail(function () {
alert("Ajax failed!");
});
});
Try with this
In js add
success: function (data) {
// success handler
}
as your response handler
if($_POST["data"]) {
// search = search string available here in $_POST['data']
echo "TEST MESSAGE!";
}
where is your call back function in $.ajax() function,with callback function only,you can display anything through an ajax request..
So try this.
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#Yourdiv').html(data); // or $('#Yourdiv')text(data);
}
});
});
Without success function,you can see the echoed statement in your network segment in console.
for that, press F12,then you will get a link like
XHR finished loading: POST "http://localhost/yourproject/func_name.Click on that link and you will goto network segment and from there,click on the function name and then in response or preview tab,you canb see the echoed statement..
try it.
I want to send the data via ajax to other page. I have isolated the problem. This is the code.
Thank you all for your help..But no effect..
updated code
It worked...
<script>
$(document).ready(function(){
$(".edit").click(function(event) {
event.preventDefault(); //<--- to prevent the default behaviour
var box = 1233;
var size=123;
var itemname=123;
var potency=123;
var quantity=12333;
var dataString ={
'box' :box,
'size':size ,
'itemname':itemname,
'potency':potency,
'quantity':quantity
};
$.ajax({
url: "dd.php",
type: "post",
data: dataString,
success: function(data) {
alert(data);
},
error: function(data) {
alert(data);
}
});
});
});
</script>
So I click the link,it navigates, to dd.php which has
<?php
echo json_encode(array('itemcode'=>$_POST['itemname']));
echo $_POST['itemname'];
?>
I get Object Object as alert. What am doing wrong? Pls throw some light here..thanks you..
$(document).ready(function(){
$(".edit").click(function(event) {
event.preventDefault();
var data = {"box":1233,
"size":565,
"itemname":565,
"potency":876,
"quantity":234};
$.ajax({
url: "dd.php",
type: "post",
data: data,
dataType: "json",
success: function(data) {
if(console){
console.log(data);
}
},
error: function(data) {
if(console){
console.log(data);
}
}
});
});
});
few things to consider... you can post data as object..which is clean and easier to use
$(".edit").click(function(event) {
event.preventDefault(); //<--- to prevent the default behaviour
var box = 1233;
....
var dataString ={'box':box,'size':size,'itemname':itemname,'potency':potency,'quantity':quantity};
$.ajax({
url: "dd.php",
type: "post",
data: dataString,
dataType: "json", //<--- here this means the response is expected as JSON from the server
success: function(data) {
alert(data.itemcode); //<--here alert itemcode
},
error: function(data) {
alert(data);
}
});
so you need to send the response as json in PHP
<?php
echo json_encode(array('itemcode'=>$_POST['itemname']))
?>
Here you are using querystring as sent in GET request.
If you want to send the data in same form, you can use this with GET request type:
$.ajax({
url: "dd.php"+dataString,
type: "get",
dataType: "json",
success: function(data) {
console.log(data);
alert(data.itemcode);
},
error: function(data) {
alert(data);
}
});
Or for POST request,you will have to put data in json object form, So you can use :
var dataString ={
'box' :box,
'size':size ,
'itemname':itemname,
'potency':potency,
'quantity':quantity
};
$.ajax({
url: "dd.php",
type: "post",
data: dataString,
dataType: "json",
success: function(data) {
console.log(data);
alert(data.itemcode);
},
error: function(data) {
alert(data);
}
});
});
And put echo in your php code :
<?php
echo json_encode(array('itemcode'=>$_POST['itemname']))
?>
Javascript alert shows [Object object] for object. You can see response using console.log or can use that key with alert.
For more information, refer jQuery.ajax()