Ajax not working to insert, query and result data

On my site, through a form I send/register same information in database, do a SELECT/query and return it! Return the last table saved in database, just that user just entered on the form (along with some more information coming from the database).

How I want to display these values coming from databse in a modal bootstrap it's necessary that the page doesn't give the refresh. For this, I inserted the AJAX as follows:

$(document).ready(function(){
      $('#enviar').click(function(){
          $.ajax({
          //CAAL  AJAX IN WORDPRESS 
          url: 'wp-admin/admin-ajax.php',
          type: 'POST',              
          //INSERT, QUERY AND DISPLAYS TO USER      
          data: 'action=prancha',                  
          error: function(){
              alert('ERRO!!!');
          },
          //IF OK, DISPLAYS TO USER IN DIV "RESULT"
          success: function(data){
              $('#result').html(data);
          }               
      });
    });
    });

MY FUNCTIONS.PHP:

function prancha(){
  header('Content-Type: text/html; charset=utf-8');

  include "../../../wp-config.php";


      /* DECLARING THE VARIABLES  */
  $nome = "";
  $email = "";
  $estilo = "";
  $experiencia = "";
  $altura = "";
  $peso = "";

  // VALIDATION
  if(!empty($_POST)){     
     $nome = $_POST['nome'];
     $email = $_POST['email'];
     $estilo = $_POST['estilo'];
     $experiencia = $_POST['experiencia'];
     $altura = $_POST['altura'];
     $peso = $_POST['peso'];

     cadastra_user($nome, $email, $estilo, $experiencia, $altura, $peso);
 }


  //INSERT IN DATABASE NAME, EMAIL, ESTILE, EXPERIENCE, HEIGHT AND WEIGHT
function cadastra_user($nome, $email, $estilo, $experiencia, $altura, $peso){          
    global $wpdb;

    $table = 'user';

    $data = array(      
      'nome' = $nome,
      'email' = $email,
      'estilo' = $estilo,
      'exp' = $experiencia,
      'altura' = $altura,
      'peso' = $peso,
    );

    $updated = $wpdb-insert( $table, $data );

    if ( ! $updated ) {
      $wpdb-print_error();
    }    
}   

//CONECT WITH DATABASE TO DO THE SELECT
include "db.php";

  function BuscaAlgo($conexao){

  // QUERY + INNER JOIN IN DATABASE
 $query = "SELECT  USU.usuario,
                   USU.nome,
                   USU.exp,
                   USU.altura,
                   USU.peso,
                   PRAN.exp_ref,
                   PRAN.altura_ref,
                   PRAN.peso_ref,
                   PRAN.tipo_prancha,
                   PRAN.tamanho_prancha, 
                   PRAN.meio_prancha, 
                   PRAN.litragem_prancha       
                    FROM DADOS_USUARIO AS USU 
                         INNER JOIN PRANCHA AS PRAN
                             on USU.exp = PRAN.exp_ref
                              WHERE USU.altura = PRAN.altura_ref
                                AND USU.peso = PRAN.peso_ref
                                  ORDER BY USU.usuario DESC LIMIT 1";



  $resultado = mysqli_query($conexao,$query);

  $retorno = array();

  while($experiencia = mysqli_fetch_assoc($resultado)){
    $retorno[] = $experiencia;
  }

 return $resultado;
}


//DISPLAYS THE QUERY TO USER      
$resultado = array();
$resultado = BuscaAlgo($conexao);

foreach($resultado as $valor){
    echo $valor["usuario"]; print(".  .  .  ."); 
    echo $valor["nome"]; print(".  .  .  ."); 
    echo $valor["exp"]; print(".  .  .  ."); 
    echo $valor["altura"]; print(".  .  .  ."); 
    echo $valor["peso"]; print(".  .  .  ."); 
    print("///////");
    echo $valor["tipo_prancha"]; print(".  .  .  ."); 
    echo $valor["tamanho_prancha"]; print(".  .  .  ."); 
    echo $valor["meio_prancha"]; print(".  .  .  ."); 
    echo $valor["litragem_prancha"];  
}  


    die(); //END THE EXECUTION
}
//ADD THE AJAX HOOKS IN WORDPRESS
add_action('wp_ajax_prancha', 'prancha');
add_action('wp_ajax_nopriv_prancha', 'prancha');

The code is commenting, basically I did:

AJAX:

  • In the field `URL` call the native Wordpress `admin-ajax.php`.
  • In the field `DATA` call the function that makes the registration, query and displays to the user.
  • In the `SUCCESS` field, prints the value of `data`.

FUNCTIONS: I make the registration code in database, do the query and print with the echo.

The AJAX is returning me the error message. It's the error of AJAX itself. The field error: function(){ alert('ERRO!!!');},

How can I solve this? What am I doing wrong?

Note1: When I insert the code that is in my 'functions, the registration code, the query and theecho' to displays in a direct way, in my footer.php, it works. Therefore, we can understand that the error is not even in the code of insert,query or displays.

NOTE 2: I want to display the return of database within a modal boostrap. At first I'm just displaying on the screen, to check that everything is OK. After that I will research on how to put these data into the modal, although not the main subject of the post, suggestions for how to do this are also welcome.

Topic ajax functions plugin-development database Wordpress

Category Web

1
answered at

I would suggest googling "wordpress ajax tutorials". Here is one that was beneficial to me. https://premium.wpmudev.org/blog/using-ajax-with-wordpress/

The first problem I see is you have not stated what your 'action' variable is. The JavaScript AJAX call specifies what function is targeted in the 'action' attribute. In WP, this is the hook executes your server-side AJAX code. This is how my AJAX calls work for me:

jQuery.post(ajaxurl,
    {"action" : "popover_content",
     "type" : this.data.subtype, 
     "key"  : this.data.key},
      function(content) {
        showPopover(e, content);
  }

I have created my own WP plugin (according to the tutorials) to handle the AJAX request. The code there looks like this:

add_action( 'wp_ajax_popover_content', 'popover_content' );

function popover_content() {
...
}

Note the action in the JS, "popover_content", matches the hook in the add_action hook. In other words, if you have add_action( wp_ajax_my_ajax_action, my_ajax_function), then the action variable in the JS should be my_ajax_action.

Also note that WP defines a global variable ajaxurl so you don't have to specify the path/name of admin-ajax.php.

Personally, I found it easier to have the action hook return a simple message while I worked on the AJAX call in the front end; once that worked, querying the database and returning the content was simple.

P.S. You can see I am placing the returned content into a popover, so placing your content into a modal should be easy.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.