Jquery PHP ajax show server response as it send it - javascript

I'd like to know if there is a possibility to show server response as it send it in real time in a long time consuming request.
Context:
1) A Jquery function send an ajax request to the server and open a Dialog widget waiting for response to update Dialogs content.
2) The PHP server process the request in a long time consuming process, 20s, or much more up to minutes, it's an intranet website the user knows thongs takes time, lots of stuff to manage.
While the server is working, I have several "echo" in my PHP code with some stuff to say and the server is still working on other things to "echo" more.
My problem is that the Dialog don't updates as long as the server has not finished.
I want to show the partial response in live as soon as the browser receives it, with a SINGLE Ajax call from a unique function.
So... Two questions in fact:
Is my browser receiving the "echo" in live?
If Yes: How do I Show it live?
If No: How do I send it Live? And how do I Show it Live?
Any help would be greatly appreciated.
Thanks

Is my browser receiving the "echo" in live?
No, ajax waits for php to finish and then throws out all echoes at once.
If No: How do I send it Live? And how do I Show it Live?
I dont know a quick way to show it live but there are workarounds.
Create multiple ajax functions that will interact with the server to make it seem live. like I said in the comments. With this I am assuming you know how ajax works.
//javascript
function f1(){
//call ajax to tell the server send a start response
}
//php
echo "<img src='loading.gif'>";
//or something like it.
//ajax function to make the server do the data.
function f2(){
//call ajax to tell the server to start and save data in a session
//Or something like it also set div to be changed to a hidden div.
}
//php
//run the required script. then echo a finished response that can be found by js.
//to make it seem extra live you can split this up in different parts.
//so you can show progress to the client side. like step 1 of 5 complete.
//ajax function 3 for finished
function f3(){
//tell server to echo results once f2 is finished;
}
//php
//echo results loaded from where you saved it.
//probably session, delete the session when finished.

Related

how to store javascript variable into php

I want store clickede_id value into $id2[] give me some suggestions and also suggest some advance details
function yes(clicked_id)
{
var it1=clicked_id;
alert(it1);
var tt1=1;
var tt2= "<?php echo($id2[var it1]); ?>";
//var tt2=document.getElementById("idcheck").value;
alert(tt2);
var tt3=document.getElementById("idcheck1").value;
//alert(tt3);
}
When you develop a web application, you are creating tools to let client and server communicates (over the HTTP protocol). This communication is based on Requests and Responses.
The client send request to server and the server responds with a reponse. In your case, you choosed PHP as the server-side language that will create your responses as answers to client request. Thes responses are HTML (+ javascript). Anyways, the reponses are static stuff to be interpredted by the client.
So the code you have sent is seen by the browser as:
function yes(clicked_id)
{
var it1=clicked_id;
alert(it1);
var tt1=1;
var tt2= 3; // or whatever value returned by php
var tt2=document.getElementById("idcheck").value;
var tt3=document.getElementById("idcheck1").value;
// ajax call here
}
When you say : store data from javascript to php (even if it doesnt look as a correct senetence), you mean sending data from client to server. It can be done via a classical Post request (via form submit with page refresh) or via ajax without page refresh.
For ajax, please to check jQuery documentation for $.ajax function (if you want to have a cross browser compatible solution), or XMLHTTPRequest object if you want raw javascript and do the cross-browser compatibility yourself.
PHP executes in the server and send the result to your browser to display. Your JS executes at this browser stage. What you need to understand is that PHP has already been finished it's execution when your JS gets a chance to execute. Trying to change something in PHP through the JS is trying to access the past.
But, the good news is, that you can adopt a model where you feed your JS through the PHP script (look at this echo "<script>var s = 'from php'</script>") and JS feeds your NEXT php execution. You can use ajax or direct page calling for this.
Probably you should read this question: How to pass data from Javascript to PHP and vice versa?

How do I measure the progress of an ajax call? In Php with jquery/ajax

