jQuery “Uncaught” on ajax call inside try… catch

1 Views

I have a Advanced Custom Field on WordPress edit post admin page that requires some validation. This validation is done via ajax (I am pretty sure though that acf and WordPress are irrelevant to this question).

Unfortunately I get the following error in the console: Uncaught Not a valid flickr.com url (line 16) for the following code:

Read More
jQuery(document).ready(function($) {
    var initialVal = $('#acf-field_560aabcf8dbef').val();
    $('#acf-field_560aabcf8dbef').on('paste', function(e) {
        var pasteData = e.originalEvent.clipboardData.getData('text');
        if (initialVal !== pasteData) {
            try {
                $.get(ajaxurl, 
                    {
                        'action': 'ai_check_url_id',
                        'idOrUrl': pasteData
                    },
                    function(response) {
                        response = $.parseJSON(response);
                        if (response.error) {
                            throw response.error.msg;
                        }

                        console.log(response);
                    }
                );
            } catch (e) {
                console.error(e);
            }
        };
    });
});

The php function 

<?php
    function ajaxIdOrUrl() 
    {
        try {
            echo $this->idOrUrl($_GET['idOrUrl']);
        } catch (Exception $e) {
            echo json_encode([
                'error' => [
                    'msg' => $e->getMessage(),
                    'code' => $e->getCode(),
                ],
            ]);
        }

        wp_die();
    }

What it does is:

  • the ajaxurl is defined on the page
  • on a paste event check if the value has changed
  • if it has, make a get request and send the changed data along
  • the answer is either an ID or an error array

Can anybody point me in the right direction why this shows up as being uncaught (the code works fine when there is no error)?

Post Views: 1

Related posts

1 comment

  1. Thanks to the input of Matt Gibson and this answer. I have reworked my jQuery to this:

    jQuery(document).ready(function($) {
    var initialVal = $('#acf-field_560aabcf8dbef').val();
    $('#acf-field_560aabcf8dbef').on('paste', function(e) {
        var pasteData = e.originalEvent.clipboardData.getData('text');
        if (initialVal !== pasteData) {
            $.get(
                ajaxurl, 
                {
                    'action': 'ai_check_url_id',
                    'idOrUrl': idOrUrl
                }
            )
            .then(function(response) {
                response = $.parseJSON(response);
                if (response.error) {
                    return $.Deferred().reject(response.error)
                } else {
                    return response;
                }
            })
            .done(function(response) {
                console.log(response);
                // more sucess handling
            })
            .fail(function(err) {
                console.error(err.msg);
                // more error handling
            });
        };
    });
});

Comments are closed.