Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

Using script code in Custom Pages?

I am having trouble embedding <script> codes in Custom Pages. Can you not embed <script> in Custom Pages in Fusion? The code I'm trying to embed is
CodeDownload  
<iframe id="JotFormIFrame-80704605582153" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" src="https://form.jotform.com/80704605582153" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-80704605582153"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

Use one of 2 methods. When you do your echo script use single quotes:
echo 'script code'; OR better yet:
Change all the double quotes in the statement to single quotes.

Quote

Use one of 2 methods. When you do your echo script use single quotes:
echo 'script code'; OR better yet:
Change all the double quotes in the statement to single quotes.
- by Grimloch

Thanks very much for the info. I just created a new PHP page and put the code in it but I will remember this for future reference. Also, when using TinyMCE on the Custom Pages, do you put this in HTML or just paste it in the page?

Quote

Thanks very much for the info. I just created a new PHP page and put the code in it but I will remember this for future reference. Also, when using TinyMCE on the Custom Pages, do you put this in HTML or just paste it in the page?
- by FreedomIOPList

Depends: Personally I almost always use html/tables depending on how much control over format I want in the output. And because I like controlling the output I NEVER NEVER EVER use TinyMCE on any of my websites. In my opinion it's a piece of crap cause it changes your code when you save it!
Once again., having an issue posting a <script> code for PayPal Products in a Custom Page on PHP-Fusion 9.03. Where do I place the <echo> code in this one and do ALL the " need changed to ' too?


Here's my code:

CodeDownload  
<div id="smart-button-container">
 <div style="text-align: center;">
 <div style="margin-bottom: 1.25rem;">
 <p>Independence University School Required Products Funding.</p>
 <select id="item-options"><option value="Covers Software, Security Suite & LED Draw Tablet" price="200.00">Covers Software, Security Suite & LED Draw Tablet - 200.00 USD</option><option value="Covers Software, Security Suite, LED Draw Tablet & Some Required Accounts" price="225.00">Covers Software, Security Suite, LED Draw Tablet & Some Required Accounts - 225.00 USD</option><option value="Covers Software, Security Suite, LED Draw Tablet & All Required Accounts" price="275.00">Covers Software, Security Suite, LED Draw Tablet & All Required Accounts - 275.00 USD</option></select>
 <select style="visibility: hidden" id="quantitySelect"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>
 </div>
 <div id="paypal-button-container"></div>
 </div>
 </div>
 <script src="https://www.paypal.com/sdk/js?client-id=AXsK2xq_dRiCJWg-0mYViMbXL0AeB0fS4FMn83ajKDLftLkd3ck2LHSeVQ-s4B6XPxaY9rumR6YCD4DJ¤cy=USD" data-sdk-integration-source="button-factory"></script>
 <script>
 function initPayPalButton() {
 var shipping = 0;
 var itemOptions = document.querySelector("#smart-button-container #item-options");
 var quantity = parseInt(5);
 var quantitySelect = document.querySelector("#smart-button-container #quantitySelect");
 if (!isNaN(quantity)) {
 quantitySelect.style.visibility = "visible";
 }
 var orderDescription = 'Independence University School Required Products Funding.';
 if(orderDescription === '') {
 orderDescription = 'Item';
 }
 paypal.Buttons({
 style: {
 shape: 'pill',
 color: 'blue',
 layout: 'vertical',
 label: 'pay',
 
 },
 createOrder: function(data, actions) {
 var selectedItemDescription = itemOptions.options[itemOptions.selectedIndex].value;
 var selectedItemPrice = parseFloat(itemOptions.options[itemOptions.selectedIndex].getAttribute("price"));
 var tax = (0 === 0) ? 0 : (selectedItemPrice * (parseFloat(0)/100));
 if(quantitySelect.options.length > 0) {
 quantity = parseInt(quantitySelect.options[quantitySelect.selectedIndex].value);
 } else {
 quantity = 1;
 }

 tax *= quantity;
 tax = Math.round(tax * 100) / 100;
 var priceTotal = quantity * selectedItemPrice + parseFloat(shipping) + tax;
 priceTotal = Math.round(priceTotal * 100) / 100;
 var itemTotalValue = Math.round((selectedItemPrice * quantity) * 100) / 100;

 return actions.order.create({
 purchase_units: [{
 description: orderDescription,
 amount: {
 currency_code: 'USD',
 value: priceTotal,
 breakdown: {
 item_total: {
 currency_code: 'USD',
 value: itemTotalValue,
 },
 shipping: {
 currency_code: 'USD',
 value: shipping,
 },
 tax_total: {
 currency_code: 'USD',
 value: tax,
 }
 }
 },
 items: [{
 name: selectedItemDescription,
 unit_amount: {
 currency_code: 'USD',
 value: selectedItemPrice,
 },
 quantity: quantity
 }]
 }]
 });
 },
 onApprove: function(data, actions) {
 return actions.order.capture().then(function(details) {
 alert('Transaction completed by ' + details.payer.name.given_name + '!');
 });
 },
 onError: function(err) {
 console.log(err);
 },
 }).render('#paypal-button-container');
 }
 initPayPalButton();
 </script>



