Good afternoon,
I have the following functions that shows and hides a page busy loader:
busyStatusDelay = 1000; //milliseconds
var timer = null;
var show = false;
function busyShow(nodelay,delay) {
timer = setTimeout('busyDelayShow()',busyStatusDelay);
}
function busyDelayShow() {
if ($.active > 0) {
$('#json-overlay').css('display', 'table');
show = true;
}
}
function busyHide() {
clearTimeout(timer);
timer = null;
show = false;
$('#json-overlay').css('display', 'none');
}
This works great for normal ajax queries, we however have a new function that should send emails with SMTP, but this SMTP connection takes a few seconds too long to connect and send the emails.
To avoid this I want the ajax function to not trigger this loader, the function does not call the function to open the loader, but the issue is that when another function gets called that should open the loader, it picks up that there is an active connection so the loader comes back up and does not go away.
I tried to use the following so that the JS does not see it as an active request:
xhr.abort(); busyHide();
but when the ajax gets aborted the php aborts with it.
Note that the functions to send the emails should run in the background and should not wait for a response.
I have been searching for a way to disconnect from the server request without affecting the server's functions running and send the email.
I saw ignore_user_abort in another post so will be doing some reading up on this to see if this will work without affecting the rest of the system.
Thanks in advance for any tips on how to continue!
A good approach to this would be to execute your SMTP as a background process using some sort of queuing mechanism. So basically, whenever a JS triggers AJAX to mail, the PHP push the email request to a queue and send a response back to the XHR immediately. This way, your AJAX execution won't be blocked for long.
If you are using some sort of PHP framework like Laravel, it makes easier to manage queues otherwise have a look at this post.
Related
For now, I have this :
<?php
$result = get_metadata('post', 3241, 'progression_aujourdhui', true);
?>
<div class="ligne_barre ligne_barre_aujourdhui">
<div id="progress_bar-aujourdhui" class="progress_bar_salle_presse">
<h2 class="progress-title"><?= wp_get_attachment_image(3278, 'full'); ?></h2>
<div class="blocs-barre-progression">
<div class="skill-item">
<div class="progression">
<div class="progress_bar" data-progress-value="<?= $result; ?>" data-progress-equipe="equipe1">
<div class="progress-value"><?= $result . "%" ?></div>
</div>
</div>
</div>
</div>
</div>
</div>
The code is inserted in a page called "Salle de Presse" using a shortcode.
This page called "Salle de Presse" has a metakey named 'progression_aujourdhui'.
On reloading that "Salle de Presse" page, if the value of the metakey "progression_aujourdhui" has been updated, the "data-progress-value" updates well in the div with class "progress_bar".
Now, what I would like is to make the div with class "ligne_barre" to reload each time the value of the meta key "progression_aujourdhui" is updated, without having to refresh the whole page myself.
I know that AJAX is needed, but I'm not sure how to use it in wordpress, and furthermore the "detect when a meta value is updated" part leaves me with no success in my research on the internet.
This will not be an easy task to establish on a wordpress. There are 2 general solutions to this problem.
Use "long pooling", basically call your wordpress api from the frontpage each n seconds and update data if changed. This may prove costly as each client will bombard your backend.
Use web-sockets and subscription method, usually you will need a custom vps (server) for this with nignx proxy, enable tcp connection, and get a "subcription" whenever database changes, but still the logic "to who and where to send this database change info" will be on your side. Wordpress and websocets should be enough to get you going
Good luck
It sounds like you are trying to retrieve data from a database and update the data on the front end without a page reload.
I use Ajax calls quite a lot in wordpress for this and I find them pretty easy to do.
You make an Ajax call from your front end JavaScript.
The Ajax call triggers a PHP function in your function.php file. The function sends a response containing the requested data back to the front end.
The font end JavaScript then processes the response received and updates the page values, etc without reloading the webpage.
Use Ajax. What you'll want is to use a single ajax session to get updates with an infinite timeout. you'll need javascript for this (i dont bother with jquery), and some php hooks.
For javascript you can dynamically generate it such as using admin_url(); to output the path of admin but the normal static path is /wp-admin/admin-ajax.php
Give your elements an id thats related. for instance i use a button to fetch data so use an onclick trigger to a function that sends the ajax.
var t0 = performance.now();
var request=document.getElementById('status');
var table=document.getElementById('contents');//div that will contain the updated html
var t1;
xhr = new XMLHttpRequest();
xhr.open('POST', '../wp-admin/admin-ajax.php',true);//../ forces root url but just / works
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
t1 = performance.now();
request.innerHTML='Status:Successful Time:'+ (t1-t0) + 'ms';
table.innerHTML=xhr.responseText;
//polymorphism here, recall the ajax function
}
else if (xhr.status !== 200) {
t1 = performance.now();
request.innerHTML='Status:Failed Time:'+ (t1-t0) + 'ms -'+xhr.status;
//polymorphism here, recall the ajax function
}
xhr.send("action=me_action&mevar1="+me_value+"&..."+status);
On the php side you'll need this:
add_action("wp_ajax_me_action", "me_function");
function me_function(){
$response='your response here';
$mevar=$_Request['mevar1'];.....
echo $response;
}
To improve performance, set output_buffering=On or 1 (dont use a set limit as a smaller output will cause delays) in your php.ini as large requests can be more efficiently packaged across the network and with compression.
To continuously update or recheck just use
setTimeout(my-ajax-function,0);
but if the server has a timeout for this then use setInterval(my-ajax-function,less-then-server-timeout-in-milliseconds);
many wordpress setups are already heavy, it takes a lot of resources on servers to run the php that while a static web page can be delivered in 50ms, your wordpress response will tend to be delivered in 500ms-1s for most installs unless you actually know how to optimise it (a service i do offer from the ground up, server to wordpress). I did not use jquery because if you barely need it for a page, please avoid using it to save on resources. Same for your ajax calls, do it with as few requests as possible and try to get everything in 1 request. This applies to other wordpress related work like using the wordpress REST API as each request adds a significant delay that can end up stacking from seconds into minutes. A page of 100 listed items with 100 requests can take 50 seconds, and a lot of CPU, so do it all in 1 or as few requests as possible.
I wanted to program a sort of panel from where i can send command to user For a live game that came to mind using jquery, javascript and php.
I take as a reference for every user using SESSION of php.
The initial user will have a
setInterval(function(){
var xml = new xmlHTTPRequest();
xml.open('GET','http://samepage.php?data= I don't know',false)
xml.send()
if(xml.responseText=="color"){
hideloader();
ShowFavoriteColorForm();
}
}, 3000);
The point is that I can't figure out how to use ajax to do a function that is waiting for something from another page (a string for example) and then perform other operations.
If there were examples or documentation in this regard, thank you very much.
I'm struggling to find out why TcpClient don't receive any data in server side if it has called through ajax.
However, if I put breakpoint in my server side code it works fine even if I have called it with ajax.
I also investigated to find out if my JavaScript function is asynchronous but it seems my JavaScript function is fine.
JavaScript function:
$('#btnGO').click(function () {
var url = 'Home/Command';
var data = { Location: $('#Location').val() };
$.when($.getJSON(url, data)).then(function (result) {
$('.Console').html(result);
});
});
Server side:
TcpClient tc = new TcpClient("Host Address", 23);
return Json(tc.Connected + " " + tc.Available, JsonRequestBehavior.AllowGet);
Output if I put breakpoint in serverside:
true 22
Output if I don't put breakpoint in serverside:
true 0
I think you'd want to call GetStream(), and then call Read() on the returned NetworkStream. Read() is blocking, and won't allow your action method to return prematurely. Right now, there are no blocking calls to prevent your action method from instantly returning (faster than your tcp client receives data), which is why you get 22 when you put in a break point - it doesn't instantly return. It seems awkward that your UI responsiveness depends on somebody sending data to your API via a socket though....
let me emphasize this more: It's really strange what you're doing. Your UI will be waiting for a client to send data to your API via a socket. Having said that, check out the following link: https://msdn.microsoft.com/en-us/library/system.net.sockets.tcpclient.getstream(v=vs.110).aspx
I have a simple social networking site with chat functionality. I have used $.post a lot in multiple pages.
The code works well on all pages except message.php where the user message is posted and fetched multiple times with
$.post
(used to work well on local server).
When the messaging between users occur simulateously, the website stops to respond. On reload, the server goes down and ERR_EMPTY_RESPONSE message is shown. The website again comes into operation after a couple of minutes. To what I learnt, this is happening on pages that use $.post frequently.
To summarize the situation, I have created a live test page. An ERR_EMPTY_RESPONSE occurs when input is given continuously for some seconds.
The page contents:
a.php
<script>
$(document).ready(function(e) {
$(".abc").keyup(function(){
var a = $(this).val();
$(".showoff").text("wait..");
$.post('bbs.php',{a:a},function(abc){
$(".showoff").html(abc);
});
});});
</script>
<input type="textbox" class="abc">
<div class="showoff">Type to Change Me!</div>
bbs.php
<?php
echo $_POST['a'];
?>
I am hitting my head hard on the wall for a week. So, Please help me with this problem.
Thanks in Advance.
Sorry for my lame English as well.
As you appear to want an autocomplete type setup, use a timer. Reset it on each keypress and after a delay send your post. In this example it will send 3 seconds after the last keypress.
$(document).ready(function(e) {
var timer;
$(".abc").keyup(function() {
var $input= $(this);
// Start timer
clearTimeout(timer);
// Start a new 3 second timer
timer = setTimeout(function() {
// Once the
var a = $input.val();
$(".showoff").text("wait..");
$.post('bbs.php', {
a: a
}, function(abc) {
$(".showoff").html(abc);
});
}, 3000);
});
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/Locpnk35/
This will avoid overloading your server as no more than 1 request every 3 seconds can come from the same user. If the response is slower than 3 seconds you may also need to disable the key handler while an Ajax request is in progress.
Simplest answer would be you allow your server to be spammed to the point that it stops responding (yet still recieving new connections). If the connections are not closed(resolved) in time you will also hit limitation of concurrent browser connections to domain (which I think is really happening - browser blocking you in making those request).
You either switch to sockets, or send text to server on set interval of time. Alternatively you dont allow next post, till previous is resolved.
Instead of allowing your server to be spammed, you can remove the handler before the first post and set it back again when the post returns.
$(document).ready(function(e) {
var $abc = $('.abc'); //good idea to cache those jQuery selectors!
function abcPost() {
$abc.off('keyup', abcPost)
var a = $(this).val();
$(".showoff").text("wait..");
$.post('bbs.php', {
a: a
},
function(abc) {
$(".showoff").html(abc);
$abc.on('keyup', abcPost)
});
}
$abc.on('keyup', abcPost);
});
Ajax syncronous: Make the ajax call syncronous. This will stop its thread untill the response is back, easy to implement but comes with the downside that the user cannot type anymore untill request is solved
$.ajax({
url: 'bbs.php',
data: {a:a},
success: function(abc){
$(".showoff").html(abc);
},
async: false
});
Global variable check: make a global variable that checks the state of previous request and doesn't allow future ones until it is resolved:
var waiting=false;
$(".abc").keyup(function(){
if(!waiting){
waiting = true;
// code
$.post('bbs.php',{a:a},function(abc){
$(".showoff").html(abc);
waiting=false;
});
}
});
This is good.
var waiting=false;
$(".abc").keyup(function(){
if(!waiting){
waiting = true;
// code
$.post('bbs.php',{a:a},function(abc){
$(".showoff").html(abc);
waiting=false;
});
}
});
Here is a 'hypothetical' situation.
Let's say I have :
a websocket who tell's me to send a ajax on a url like http://localhost/Whatever every 10 sec.
The ajax call on http://localhost/Whatever will take 45 seconde to reply (exagerate number for the situation).
I wonder how will the browser react? in my mind 3 case:
(good one): Browser is really smart : He understand we ajax
the same url so he won't stack ajax call until the current call
finished.
Browser understand we ajax the same url and make an abort() on the
Ajax 1st call and start a new one (if the browser really does that, it
would be rubbish in my mind).
(worst case): Browser send a ajax on the url each time websocket ask
him to and wait for the answer. Moreover, I suppose there will be a
problem with limitation of parralel ajax request? (i wonder how the
browser if this case happens ?)
So, Which case will happen and why ?
The answer is case 3.
The browser will send all requests in the order you make them. Generally speaking a computer will carry out your instructions in the order your issue them. If you want or need special behavior such as throttling the rate of the requests or not sending the subsequent requests until prior ones have finished you will need to implement that your self.
Imho, this pseudocode might help you.
var requestLock = false;
function pollFromSocket() {
if (someCondition) {
sendRequest();
}
}
function sendRequest() {
if (requestLock) {
return;
}
requestLock = true;
$.get('/whatever')
.done(function(response) {
// process response
})
.always(function() {
requestLock = false;
});
}