0

So I am using jQuery and pHp together to send an email to myself whenever a user clicks on the update button of their Ultimate Member form. However, the email only sends when a user is using Chrome, IE, and Microsoft Edge. When using Safari and Firefox, it doesn't work. I am using a click event listener to send JSON to my pHp file. The JSON was originally an object that was created by a function that checks for the differences between two different objects. These objects were created using DOM traversal. In that pHp file is a mail() function that sends me the aforementioned JSON to my email. I've tried replicating the process on a test site and noticed that when I didnt add the jQuery that comes before my click listener, emails do indeed get sent from Safari and Firefox. However, if I add the jQuery code and THEN remove it and test again it won't send! It's as if my server gets permanently rejected. Here is my JS code: (function($){

$(document).ready(function(){

console.log('mailajax is enqueued, showing on firefox');

var ogArray = new Array(),
    newArray = new Array(),
    dropOgArray = new Array(),
    dropNewArray = new Array(),
    difference,
    username = $('.um-name').find('a').attr('title');


function diffObject(a, b) {
  return Object.keys(a).reduce(function(map, k) {
    if (a[k] !== b[k]) map[k] = b[k];
    return map;
  }, {});
}

$('input.um-form-field').each(function() {

    var $key = $(this).closest('.um-field').find('label').text();
    var $value = $(this).val();

    ogArray[$key] = $value;

});

console.log(ogArray);

setTimeout(function(){

$('span.select2-chosen').each(function() {

    var $key = $(this).closest('.um-field').find('label').text();
    var $value = $(this).text();

    // console.log($value);

    dropOgArray[$key] = $value;

});

console.log(dropOgArray);

},1000);



$('input.um-form-field').on('keyup', function(){
    $('form').find('input.um-form-field').each(function() {

        var $key = $(this).closest('.um-field').find('label').text();
        var $value = $(this).val();

        newArray[$key] = $value;

    });

    console.log(newArray);

    console.log(diffObject(ogArray, newArray));

    difference = diffObject(ogArray, newArray);
});

$('select.um-form-field').on('change', function(){
    setTimeout(function(){
        $('form').find('span.select2-chosen').each(function() {

            var $key = $(this).closest('.um-field').find('label').text();
            var $value = $(this).text();

            dropNewArray[$key] = $value;

        });

        console.log(diffObject(dropOgArray, dropNewArray));

        dropDifference = diffObject(dropOgArray, dropNewArray);
    }, 1000);


});


$('.um-profile-body .um-button').on('click', function(e) {

    $('form').on('submit', function(){

        console.log('form was sent successfully');
        var ajaxurl = 'http://www.reformeducators.org/wp-content/themes/NATE/admin-ajax.php';
            stringDifference = JSON.stringify(difference);
            stringDropDifference = JSON.stringify(dropDifference);
            stringUsername = String(username);


        $.post(ajaxurl, {'Name': stringUsername, 'Changes Made': stringDifference, 'Drop Down Menu Changes': stringDropDifference});


    });


});


});

})(jQuery);

And here is my pHp code:

<?php

$message = "User Information has been changed\r\n";
$message .= print_r($_POST, true);


$to = "testing@domain.com";
$subject = "User information has been changed!";
$headers = "From: ";

mail($to, $subject, $message, $headers); 




?>

I think this might be a server issue, but if anyone has any experience doing something like this, I would really appreciate some feedback or help.

  • Bro it's just "php", but +1 for effort – TheDeadMedic May 13 '16 at 15:58
  • Thats exactly the type of help I was looking for thanks -____- – H.Kim May 13 '16 at 16:13
  • Sorry couldn't resist. Do you know how to use the browser console? We need to know what kind of error you're getting. – TheDeadMedic May 13 '16 at 16:18
  • I would also add that since this only works with some browsers, it must be a client-side issue. – TheDeadMedic May 13 '16 at 16:19
  • Nothing on Firefox's and Safari's console, besides the console.logs thats in my code. :/ @TheDeadMedic – H.Kim May 13 '16 at 16:38
0

So turns out that on Safari and Firefox, the page would refresh before the email got sent out. As a workaround I just created another button that the user has to click on before clicking on the actual button that updates their profile information. The click event handler on that first button is being used to send out the information to the php file now. It solved the problem and now I'm getting emails no matter what browser the user is updating their profile from!

Heres's the javascript:

(function($){

$(document).ready(function(){

// console.log('mailajax is enqueued, showing on firefox');

setTimeout(function(){

if($('html').hasClass('user-section')){
    // console.log('this is a user page');
    $('input.um-button').hide();
    $('.um-profile .um-col-alt .um-left.um-half').prepend('<a id="custom-update-btn">Approve Changes</a>');
}


var ogArray = new Array(),
    newArray = new Array(),
    dropOgArray = new Array(),
    dropNewArray = new Array(),
    difference,
    username = String($('.um-name').find('a').attr('title'));

function diffObject(a, b) {
  return Object.keys(a).reduce(function(map, k) {
    if (a[k] !== b[k]) map[k] = b[k];
    return map;
  }, {});
}

$('input.um-form-field').each(function() {

    var $key = $(this).closest('.um-field').find('label').text(),
        $value = $(this).val();

    ogArray[$key] = $value;

});

$('span.select2-chosen').each(function() {

    var $key = $(this).closest('.um-field').find('label').text(),
        $value = $(this).text();


    dropOgArray[$key] = $value;

});



$('input.um-form-field').on('keyup', function(){
    $('form').find('input.um-form-field').each(function() {

        var $key = $(this).closest('.um-field').find('label').text(),
            $value = $(this).val();

        newArray[$key] = $value;

    });

});

$('select.um-form-field').on('change', function(){
    setTimeout(function(){
        $('form').find('span.select2-chosen').each(function() {

            var $key = $(this).closest('.um-field').find('label').text(),
                $value = $(this).text();

            dropNewArray[$key] = $value;

        });

        // console.log(diffObject(dropOgArray, dropNewArray));


    }, 1000);


});



$('a#custom-update-btn').on('click', function(e){
    // console.log('update btn has been clicked on');

    var ajaxurl = 'http://www.reformeducators.org/wp-content/themes/NATE/admin-ajax.php',
                  stringDifference = JSON.stringify(diffObject(ogArray, newArray)),
                stringDropDifference = JSON.stringify(diffObject(dropOgArray, dropNewArray));       
    $.post(ajaxurl, { 'Name': username, 'Changes Made': stringDifference, 'Drop Menu Changes': stringDropDifference});

    $('a#custom-update-btn').hide();
    $('.um-profile-body .um-button').show();
});

}, 1000);







});

})(jQuery);
  • Don't forget you can 'accept' this answer by clicking the check mark on the left of it. That way, it won't come up in our 'unanswered questions' list anymore :) Good on you for solving it! – Tim Malone Jul 7 '16 at 2:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.