CODEWITHSUNDEEP
javascriptjquerywordpress
outmane
outmane

Reputation: 9

Wordpress can't handle jQuery code

I have requested an API from a website to check availability of an email, and I got a jQuery code to integrate the API to my website.

I use WordPress, and I tried to add the code, but it doesn't work and I don't know why. I suspected it was a jQuery library problem, so I loaded it in the "function" file, and in the script from google API, but nothing.

Thanks for your help, and here is the code (by the way I also tried changing with 'jQuery.')

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">   
    <head>
        <meta charset="utf-8" />
        <title>emailverifyapi.com : License Key Sample.</title>
        <style type="text/css">
            .statusUnknown {
                color: #c1c72c;
            }
            .statusOk {
                color: #009933;
            }
            .statusBad, .errorMsg {
                color: #ff0000;
            }
            input[type='text'] {
                width: 300px;
            }
            p label {
                display: inline-block;
                width: 60px;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>    
    <body>
         <h1>emailverifyapi.com : email verification demo using simple key authentication with jQuery.</h1>

         <h2>About</h2>

        <p>This example shows how to perform email verification using just client side scripting and invoking a simple key based RESTful endpoint at <a href="https://api.emailverifyapi.com" target="_blank">api.emailverifyapi.com</a>.</p>
         <h2>How to run this sample</h2>

        <p>This page can be hosted anywhere (i.e. any web host or platform). The only thing needed is a valid license key.</p>
         <h2>Key features</h2>

        <ul>
            <li>Compatible with all modern browsers</li>
            <li>Uses jQuery 1.11.1</li>
            <li>No server side scripting required</li>
        </ul>
        <hr />
         <h2>Try it</h2>

        <p>
            <label for="key">Key:</label>
            <input type="text" id="key" name="key" tabindex="1" maxlength="20" />
        </p>
        <p>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" tabindex="2" />
            <input type="button" name="submit" id="submit" tabindex="3" value="verify" />
        </p>
        <div id="validationResult"></div>
        <!--Result output here-->
        <script>
            /*nest key logic inside document.ready to ensure functionality only available once document has fully loaded in browser.*/
            $(function() {
                console.log("ready!");

                $('#submit').click(function() {
                    var emailText = $('#email').val(); // get key from text box entry
                    var keyText = $('#key').val(); // get email address to be checked from text box

                    if (keyText.length == 0) {
                        $('#validationResult').html("<span class='errorMsg'>Please enter key.</span>");
                        return;
                    }

                    if (emailText.length == 0) {
                        $('#validationResult').html("<span class='errorMsg'>Please enter something for email.</span>");
                        return;
                    }

                    $('#validationResult').html("verifying...");

                    var emailVerifyApi = '//api.emailverifyapi.com/api/a/v1?email=' + encodeURIComponent(emailText) + '&key=' + keyText;

                    /*execute remote request to perform email verification. Any errors will appear in the developer console (e.g. viewable using Chrome developer tools)*/
                    $.getJSON(emailVerifyApi, {})
                        .done(function(data) {
                        reportResult(data);
                    })
                        .fail(function(jqxhr, textStatus, error) {
                        var err = textStatus + ", " + error;
                        console.log("Request failed: " + err);
                    });;
                });
            });

            /*Output result to the 'validationResult' div element*/
            function reportResult(data) {
                var status = data['status'].toLowerCase(); // get 'status' from REST response
                var additionalStatus = data['additionalStatus']; // get 'additionalStatus' from REST response
                var message = data['Message']; // if there is an error (e.g. license issues), a notification will appear in the 'Message" from REST response.

                console.log(status);
                console.log(additionalStatus);
                console.log(message);

                var statusHtml;

                // if there is an error message, show here
                if (message != null && message != '') {
                    statusHtml = "<span class='errorMsg'>Error. Message='" + message + "' .</span>";
                } else {
                    // map REST response data to presentation messages.
                    switch (status) {
                        case 'ok':
                            statusHtml = "<span class='statusOk'>Email address is ok.</span>";
                            break;
                        case 'bad':
                            statusHtml = "<span class='statusBad'>Email address is not valid.</span>";
                            break;
                        default:
                            statusHtml = "<span class='statusUnknown'>Unable to validate email. Reason=" + additionalStatus + "</span>";
                            break;
                    }
                }

                console.log(statusHtml);

                // present the result on screen
                $('#validationResult').html(statusHtml);
            }
        </script>
    </body>
</html>

Upvotes: 0

Views: 60

Answers (1)

Cedon
Cedon

Reputation: 627

Is that the output of your page as HTML or is that the code of the page itself?

All scripts should be loaded using the wp_enqueue_scripts() function which you use in your functions.php file.

You could use the following code:

function myScriptFunction() {
  wp_enqueue_script(
     'custom-script',
     get_stylesheet_directory_uri() . '/js/script.js',
     array( 'jquery', true )
  );
}

add_action( 'wp_enqueue_scripts', 'myScriptFunction' );

This tells WordPress to load your custom script, where it is located, that it depends on jQuery, and that it should be loaded in the footer.

WordPress loads jQuery in noconflict mode so it will not recognize "$" so instead use jQuery.

Upvotes: 1

Related Questions