Wordpress: Ajax not working to insert, query and r

Question

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({
            //CALL 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);
            }               
        });
    });
});

In my functions.php file:

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.

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.

Answer 1

First of all, you should use $wpdb object to access the database in Wordpress, including the select. Check the documentation https://codex.wordpress.org/Class_Reference/wpdb

You didn't specify what kind of error you get, but I think your ajax call definition is wrong, it should be:

data: {
  action : 'prancha' 
} 

Answer 2

There is some mistakes in your code, but you have just missed a very important part of code,
to make it work, the wp_localize_script() function:

add_action('wp_enqueue_scripts', 'meu_ajax_scripts'); 
meu_ajax_scripts(){
    // Register your script (located in a subfolder `js` of your active theme, for example here)
    wp_enqueue_script( 'meuscript', get_template_directory_uri().'/js/ajax_script.js', array('jquery'), '1.0', true );
    // Making the bridge between php and javascript:
    wp_localize_script( 'meuscript', 'meuajax', array( 'ajaxurl' =>   admin_url( 'admin-ajax.php' ) ) );
}

This code goes in the function.php file of your active theme (or child theme) folder… If it is a child theme you have to replace get_template_directory_uri() by get_stylesheet_directory_uri().

As you can see 'meuscript' is in both functions wp_enqueue_script() and wp_localize_script().

Then you will retrieve 'meuajax' and 'ajaxurl' in your jQuery script.

They are combined this way:
url: meuajax.ajaxurl, instead of url: 'wp-admin/admin-ajax.php',.
The wp_localize_script() function will make the bridge through admin_url( 'admin-ajax.php' ) function from your jQuery script to your php function…

---

(NEW UPDATE - NOVA ATUALIZAÇÃO)
regarding your comments, your answer/question update, and this thread too…

---

So here is your newly updated jQuery code (with a different approach related to form data). All the form data is serialized before being sent to your prancha() php function through ajax:

// We use jQuery instead of $. Thanks to Phill Healey (see comments).
// Then we put back the $ shorthand in the function… 
jQuery(document).ready(function($){ 

    // Now we can use $ shorthand, avoiding javascript errors (with wordpress). 
    $('#enviar').submit(function(e){ // Updated            

        var minhaprancha = $(this).serialize(); // serializing the form data

        e.preventDefault(); // preventing form submit normal behavior

        //ajax call
        $.ajax({
            type:   'POST', 
            action: 'prancha', 
            url:    meuscript.ajaxurl, // the functional url     
            data:   meuscript.minhaprancha, // all the data of the form (serialized)

            // Displaying succes message
            success: function( data ){
                $('#result').html( 'Sucesso : '.data );
                // for debugging purpose in browser js console
                console.log(data);
            },

            // Displaying error message     
            error: function( error ){
                $('#result').html( 'Erro! : '. error );
                // for debugging purpose in browser js console
                console.log(error);
            }               
        });
    });
});

Put this code in a js file ajax_script.js inside a js subfolder of your active theme (or child theme).

---

Your html form (an example like), has to be some kind of similar as this one:

<form method="post" id="minhaprancha"> // this id is important too (no "action" needed)

    <label for="Seu nome">From *</label>
    <input name="nome" id="nome" type="text" class="form-control" placeholder="Seu nome" required>
    <br />

    <label for="Seu email">From *</label>
    <input name="email" id="email" type="email" class="form-control" placeholder="Seu email" required>
    <br />

    <label for="Seu estilo">From *</label>
    <input name="estilo" id="estilo" type="text" class="form-control" placeholder="Seu estilo" required>
    <br />

    <label for="Seu experiencia">From *</label>
    <input name="experiencia" id="experiencia" type="text" class="form-control" placeholder="Seu experiencia" required>
    <br />

    <label for="Seu altura">From *</label>
    <input name="altura" id="altura" type="text" class="form-control" placeholder="Seu altura" required>
    <br />

    <label for="Seu peso">From *</label>
    <input name="peso" id="peso" type="text" class="form-control" placeholder="Seu peso" required>
    <br />

    <?php 
    // This imput hidden element has the name value of the php function ?>
    <input type="hidden" name="action" value="prancha"/>
    <input type="submit" id="enviar" name="enviar" value="Enviar">
</form>
<div id="result" class="result"></div>

---

