CODEWITHSUNDEEP
javascriptperlcgi
Netrunner21
Netrunner21

Reputation: 51

Placing a javascript code into a perl script

I am attempting to place some JavaScript into a Perl script (extension .pl). The JavaScript is for interactive social media buttons, however they don't appear on the page. Here is the code that I placed in the Perl script:

<div class="sb-Container"></div>
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>

<script src="..js/shareButtons.min.js"></script>

<script>
    $(function () {
        $(document).shareButtons({

            // Main Settings
            url: 'URL', // URL to share
            buttonSize: '50px', // Size of the share buttons. Min: 25px
            buttonsAlign: 'horizontal', // Buttons layout: horizontal, vertical
            spaceBetweenButtons: '3px', // Space between the buttons
            radius: '5px', // Buttons corner radius

            // Icons Settings
            iconSize: '20px', // Size of the social networks icons. Min: 15px
            iconColor: '#fff', // Color of the social networks icons
            iconColorOnHover: '#222', // Color of the social networks icons on hover

            // Facebook Button Settings
            showFacebookBtn: 'show',  // Display button: show, hide
            facebookBgr: '#4a6ea9', // Button background color
            facebookBgrOnHover: '#385a97', // Button background color on hover

            // Twitter Button Settings
            showTwitterBtn: 'show', // Display button: show, hide
            tweetMessage: 'Your message goes here', // Default tweet message (URL is added to the message automatically)
            twitterBgr: '#2aaae0', // Button background color
            twitterBgrOnHover: '#197bbd', // Button background color on hover 

            // Pinterest Button Settings
            showPinterestBtn: 'show', // Display button: show, hide
            pinterestBgr: '#e30b2c', // Button background color
            pinterestBgrOnHover: '#d3132a', // Button background color on hover

            // LinkedIn Button Settings
            showLinkedinBtn: 'show', // Display button: show, hide
            linkedinBgr: '#007bb6', // Button background color
            linkedinBgrOnHover: '#0e67b0', // Button background color on hover

            // VKontakte Button Settings
            showVkBtn: 'hide', // Display button: show, hide
            vkBgr: '#5b88bd', // Button background color
            vkBgrOnHover: '#688fb2', // Button background color on hover

            // WhatsApp Button Settings (this button works on mobile devices only)
            showWaBtn: 'show', // Display button: show, hide
            waBgr: '#37d350', // Button background color
            waBgrOnHover: '#25e47a', // Button background color on hover

            // Viber Button Settings (this button works on mobile devices only)
            showViberBtn: 'show', // Display button: show, hide
            viberBgr: '#665eaa', // Button background color
            viberBgrOnHover: '#675fa7', // Button background color on hover

            // Email Button Settings
            showEmailBtn: 'show', // Display button: show, hide
            emailBgr: '#888888', // Button background color
            emailBgrOnHover: '#7a7a7a', // Button background color on hover

            // Print Button Settings
            showPrintBtn: 'show', // Display button: show, hide
            printBgr: '#888888', // Button background color
            printBgrOnHover: '#7a7a7a', // Button background color on hover
        })
    });
</script>

The HTML shows:

1009 1009function () {
1009 1009document).shareButtons({

in place of:

$(function () {
    $(document).shareButtons({

Should I be placing anything within special characters?

Thanks for your help

Upvotes: 1

Views: 517

Answers (1)

Georg Mavridis
Georg Mavridis

Reputation: 2341

Assuming you add your code in some "here-Doc" like

print <<EOT;
<div class="sb-Container"></div>
                            <script
                            src="https://code.jquery.com/jquery-3.3.1.min.js"
                            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                            crossorigin="anonymous"></script>
                        
...
EOT

you have to change the initial <<EOT; to <<'EOT'; indicating that you don't want special Elements (Variables, etc) to be escaped.

Be aware that despite that \\ and \' will be printed as \ and ', so you might have to "fix" that.

Upvotes: 3

Related Questions