"Waiting for response" message when Ajax call - javascript

When I use Ajax call(jquery) in the HEAD section I find a "waiting for response message" on a chrome browser with revolving circle. I don't want this ugly look. Is there a way to avoiding this?
PS: When I use input tag to call the JavaScript(Ajax call) function like
<input id="launcher" type="button" onfocus="go()" value="Go!"></input>
I couldn't see a waiting circle. Cause my program should call the function automatically I couldn't use this method.(If I use document.getElementById("launcher").focus() to automatically start the function, It showed waiting circle again.) I guess there's a some different context to call JavaScript function.
Update Here is my sample code
<HEAD>
<SCRIPT TYPE="text/javascript">
function go() {
$.ajax({
url: "/myService",
success: function(data){
document.getElementById("result_area").innerHTML = data;
go();
}
});
}
$(document).ready(function(){
go() //Here I want to Comet call;
});
go(); //should start automatically.
</SCRIPT>
</HEAD>
<BODY>
<!-- <input id="launcher" type="button" onfocus="go()" value="Go!"></input>
This doesn't show the waiting circle. Why? Use different call context? -->
<div id="result_area"></div>
</BODY>

there are some issue i want to highlight
<input id="launcher" type="button" onfocus="go()" value="Go!"></input>
this should be
<input type="button" id="launcher" value="Go!" />
then
if u want a image instead of text then put a div before form with display:none
in ajax call you are not writing url link with extension (.php or .html or .js )
in success : you again calling go(), this smell like recursive function
what data u r sending to the server?? data: is missing from ajax option
also mention dataType ( optional)
if you dont want to run ajax automatically then do it on some event( like i do on click)
bind with the document ready
write javascript code in head ( best practice to write just before </body> )
i tried my hard to tell you the basic, here is my way
HTML
<div id="waiting" style="display: none;">
<img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
</div>
<form>
// here is your form
</form>
jQuery
<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
$('#waiting').show(500);
// instead run automatically now it will work on click of button
$('#launcher').click( function () {
$.ajax({
url: "/myService.html", // or whatever page
// by the way where is data which you sent on server??
data: { email : $('#email').val() }, // like i send the email to the serever
dataType : "json",
async : false,
success: function(data){
$('#waiting').hide();
$("#result_area").html(data);
}
});
});
})

I found that this waiting circle on XMLHttpRequest is depend on a browser implementation. On IE7, Firefox4 it didn't show any waiting circle or bar while chrome11, Windows safari had one.
I believe that standard on this should be made cause it impacts greatly on user experience.

Related

Sending AJAX POST to PHP is not working?