I have an AJAX call that is running a long PHP script where it has 20 different results, I would like to show when each step in the script is done.
Like so 1/20 done, 2/20 done, 3/20 done.
Latest 29-12-2015 03:17.
I tried to create the JSON file as so (jsonFileName_uniqueTimeStampHere.json) by PHP, but the time taken to create the file with PHP, result in a 404 file not found error!
Because when the AJAX call is running it comes to the progress call before the file has been created, I know I can't create the file with JavaScript but is there anyway to create.
The file before the success callback from jQuery AJAX?
What would be the best way to show progress information while AJAX call is running.
The way I have it now, I have a JSON file saved on the server that gets updated with the latest state that has completed, but if multiple users is running the same script the JSON file with the state gets overwritten.
Should I save the state of each progress in DB and then receive it with multiple calls to a PHP method that get state that has been completed?
Should I keep using the current method I use and add a userID to the JSON file so it is unique on each call to the file?
How should I go about doing it the same way as Seositecheckup?
What is the best way to make a progress with AJAX and PHP?
Please tell me if you need any more information.
I have looked around and don't feel like the info or half of info, there is to find online has been enough to do this myself.
I would like to use jQuery AJAX and not XMLHttpRequest, I'm looking for something similar to seositecheckup.com, when you scan a page you can see the state update on each completed function in the console and is done with different AJAX calls. How is that possible?
Should I forget about using jQuery and keep focus on plain JavaScript instead?
Right now I have a setup with jQuery that works the problem is, that I use a JSON file to get the result from and it gets overwritten when multiple users request the same script, is it possible to store the state in db instead and receive it from there with some unique identifier?
In the future I would like to make it possible to put the script into a queue that could be run and when the script ends it should send an e-mail to the user.
The HTTP way of handling requests that may take a long time is for requests to return a 202 and the body of the response should contain the URL where the user can query for the result.
#Request
POST /some/entitities
...
#Response
HTTP/1.0 202 Accepted
/jobs/{jobId}
The user can then poll /jobs/{jobId} which can return a number to represent progress. Do you have to use this? No, but if you do, others developers can immediately recognize what is going on.
Even if you don't use the approach I recommend, you will also have to keep track of job progress in your database and have a separate AJAX call to find out the current progress.

Javascript is executing on reload

I am using a php file to create a page that allows me to manage mysql entries. The page fetches the entries from the database and lists them which I have working fine. I am trying to add a button that allows me to "accept" an entry which changes its status value to 1 from 0.
It is working fine, except when I refresh the page, it automatically is executing the javascript function which should be an onclick event. Am I missing something incredibly simple or something. I have been looking at this for 2 days now and have rewritten it several times without success as well as extensive googling to find an answer.
My button:
<input type='submit' name='acceptbut' id='acceptbut' value='Accept'></input>
I am thinking the problem has something to do with either the location.reload or something else.
<script type="text/javascript">
function setAccept() {
<?php
$query = "UPDATE regiments SET status=1 WHERE memberID=$mid";
mysqli_query($connect, $query);
?>
location.reload(true);
}
document.getElementById('acceptbut').onclick = setAccept;
</script>
I have also tried messing with an inline onclick but it is not working either
My confusion is why is the function running if im not actually calling it.
Your PHP executes on the server every time the page is requested. The fact that the PHP is located inside a Javascript function is not relevant.
The PHP server parses the file, finds any PHP in it, runs the PHP on the server, then sends the result to the browser.
If you want to execute some PHP only when a Javascript function is executed in the browser, then you have to make an Ajax call from the Javascript to your server and have the Ajax call request a PHP page that can then run the desired PHP and return a result (if necessary) back to the browser's Javascript.
Keep in mind that in your setup, PHP executes on the server, then the resulting page (without any PHP in it) is sent to the browser. The browser then executes appropriate Javascript in the web page as events occur. The only way to execute code on the server at that point is to make an Ajax call to the server.
You are confusing Client and Server side. Look at this:
function javascriptFunction()
{
<?php echo date("Y"); ?>
return true;
}
The above block of code gets executed in PHP. How? Each line of the above code is treated as a sequence of characters and is sent to the cout (standard output). The small snippet inside the <?php...?> gets executed by PHP and if there are any output, it also is sent to standard output. Only when the characters are sent from server to the client side (browser), the browser starts interpreting them. Which results in a code inside <script type='text/javascript'>..</script> to be interpreted as a JS snippet. Now, bear in mind: EVERY PHP CODE GETS EXECUTED BEFORE THERE ANY THING AS JS, CSS or HTML. PHP SEES EVERYTHING AS EITHER String, Integer/Double or Boolean (etc.).
What you should do?
Learn what is AJAX, and try to learn its best practices. You'll amaze at its excellence.