Please let me know how this one should be done.
I am not sure, but it seems you are using single and double quotes. Javascript is very critical about quotes, so maybe only use single.

And as tip: try to run the code on simple html page first to test.
Try this,

CodeDownload  
echo "<div id='smart-button-container'>
    <div style='text-align: center;'>
    <div style='margin-bottom: 1.25rem;'>
    <p>Independence University School Required Products Funding.</p>
    <select id='item-options'><option value='Covers Software, Security Suite & LED Draw Tablet' price='200.00'>Covers Software, Security Suite & LED Draw Tablet - 200.00 USD</option><option value='Covers Software, Security Suite, LED Draw Tablet & Some Required Accounts' price='225.00'>Covers Software, Security Suite, LED Draw Tablet & Some Required Accounts - 225.00 USD</option><option value='Covers Software, Security Suite, LED Draw Tablet & All Required Accounts' price='275.00'>Covers Software, Security Suite, LED Draw Tablet & All Required Accounts - 275.00 USD</option></select>
    <select style='visibility: hidden' id='quantitySelect'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>
    </div>
    <div id='paypal-button-container'></div>
    </div>
    </div>
    <script src='https://www.paypal.com/sdk/js?client-id=AXsK2xq_dRiCJWg-0mYViMbXL0AeB0fS4FMn83ajKDLftLkd3ck2LHSeVQ-s4B6XPxaY9rumR6YCD4DJ¤cy=USD' data-sdk-integration-source='button-factory'></script>
    <script>
    function initPayPalButton() {
    var shipping = 0;
    var itemOptions = document.querySelector('#smart-button-container #item-options');
    var quantity = parseInt(5);
    var quantitySelect = document.querySelector('#smart-button-container #quantitySelect');
    if (!isNaN(quantity)) {
    quantitySelect.style.visibility = 'visible';
    }
    var orderDescription = 'Independence University School Required Products Funding.';
    if(orderDescription === '') {
    orderDescription = 'Item';
    }
    paypal.Buttons({
    style: {
    shape: 'pill',
    color: 'blue',
    layout: 'vertical',
    label: 'pay',
   
    },
    createOrder: function(data, actions) {
    var selectedItemDescription = itemOptions.options[itemOptions.selectedIndex].value;
    var selectedItemPrice = parseFloat(itemOptions.options[itemOptions.selectedIndex].getAttribute('price'));
    var tax = (0 === 0) ? 0 : (selectedItemPrice * (parseFloat(0)/100));
    if(quantitySelect.options.length > 0) {
    quantity = parseInt(quantitySelect.options[quantitySelect.selectedIndex].value);
    } else {
    quantity = 1;
    }

    tax *= quantity;
    tax = Math.round(tax * 100) / 100;
    var priceTotal = quantity * selectedItemPrice + parseFloat(shipping) + tax;
    priceTotal = Math.round(priceTotal * 100) / 100;
    var itemTotalValue = Math.round((selectedItemPrice * quantity) * 100) / 100;

    return actions.order.create({
    purchase_units: [{
    description: orderDescription,
    amount: {
    currency_code: 'USD',
    value: priceTotal,
    breakdown: {
    item_total: {
    currency_code: 'USD',
    value: itemTotalValue,
    },
    shipping: {
    currency_code: 'USD',
    value: shipping,
    },
    tax_total: {
    currency_code: 'USD',
    value: tax,
    }
    }
    },
    items: [{
    name: selectedItemDescription,
    unit_amount: {
    currency_code: 'USD',
    value: selectedItemPrice,
    },
    quantity: quantity
    }]
    }]
    });
    },
    onApprove: function(data, actions) {
    return actions.order.capture().then(function(details) {
    alert('Transaction completed by ' + details.payer.name.given_name + '!');
    });
    },
    onError: function(err) {
    console.log(err);
    },
    }).render('#paypal-button-container');
    }
    initPayPalButton();
    </script>";

Create .php page

page_name.php
CodeDownload  
<?php
require_once __DIR__.'/maincore.php';
require_once THEMES.'templates/header.php';
?>
HTML CODE
<?php
require_once THEMES.'templates/footer.php';

But the question was to put it in a custom page, so both answers do not apply i.m.o.
The best way is create .php page. Javascript is automatically removed since 9.03.60 due to XSS or some parts of code may be removed. Only in panels you can put javascript and php (PHP exe must be enabled) but this is bad idea, always create file instead.

Quote

But the question was to put it in a custom page, so both answers do not apply i.m.o.

I dont know what you base that input on.

My answer consisted of replacing all " to single ' , while it echoes with ". While in some JS it maybe require to quote in \" but that is another story. The reply is 100% correct.

Robs answer is even better since due to security features some custom pages have things removed so the sql can not be compromised.

It is far better to do a dedicated .php page for such things and should be voted up.
Thread Information
Replies
11 posts
Views
1,742 times
Last Post
Last updated on 1 month ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: Falk, Grimloch, douwe_yntema, RobiNN, SkeeredOfMyMind, FreedomIOPList