I swear this was working properly earlier, but now it's not so I clearly messed something up.
I'm making a form where the inputted info gets AJAX posted to my PHP file, which just outputs the username and password. Right now I even hardcoded the data being sent to just a string and the php file just printing that for testing purposes. However, when I click submit, it doesn't go to my loginProcess.php page, but it just stays on the page and prints to the console "hello","success", and "test", which indicates it went through the full Process() function.
My url is correct and in the same directory as the index.html file. I've tried different things such as using $.post() or making the submit button a type="input". If you see the form line I commented out before the non-commented one, that's me trying to send the data directly without going through ajax and it works fine and outputs the loginProcess.php (however my project requires going through ajax). Anyone know what's going on?
Here's my html file:
<!DOCTYPE html>
<html>
<head>
<!-- <script src="frontEnd.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Login System</title>
</head>
<style>
</style>
<body>
<center>
<p><b>LOGIN SYSTEM</b></p>
<!-- <form id="login" action ="loginProcess.php" method="post"> -->
<form name = "loginform">
UCID:<br>
<input type="text" name="username"><br>
Password:<br>
<input type="password" name="password"><br><br>
<button type="button" onclick = "Process()">Submit</button>
</form>
</center>
</body>
<script>
function Process() {
console.log("hello")
var ucid = document.loginform.username.value;
var pw = document.loginform.password.value;
$.ajax({
type:"POST",
url: "loginProcess.php",
data: "ajaxUCID=TESTUSERNAME",
success: function(){
console.log("success")
},
error: function(){
console.log("error")
}
});
// $.post("loginProcess.php",{ajaxUCID:"TESTUSERNAME"});
console.log("test")
}
</script>
Here's my loginProcess.php file:
<!DOCTYPE html>
<html>
<head><title>process</title></head>
<body>
<?php
$ucidPHP = $_POST["ajaxUCID"];
echo "Username is ".$ucidPHP;
// $pwPHP = $_POST["ajaxPW"];
// echo "Password is ".$pwPHP;
?>
</body>
</html>
Try this -
<script>
function Process() {
var ucid = document.loginform.username.value;
var pw = document.loginform.password.value;
$.ajax({
type:"POST",
url: "loginProcess.php",
data: {ajaxUCID:TESTUSERNAME},
success: function(){
console.log("success")
},
error: function(){
console.log("error")
}
});
}
</script>
Hope this will work for you.
When you click on your network tab of Google chrome or equivalent of the other browser and then send your Ajax request to observe your packet delivered what result do you have ?
If you have a packet with an error can you tell us witch one, and if you receive a good header (without errors) , check the information inside it to see if it throws correct informations, like the data form in your Ajax post.
After that if the information are correct and the data structure is correct, to test, I usually do the following code to test the entire post received :
if(isset($_POST)){
var_dump($_POST); // this will show all posts received
}
Let me know if it works for you ;)
I don't get your problem, the code is working with me and returning the result successfully.
I think you mean that why the returned results doesn't show on the same page of the form.
Here is the correct code and below it is the explanation
index.php
<!DOCTYPE html>
<html>
<head>
<!-- <script src="frontEnd.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Login System</title>
</head>
<style>
</style>
<body>
<center>
<p><b>LOGIN SYSTEM</b></p>
<!-- <form id="login" action ="loginProcess.php" method="post"> -->
<form name = "loginform">
UCID:<br>
<input type="text" name="username"><br>
Password:<br>
<input type="password" name="password"><br><br>
<button type="button" onclick = "Process()">Submit</button>
</form>
<div id="responseFromServer"></div>
</center>
</body>
<script>
function Process() {
console.log("hello")
var ucid = document.loginform.username.value;
var pw = document.loginform.password.value;
$.ajax({
type:"POST",
url: "loginProcess.php",
data: {"ajaxUCID":ucid},
success: function(response){
document.getElementById("responseFromServer").innerHTML = response;
console.log("success")
},
error: function(){
console.log("error")
}
});
// $.post("loginProcess.php",{ajaxUCID:"TESTUSERNAME"});
console.log("test")
}
</script>
the code you provided was actually working properly, its just you didn't pick the result to display it on your page.
that was done by adding a div where I will place the response.
<div id="responseFromServer"></div>
and in the success callback of the ajax call, I just catched the response sent back from the server and placed it right inside the div, like so:
document.getElementById("responseFromServer").innerHTML = response;
That should work
Update#1:
He wanted to redirect to the php page.
in plain English, you should use ajax requests when you want to work with the server, send requests or get results without reloading the page, you can read more here Getting Starting with AJAX
AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.
so in your case that you want to redirect the user, you don't really want to use ajax in this case you can simply do that with plain html form tag.
a form tag can have multiple attributes, here we are concerned with 2 :
action
method
Here is how you can update the code to get to your results
first: the form part:
<form name = "loginform" method="POST" action="loginProcess.php">
UCID:<br>
<input type="text" name="ajaxUCID"><br>
Password:<br>
<input type="password" name="password"><br><br>
<button type="submit" >Submit</button>
</form>
I've added 2 attributes, which are:
method: I set it to POST, because this is the http request type which you accept on your server [your PHP file you used $_POST].
action: I set it to the relative path of the file which should recieve your request, in our case its "loginProcess.php"
Then I changed the name of the input where we enter the username or UCID to be the same as the one you are receiving in your PHP file.
in your php you were accepting a request parameter $_POST["ajaxUCID"] this means that you are accepting a POST request and you want a parameter called ajaxUCID , that must be the name of the input. this is why I did that <input type="text" name="ajaxUCID">
I have also stopped the onClick action on the button to prevent the ajax request, also I have changed its type to "submit" so that once its clicked, it will automatically submit the form for you.
I hope that helped now, if you need furthur help, leave a comment

