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>
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)".