Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress shortcode in Elemantor not working optimally run from Javascript

I have a WordPress site designed with Elementor where I run code through the html element in Elementor to show a couple of dropdowns, when each one is selected with a value and the button clicked, the values of the dropdowns are passed into variables and then used in a shortcode to be passed to functions.php to run a select query to retrieve info from the database, based on the variables / attributes passed to them through the shortcode. Problem comes in where it is fine to use the shortcode with the parameters already set, but using with the parameter obtained from a variable is not passing through the shortcode (for example it will pass the actual variable name through the shortcode rather than the variable itself). Obviously php is run before javascript so I have read the only way to do this is through an ajax call. Not sure how to do this, please could you assist.

This is how the code is setup:

In the below, if you replace this line of code

let shortf = "[my_elementor_php_output455 field_id="shortc" name_id="shorte"]";

With


let shortf = "[my_elementor_php_output455 field_id="2" name_id="3"]";

It would produce the desired results, but it will obviously not pass the variable as in the firast line of code, but rather passes the variable name which is useless, need an ajax call, but need code to assist.

In the html element in Elementor:

<html> 
<head> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
</head> 
<body>
<center><label for="InfoPack"><b>Please choose your id</b></label><br>
<select name="InfoPack" id="InfoPack">
    
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6/option>
  <option value="7">7</option>
  <option value="8">8/option>
  </select></center>
  
  <center><label for="InfoPack1"><b>Please choose your name</b></label><br>
<select name="InfoPack1" id="InfoPack1">
    
  <option value="1">Moe</option>
  <option value="2">Dooley</option>
  <option value="3">Finn</option>
  <option value="4">James</option>
  <option value="5">Doe</option>
  <option value="6">Stanley/option>
  <option value="7">Day</option>
  <option value="8">Jay/option>
  </select></center>
  
    <button id="button"> process !</button> 
   <p> 
      <div id="result"> </div> 
   </p> 
   
   <script> 

      $(document).ready(function() { 
         $('#button').click(function() {
         document.getElementById("result").innerHTML = "";
         let shortc = "";
         let shorte = "";
         let shortf = "";
            fun(); 
         }); 
      }); 

     function fun() { 
       let shortc = document.getElementById("InfoPack").value;
       let shorte = document.getElementById("InfoPack1").value;
       let shortf = "[my_elementor_php_output455 field_id="shortc" name_id="shorte"]";
        document.getElementById("result").innerHTML = shortf;
      } 
   </script>
</body>
</html>

In the functions.php:


// Shortcode to output custom PHP in Elementor
function wpc_elementor_shortcode455( $atts, $content = null, $tag){
$atts = shortcode_atts(
        [
            'field_id'     => '',
            'name_id'     => '',
        ],
        $atts
    );

$myshape = $atts['field_id'];
$myshape1 = $atts['name_id'];
$servername = "localhost";
$username = "xxx";
$password = "xxx";
$dbname = "xxx";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, nid, firstname, lastname FROM MyGuests where id=$myshape AND nid=$myshape1";
$result = $conn->query($sql);

if ($result !== false && $result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
      
    return "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
  }
} else {
  return "0 results";
}
$conn->close();
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I have tried adding ajax without success, when I click on the button, nothing happens, probably formatting, not sure at all, here is the code:

    Javascript:

    <script> 
   

             $(document).ready(function() { 
             $('#button').click(function() {
             ajaxcall();
    
    });
    
    });
       
       
    function ajaxCall() {
        let shorto = document.getElementById("InfoPack").value;
                $.ajax({
               type: "post",
               url: `${window.location.origin}/wp-admin/admin-ajax.php`,
               data: {
               action: "my_action",  // the action to fire in the server
               data: shorto,         // any JS object
      },
     complete: function (response) {
      document.getElementById("result").innerHTML = console.log(JSON.parse(response.responseText).data);
     },
    
    });
                    
    }             
    
       </script>

    functions.php

    add_action('wp_ajax_my_action', 'my_function');
add_action('wp_ajax_nopriv_my_action', 'my_function');
function my_function() {
    $data = $_POST['data'];
    $data1 = "[my_elementor_php_output455 field_id=".$data." name_id=3]";
    wp_send_json_success($data1);
}

  2. 0

    Based on the codes you shared for me , there is multiple syntax issue.
    could you share the URL ?

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

Back To Top
Search