how to execute first php function than javascript function onclicking/submiting a submit button

i have this input field:
<input type="submit" name="rregjistro" value="Rregjistro Tani Te Dhenat" onclick="openmodal()" >
I want first to execute POST script in PHP and than to open a modal popup using a javascript function.
Can you please help me!
Thanks in advance!
It is not possible to click using PHP because form submission is the action on the client's side, i.e in your browser. Events in the browser like this can be executed by javascript or other client language.
<form ... >
<input type="submit" name="rregjistro" value="Rregjistro" />
<!-- remove onclick attribute for now -->
</form>
<div id="myResult"></div>
<script>
$(function(){
$("input[name=rregjistro]").click(function(){
// url needs to belong to your domain
$.ajax({url: "/your_url_path", success: function(result){
$("#myResult").html(result);
open();
}});
});
});
</script>
You would still need to start with a javascript function first.
In jquery that would be something like that:
function open() {
$.post('http://url', $('#form').serialize(), function() {
alert('popup goes here');
})
)

PHP Post to a div on main html page - So it can be parsed by Javascript

I have PHP code which successfully gets the contents of a directory on my server.
I wish to then write this array to a specific div on my main html page (so that I can parse this later and use this information further)
Currently my PHP navigates me away from my current page to write this array which I want to prevent.
Furthermore I wish to do all of the PHP work on a button click, and return the values on the main html page after.
How can I do this???
My button on my html page is as follows:
<form action="PHP_Function.php">
<input type="submit" class="learnButton" name="insert" value="Find Available Evidence" />
</form>
And my PHP code looks like this to carry out the work:
if (isset($_POST['action'])) {
switch ($_POST['action']) {
case 'insert':
insert();
break;
}}
I have an array: "IfPresentArray" which I then wish to write to my main html page:
if(in_array("Facebook.xml", $dirArray)){
$IfPresentArray[0]="1";
}else {
$IfPresentArray[0]="0";
}
Any help would be greatly appreciated as I am very new to PHP.
Thanks in advance
You need to use AJAX techniques to do this. Use a Javascript framework like jQuery to react to the button click, make a request to your PHP script, and then update the contents of the div.
See http://api.jquery.com/click/ for handling clicks, and http://api.jquery.com/jQuery.ajax/ for making the request.
Good luck!
You will need to use an ajax call. This allows your to click some div, send something to the server, receive a response and display an output in many different formats.
You can either reference the jQuery library in your header
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
or just download it and save it whereever
Here is a basic ajax call:
<script>
$(document).ready(function(){
$('#someval').click(function(){
var content = $('#somecontenttoadd').val; //this could be many things... etc(.text, .html)
$.ajax({
type:'post',
url: 'PHP_Function.php',
data: 'action='+content,
success: function(resp){
$('#somediv').html(resp); //lets put the information into a div
//this could be anything response format like .val or .text instead of .html
},
error: function(e){
alert('Error: ' + e);
}
});
});
});
</script>
HTML -- you can get rid of the tags and just use the id of the object.
<input type="submit" class="learnButton" name="insert" value="Find Available Evidence" id="someval"/>
As others said, AJAX is the solution, I will give you the code that works for me, so that you have an exact starting point.
As I understand you have a separate html page and a php file that includes your function.
In order to make this work you will have to implement a function with an AJAX call.
This should be placed in a javascript file and will be invoked after the form submit button is clicked on the html page.
The AJAX call will then invoke your php function, get the response data back from php.
The javascript function will update the html page in the end.
You will need three files:
main.html
script.js
function.php
Let me replace my original answer with a full example of the three files.
main.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form id="myForm" method="post" action="function.php">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</form>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-primary" id="SaveButton">Submit</button>
</div>
<div id="resultbox">
</div>
</div>
</body>
</html>
Here we included jQuery, our own javascript and bootstrap just to look better. the form action is our function.php, the form 'id' is used in our jQuery code. the "result box" box will display the response.
script.js
$(function(){
$("#myForm").submit(function(event) {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data)
{
//display data...
$("#resultbox").html(data.name).show;
}
});
return false;
});
});
this will override the default form submit behavior. I had a typo here in the original answer, I fixed it. url and data are taken from the html form, dataType is set to json, because we expect a json back.
function.php
<?php
echo json_encode(array('name' => $_POST['name']));
Our php code is just one line, we build an array and return it as json. You can then used in jQuery, just like any other json, as shown in the above code.