Server Side Broadcast Update PHP

I want to build an application which will automatically broadcast notification(s) to a user when data on server is changed. So far, I just know one method of doing this i.e. using JQuery setInterval. Using this function, every client requests data through ajax to server, asking if something changed.
The weakness of this method is every client must send a packet every specific time interval, so my server receives huge data packet. It's so frustrating to manage the server. Are there any alternatives for this besides Jquery setInterval?
If Websockets is not an option for you, you could use one ajax request to the server. Than server side go into a infinite loop. Use the sleep function to not overload the memory. Than check each time if there is something changed. If so, break out the loop and return the data. On the client side send immediately the next request.
After a bit of research it's called "Ajax long-polling requests".
Here is a explanation.
The PHP code would look something like this:
$prevHash = $_GET['hash'];
while(true){
$currHash = GetHashFromTable('myTable');
if ($prevHash != $currRowCount) break;
sleep(3);
}
$response[0] = GetDataFromTable('myTable');
$response[1] = GetHashFromTable('myTable');
echo json_encode($response);
Update
Long polling is not the best option. Better to use web-sockets.
If you want to compare the differences, see this answer: https://stackoverflow.com/a/10029326/3269816

detecting JSON loaded by browser

I have an application in which most requests are submitted via AJAX, though some are submitted via "regular" HTTP requests. If a request is submitted and the user's session has timed out, the following JSON is returned:
{"authentication":"required"}
The JavaScript function which submits all AJAX requests handles this response by showing a popup message and redirecting the user back to the login page.
However, when a non-AJAX request receives this response the JSON is simply shown in the browser because the response is processed directly by the browser (i.e. the aforementioned JavaScript function is bypassed). Obviously this is not ideal and I would like the non-AJAX requests that receive this response to behave the same as the AJAX requests. In order to achieve this, I can think of 2 options:
Go through the application and convert all the requests to AJAX requests. This would work, but could also take a long time!
The JSON shown above is generated by a very simple JSP. I'm wondering if it might be possible to add a JavaScript event handler to this JSP which is run just before the content is displayed in the browser - I'm assuming this would never be called for AJAX requests? This handler could call the other JavaScript code that displays the popup and performs the redirection.
If anyone knows how exactly I can implement the handler I've outlined in (2), or has any other potential solutions, I'd be very grateful if they'd pass them on.
Cheers,
Don
3) Change your AJAX code to add a variable to the GET or POST: outputJson=1
You cannot add a handler to the JSP that way. Anything you add to it will make it a non-JSON producing page.
There are two options that I can see:
Add a parameter to the page by appending a URL parameter to the screen that modifies the output.
URL: http://domain/page.jsp?ajaxRequest=true
would output json only
URL: http://domain/page.jsp
would display a jsp page that could forward to another page.
OR
change the response to have the forwarding code in the JSP that will get executed by the web browser if it is hit directly. Then have your calling AJAX to strip the forwarding code out, and then process what is left.
4) Read up on the 'Accept' request HTTP header.
Then, on the server side tailor the output:
e.g.
if(Accept contains application/json...) { // client asking for json, likely to be XHR
return {"foo":"bar"}
} else { // other
return "Location: /login-please";
}
Start with a smarter error message, like this:
{"error":"authentication required"}
Wrap the JSON output in a callback:
errorHandler({"error":"authentication required"});
Have a handler waiting in your script:
function errorHandler(r) {
alert(r.error);
}
And don't forget to send it down as text/javascript and not application/x-json.

Categories