Then you will retrieve (as you already know) the data values in your php with:

 $nome = $_POST['nome'];
 $email = $_POST['email'];
 $estilo = $_POST['estilo'];
 $experiencia = $_POST['experiencia'];
 $altura = $_POST['altura'];
 $peso = $_POST['peso'];

This time this is a turnkey solution, and it will work, once you have adapted your form to it.

References:

• Wordpress passing ajax value to a specific page using Wordpress

• Using AJAX With PHP on Your WordPress Site Without a Plugin

• How to use Ajax with your WordPress Plugin or Theme?

• How can I get form data with JavaScript/jQuery?

• WPSE - Custom Form with Ajax

Answer 3

First, I am grateful for their willingness to help.
Second, I prefer search more about how to solve my issue before coming here with feedback.

The code you sent me, still not working. I made some changes and it worked in parts.

• I replaced the submit for click in my jQuery and I also replaced the type of my button for text.

• I replaced the this of serialize() for id of my form.

  jQuery(document).ready(function($){ $('#enviar').click(function(e){ //I replaced the SUBMIT for CLICK var minhaprancha = $('#minhaprancha').serialize(); // I replaced the THIS for id of my form

          e.preventDefault(); // preventing form submit normal behavior
  
          $.ajax({
              type:   'POST',              
              url:   meuajax.ajaxurl,
              data:  meuajax.minhaprancha,
              success: function( data ){
                  $('#resultado').html( 'Sucesso : ' + data );
                  console.log(data);
              },  
              error: function( error ){
                  $('#resultado').html( 'Erro! : ' + error );
                  console.log(error);
              }               
      });
  });
  

  });

With these modifications, the code worked, but not perfectly. I put a alertto check if the serialize() was working and it is!. But, in the end of script, the browser console returns me status success, value zero and isn't being made the operation of the function prancha(). The data is not registered in the database.

I looked for other ways to try to make the work code:

Getting the values of the fields, keeping a variable and calling it in ajax. Both saving the fields of the form as a variable declared in direct data field and is displayed the Internal Error 500

jQuery(document).ready(function($){ 
    $('#enviar').click(function(e){ 
        var minhaprancha = '$nome='+$("#nome").val()+
                           '&email='+$("#email").val()+
                           '&estilo='+$("#estilo").val()+
                           '&experiencia='+$("#experiencia").val()+
                           '&altura='+$("#altura").val()+
                           '&peso='+$("#peso").val();  //GETTING THE VALUES OF FIELDS

        e.preventDefault(); // preventing form submit normal behavior

        $.ajax({
            type:   'POST',              
            url:   meuajax.ajaxurl,              
            data: { action: 'prancha', minhaprancha },
            success: function( data ){
                $('#resultado').html( 'Sucesso : ' + data );
                console.log(data);
            },

            error: function( error ){
                $('#resultado').html( 'Erro! : ' + error );
                console.log(error);
            }               
        });
    });
  });

I also tried to call the values of the form fields in data : {} matrix and is displayed the error Maximum call stack size exceeded.

jQuery(document).ready(function($){ 
        $('#enviar').click(function(e){         
        e.preventDefault(); // preventing form submit normal behavior

            $.ajax({
                type:   'POST',              
                url:   meuajax.ajaxurl,  
                action: 'prancha',
                data: {  'nome':nome, 'email':email, 'estilo':estilo, 'experiencia':experiencia, 'altura':altura, 'peso':peso },
                success: function( data ){
                    $('#resultado').html( 'Sucesso : ' + data );
                    console.log(data);
                },
                error: function( error ){
                    $('#resultado').html( 'Erro! : ' + error );
                    console.log(error);
                }               
        });
    });
});

In my functions.php, I left only the part that insert the data in the database. To see the operation in parts. And remember that, when I put this code directly into my footer.php it works perfectly:

function meu_ajax_scripts(){    
    wp_enqueue_script( 'meuajax', get_template_directory_uri().'/consulta.js', array('jquery'), '1.0', true );
    wp_localize_script( 'meuajax', 'meuajax', array( 'ajaxurl' =>   admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', 'meu_ajax_scripts');

function prancha(){ 

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

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

    function cadastra_usuario($nome, $email, $estilo, $experiencia, $altura, $peso){          

         global $wpdb;

        $table = 'dados_usuario';

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

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

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

    }
    die(); 
  }

  add_action('wp_ajax_prancha', 'prancha');
  add_action('wp_ajax_nopriv_prancha', 'prancha');

I'm still researching on various blogs, websites and forums trying to work it.