Login to a site without redirect to that site using jQuery/ajax

I want to send a login form to a site without having the page redirect to that site but rather just display a blank page instead. I have been looking around and noticed jquery would help me with this but I haven't found a way to get it to work quite right so I was hoping for some advice. This is what I have right now.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<form id="myForm" action="placeholderurl" method="post">
<input type="hidden" name="username" value = "placeholder"/>
<input type ="hidden" name="password" value = "placeholder"/>
<input type="submit"/>
</form>
<script>
$(document).ready(function() {
$('#myForm').submit(function(e) {
e.preventDefault();
var formdata = $('#myForm').serialize();
$.ajax({
url: "placeholderurl",
type: "POST",
data: formdata,
cache: false,
success: function(data) {
alert("yeah");
//?code to display blank page after successful login??
},
error: function(){
alert("noo");
}
});
});
});
</script>
</head>
</html>
Currently, the code always goes into the "noo" error block. I'm not sure how to extract more information out of the error so I don't know exactly what is going wrong. Any advice/tips would be appreciated.
*Edit
The placeholderurl and placeholder are filled in with the correct information in my actual code. Also, the url I want to post to is not in the same domain as the function is being called from so ajax may not work for this(comment from Archer). Since this is the case, is there another way to get the desired behavior that I can try without using ajax. Thanks again.
I'd suggest watching your network traffic in something like Fiddler, Firebug, or Chrome's developer tools and see what the response is that is causing the error. I'm guessing your placeholderurl is on a different domain and your call is failing due to that.

Execute a python script on button click

I have an HTML page with one button, and I need to execute a python script when we click on the button and return to the same HTML page with the result.
So I need do some validation on return value and perform some action.
Here is my code:
HTML:
<input type="text" name="name" id="name">
<button type="button" id="home" onclick="validate()" value="checkvalue"></button>
JS:
function validate(){
if (returnvalue=="test") alert(test)
else alert ("unsuccessful")
}
What my python code is doing is some validation on the name entered in the text box and gives the return status.
But I need the result back on the same page, so I can do the form submission later with all the details. Any help will be appreciated
You can use Ajax, which is easier with jQuery
$.ajax({
url: "/path/to/your/script",
success: function(response) {
// here you do whatever you want with the response variable
}
});
and you should read the jQuery.ajax page since it has too many options.
Make a page(or a service) in python, which can accept post or get request and process the info and return back a response. It is better if the response is in json format. Then you can use this code to make a call on the button click.
<input type="text" name="name" id="name">
<button type="button" id="home" onclick="validate()" value="checkvalue">
<script>
$('#id').click(function(){
$.ajax({
type:'get',
url:<YOUR SERVERSIDE PAGE URL>,
cache:false,
data:<if any arguments>,
async:asynchronous,
dataType:json, //if you want json
success: function(data) {
<put your custom validation here using the response from data structure >
},
error: function(request, status, error) {
<put your custom code here to handle the call failure>
}
});
});
</script>
I hope this helps

Categories