WordPress: Ajax not working to insert, query and result data

3 comments

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' 
   } 
   

   Log in to Reply

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

   Log in to Reply

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.

   Log in to Reply