My current task involves utilizing jQuery to extract all content from a div along with its child elements.
Here is the content within the DIV:
<div class="content">
<h1 style="color:red">Test Title</h1>
<p style="color:blue">Test Description</p>
</div>
To capture the data in a new variable, I am using the following jQuery code:
emailContent = $( ".content" ).html();
Subsequently, I am constructing an AJAX post in this manner:
$.ajax({
type: 'POST',
url: ajax_object.ajaxurl,
data: {
"action": "action1",
"emailContent":emailContent
}
});
The intention is to use the content for sending an email via the wp_mail() function. However, after sending the email, all styling seems to disappear.
The wp_mail function is structured as follows:
$to = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6018182018184e030f0f">[email protected]</a>';
$subject = 'Subject';
$message = $_POST['emailContent'];
$headers = array('Content-Type: text/html; charset=UTF-8');
wp_mail( $to, $subject, $message, $headers );
Upon changing the Content-type to text/plain, the output appears as shown below:
<div class=\"emailContent\"> <h1 style=\"color:red\">Test Title</h1> <p style=\"color:blue\">Test Description</p> </div>
Could the presence of slashes be the reason for the formatting issue when the content type is HTML?
Any suggestions on how to preserve the inline styling when transmitting the data through AJAX post?