Question posted in
You can find the official documentation here.

Reload div each time meta value of current page is updated in wordpress – Jquery ajax

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"><a href="<?= get_post_permalink(4270); ?>" target="_blank"><?= wp_get_attachment_image(3278, 'full'); ?></a></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.

Tags:

3

Answers


  1. 0

    This will not be an easy task to establish on a wordpress. There are 2 general solutions to this problem.

    1. 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.

    2. 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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search