I have a code that gets some data and send it to a php page that makes the process and finally shows the result of this process without reload the page:
So, I hace this code that calls process.php file.
$(document).ready(function(){
$("#btEnviar").click(function (){
var datos = $("#formulario").serialize();
$.ajax({
type: "POST",
url: "process.php",
data: datos,
contentType: "application/x-www-form-urlencoded",
beforeSend: function() {
$("#status").html("Enviando....");
},
dataType: "html",
success: function(datos){
if(datos == 1){
$("#status").html("Script procesado satisfactoriamente");
}else if(datos == 0){
$("#status").html("Error al procesar script");
}
}
});
});
});
It is possible to make a progress bar of process.php ?
Thanks in advance for your help.
Have you looked at http://php.net/manual/en/session.upload-progress.php
Note, it doesn't work in fastCGI mode
You may use some ready-made solution like Reload Progress Bar. However, check this post first File upload progress bar with jQuery. I hope it helps.
Related
I got this function in my html for a simply validation...
<script>
function pwdcheck(dataPwd) {
var parametros = {
"dataPwd" : dataPwd
};
$.ajax({
data: parametros,
url: 'check.php',
type: 'post',
beforeSend: function () {
$("#infomsg").html("checking, please wait...");
},
success: function (response) {
$("#infomsg").html(response);
}
});
}
and this check.php
<?php
$clave = 'cocacola';
if(trim($_POST['dataPwd'])==$clave) {
// redirect to some page
}else{
echo "Incorrect Password!";
}
?>
and the problem is that when I use it directly from this first html that I showed you... all works perfect, but when I load this html inside a div (#section), its stop working displaying the "checking, please wait..." message.
Someone could please help me?! Thanks!
Well I solved the problem! Thanks to all! you gave me ideas to try some things step by step...
The problem was that the php file was in another directory... and ajax seems to arrive in one way but php cant find a way to return I think... php echo dont cross directories :P
What I tried was this.
I had main.html who loads in his #section validate.html who was the one who has the ajax inside to communicate with check.php, validate.html and check.php were in another directory.
The solution was only moving the check.php to the same directory than main.html, and it worked even keeping validate.html in the other directory... weird no?! at least for me that I dont know so much :P
Thanks again to all, Leandro.
<script>
function pwdcheck(dataPwd) {
var parametros = {
"dataPwd" : dataPwd
};
$.ajax({
data: parametros,
url: 'check.php',
type: 'post',
dataType:'html',
beforeSend: function () {
$("#infomsg").html("checking, please wait...");
},
success: function (response) {
$("#infomsg").html(response);
}
});
}
</script>
Everything work fine if I use this:
form name="nnewOBR" id="inewOBR" method="POST" action="targetsample_pdf.php" target="_blank"
The data from the form will be saved in the database and the PDF will be opened. But when I use ajax, it will only execute the insertion of data in the database but it will not open the PDF. My ajax statement is as follows:
$(function() {
$("#inewOBR").submit(function() {
var datos = $('#inewOBR').serialize();
$.ajax({
type: "POST",
url: "targetsample_pdf.php",
data: datos,
success: function(data) {
alert("Successful");
}
});
return false;
});
});
I would really appreciate your help. Thank you very much.
$.ajax({
url: '/gateway/',
type: 'POST',
data: {test : 'test'},
dataType: 'json',
}).done(function(){
console.log('done');
});
Above is my AJAX post, below is my PHP:
var_dump($_POST['test']);
die();
The problem is, this fails to work (I get a NULL value) - why?
I know my call is getting to the PHP code as I can dump any old string:
var_dump('hello');
die();
Where am I going wrong?
Just remove this dataType: 'json'. Your $_POST['test'] is a string value, not a JSON string.
The POST value that you are testing with is not JSON, it's a string.
Remove the
dataType: 'json',
and it should work.
When you set dataType: "json" within the AJAX request it means the expected response should be parsed as json, (not the outgoing POST, as others have said).
Heres is a stripped down copy&paste example, for you to build upon. Hope it helps
<?php
//is it POST
if($_SERVER['REQUEST_METHOD'] == 'POST'){
// set var
$test = isset($_POST['test']) ? $_POST['test'] : null;
//do some logic - skip that bit ;p
//was the request from AJAX, ok send back json
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//always a good idea
header('Content-Type: application/json');
//json encode, notice the ABC, then look at the jQuery below
die(json_encode(
array('ABC' => 'From Response: '.$test)
));
}
}
?>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
var ajax = $.ajax({
url: "./",
type: "POST",
data: {test : 'test'},
dataType: "json"
});
ajax.done(function(data) {
$("#result").html(data.ABC); /* << See data is an object */
});
ajax.fail(function(xhr, status, error) {
$("#result").html(xhr.responseText);
});
});
</script>
<span id="result"></span>
I'm not totally sure if this is the issue, but .done is deprecated. Additionally, as others mentioned, you are asking for json from the server and not receiving json.
Your code should look like this
$.ajax({
url: '/gateway/',
type: 'POST',
data: {test : 'test'},
success: function () {console.log('done');}
});
I would like to recommend you my code. and please do check the following points.
check the location of the url you are giving. If it is in parent directory then you can access it using ../ and the most important thing give the extension of the file. like 'gateway.php'
and write success and failure function. It gives a better insight of what's going on.
$.ajax({
type:'POST',
url:'gateway',
data:{test:'test'},
success: function(data){
if(data)
{
alert(data);
}
},
failure: function(){
alert(failed);
}
}) ;
comment if there are any errors
hope it helps :). If it does then don't forget to green it :P
Or change PHP code
header('Content-Type: application/json');
exit(json_encode(array('data' => 'Bla bla bla')));
I'm currently learning PHP. I've made a simple script # http://hash.techho.me, only thing is, I want the form to submit then load the results via AJAX, without the user leaving the page. Possible?
post the form using ajax
$.ajax({
url:'yoururl',
data:$("form").serialize(),
type:'POST',
success:function(data){
alert("success");
},
error:function(jxhr){
alert(jxhr.responseText);
}
});
jQuery.ajax() – jQuery API
Posting to the same page should do the trick. No need to use ajax for that
> <?php
>
> //do stuff with $_POST
> ?>
>
> <html> <body> <form method="post">
>
> <?php echo $result ?>
>
> </form>
> </body>
Fike
use ajax for this, lets suppose try this one for your practice
var string = $("#string").val();
var dataString = 'string=' + string ;
if(string==''){
alert('enter any string');
}
else{
$.ajax({
type: "POST",
url: "path of php file",
data: dataString,
suceess: function(){
//do something
},
error: function(){
//do something
}
});
}
You can use jQuery or Prototype JS libraries to make an easy AJAX call. Example using jQuery would be:
$.ajax({
url:'hashed.php',
data:$("form").serialize(),
type:'POST',
success: function(data){
$('hashmd5').html(data.md5);
$('hashsha1').html(data.sha1);
},
error: function(jxhr){
alert(jxhr.responseText);
}
});
Don't use the same id value in HTML, never ever. They must be unique to correct perform JavaScript functions on elements.
yes it is possible. Write a javascript function that would trigger on submit, disable the submit button so user couldn't press it again, and finally request the server via ajax. on successful response update the content. Something like following in Jquery
$('.form-submit').click(function(event)) {
event.preventDefault();
if(form is valid and not empty) {
$.ajax({
type: "POST",
url: "path to script that will handle insetion",
data: "data from form", //like ({username : $('#username').val()}),
suceess: function(data){
//update the content or what. data is the response got from server. you can also do like this to show feedback etc...
$('.feedback').html("Data has been saved successfully");
},
error: function(){
$('.feedback').html("Data couldn't be saved");
}
});
}
}
I am new to the jQuery AJAX ajax() Method. I have successfully created the function AddATeacher() which gets called because all the alert messages do popup. However the ajax() Method inside the function does not work. I know this because the addATeacherInsert.php does not load.
I got it to work under firefox, but not on chrome. However it only works in firefox when I have the alert message at the end of the code: alert ("Exiting myJQFunctions...");, otherwise it stops working all together. I would like it to work when I comment out the alert message at the end of the file. How can I solve this?
function AddATeachers()
{
var tFirstName = $('#teachers_first_name').attr('value');
var tLastName = $('#teachers_surname').attr('value');
alert ("Entering myJQFunctions...");
alert ("Teachers first name is: " + tFirstName);
$.ajax({
type: "GET",
url: "../pgs/addATeacherInsert.php",
data: "tFirstName="+ tFirstName +"&tLastName="+ tLastName,
success: function(html){$("#Ajax_response").html(html);}
});
// works well under firefox but shows alert
// doesnt work at all if commented out.
alert ("Exiting myJQFunctions...");
}
Ajax functions ends only after it gets response from server.
function AddATeachers()
{
var tFirstName = $('#teachers_first_name').attr('value');
var tLastName = $('#teachers_surname').attr('value');
alert ("Entering myJQFunctions...");
alert ("Teachers first name is: " + tFirstName);
$.ajax({
type: "GET",
url: "../pgs/addATeacherInsert.php?tFirstName="+ tFirstName +"&tLastName="+ tLastName,
success: function(html){
alert(html); // alerts the html code returned.
$("#Ajax_response").html(html);
alert("Exiting myJQFunctions..."); // Ajax function ends here only.
}
});
}
You could use the jQuery GET method
function AddATeachers() {
.get('url/phpPage.php', {tFirstName: $('#teachers_first_name').attr('value'), tLastName: $('#teachers_surname').attr('value')}, function(returnData){
$("#Ajax_response").html(returnData);
});
}
Answer for ur Question Only
$.ajax({
type: "GET",
url: "Enter Full file path",
data: "tFirstName="+ tFirstName +"& tLastName="+ tLastName,
success: function(html){
$("#Ajax_response").html(html);}
});
tyr this dude...