在我的脚本中需要帮助

Question

I have a lot of problems with my script. I'm using the outlook API, I'm having trouble but everything works. I'm trying to retrieve the mail and store it in a database. When I post a single mail no problem, but when I post several messages nothing goes wrong. I'll explain: my PHP file that displays my view

{{#each messages}}
         
        <h3 id="msg-from" class="list-group-item-heading from_1">{{this.from.emailAddress.name}}</h3><button type="submit"  class="btn btn-primary col-2" onclick="btn_urgent()" >urgent</button>
        <h4 id="msg-subject" class="test list-group-item-heading subject_1">{{this.subject}}</h4>
            
        <p id="msg-received" class="list-group-item-heading text-muted received_1"><em>Received: {{formatDate this.receivedDateTime}}</em></p>

        <div id="post1" class="azerty">
            <p id="msg-bodyPreview" class="list-group-item-text text-muted azerty bodypreview_1"><em>{{this.bodyPreview}}</em></p>
            <div class="demasquer">
                    <p id="msg-uniqueBody" class="body_1"><em>{{{this.uniqueBody.content}}}</em></p>;
            </div>
        </div> 
 
          }
  }  
        
    {{/each}}

I use Handlebars.

I manage to get the value of each field, for each mail in this way:

 window.onload = function(){
      
      console.log("********************TEST_INSERT*********************");
   
   
      for($i = 0; $i <= 1; $i++){
          console.log("after for");
          console.log($i);
   $input = document.getElementsByClassName('from_1')[$i].textContent;
   $sub = document.getElementsByClassName('subject_1')[$i].textContent;
   $recei = document.getElementsByClassName('received_1')[$i].textContent;
   $preview = document.getElementsByClassName('bodypreview_1')[$i].textContent;
   $body_1 = document.getElementsByClassName('body_1')[$i].textContent;
    console.log("*********************");
    console.log($input);
    console.log($sub);
    console.log($recei);
    console.log($preview);
    console.log($body_1);
    console.log("*********************");
    
    
}};                   

I then go through an Ajax that is called by my onclick (in my view).

function btn_urgent(){
    console.log("*************************");
    console.log("btn_urgent");
    console.log($input);
    console.log("*************************");
    $.ajax({url: '../../wp-content/plugins/game_plugin/process_general.php',
        
    type: 'POST',
    
    data: {info: 'insert_to_db', input: $input, sub: $sub, recei: $recei, preview: $preview},
    
    success: function() {
        console.log("*************************");
            console.log("ssrtsgsgsg");
            
             
             
            console.log("*************************");
            
            
             
        }

My AJAX request calls a function in another php file (process related)

$info = $_POST['info'];
$input= $_POST['input'];
$recei= $_POST['recei'];
$sub= $_POST['sub'][$i];
$preview= $_POST['preview'];

// Then call the function
insert_to_db($input, $sub, $recei, $preview);

 function insert_to_db($input, $sub, $recei, $preview){
     
global $wpdb;

         $wpdb->insert(
                    'test_insert', //table name
                    array(
                'id' => '',
                'from_mail' => $input,
                'subject'  =>$sub,
                'recei' => $recei,
                'preview' =>$preview,
                
                    ), //columns
                    array(
                '%d',
                '%s',
                '%s',
                '%s',
                '%s',
                    )
            );

     
  }

This is how my script works. the trick is that I can't find a solution to insert several emails in my database. My button doesn't know what mail it's attached to. I'm going around in circles I tried to create a loop that gets bigger but I don't know what to add... If someone has a solution/advice, I will take the following steps Thanks to all of you...

</div>

Answer 1

First you may modify the ID of the div-s to unique, because the HTML dont like the ID duplications. Forgot the id variable. Put a div tag into the PHP each loop like this:

{{#each messages}}
<div class="emailBody">
    <h3 id="msg-from" class="list-group-item-heading from_1">{{this.from.emailAddress.name}}</h3>
<button type="submit"  class="btn btn-primary col-2" onclick="btn_urgent(this)" >urgent</button>
    <h4 id="msg-subject" class="test list-group-item-heading subject_1">{{this.subject}}</h4>

    <p id="msg-received" class="list-group-item-heading text-muted received_1"><em>Received: {{formatDate this.receivedDateTime}}</em></p>

    <div id="post1" class="azerty">
        <p id="msg-bodyPreview" class="list-group-item-text text-muted azerty bodypreview_1"><em>{{this.bodyPreview}}</em></p>
        <div class="demasquer">
                <p id="msg-uniqueBody" class="body_1"><em>{{{this.uniqueBody.content}}}</em></p>;
        </div>
    </div> 
</div> 

      }}  
{{/each}}

Div tag on the begin and end of the loop, and add "this" to the button onclick event.Then you change the function btn_urgent() like this:

function btn_urgent(item){
var $thisInput = $(item).closest(".emailBody").find(".from_1")[0].innerHTML;
var $thisSub = $(item).closest(".emailBody").find(".subject_1")[0].innerHTML;
var $thisRecei = $(item).closest(".emailBody").find(".received_1 em")[0].innerHTML;
var $thisPreview = $(item).closest(".emailBody").find(".bodypreview_1 em")[0].innerHTML;
var $body_1 = $(item).closest(".emailBody").find(".body_1 em")[0].innerHTML;
$.ajax({url: '../../wp-content/plugins/game_plugin/process_general.php',
    type: 'POST',
    data: {info: 'insert_to_db', input: $thisInput, sub: $thisSub, recei: $thisRecei, preview: $thisPreview},
    success: function() {
        console.log("OK");
    }
});

}

Like this the button get himself, move up the the emailBody div tag and search for the needed element as ".from_1" or ".body_1 em". You need to add it in the correct way, of the "[0]" part will fail. You may add the select in a different value and if the length of that object is more than 0, than use "var ...[0].innerHTML".

If you need multiply sending, create a global button, create a function which select the ".emailBody" within an array, go through on this array with an each loop and add the properties to values as you see it below "function btn_urgent(item)".