Java script not appearing

SOLVE
New Contributor

I have some java script that embeds a web service application.  The application shows up fine in WordPress but does not show up on HubSpot pages.  

 

In fact, when I save changes and update the page, the code is not there at all when I inspect the page.  I also tried to add/save a HTML footer with the code, but the same thing happens - the code is not there after I save my changes and return to the advanced settings.

 

Does HubSpot need something added/modified in the code to display java script?  

 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Community Manager
Community Manager

Hi @Yukon,

 

You're getting quite a few errors relating to insecure connections. Is that the exact code from the Wordpress site as well? I tried to both clone your page as well as run the code in a codepen and I get the same errors.

 

I took a look at the files you're linking to and I believe you are just experiencing a problem with Same-Origin policy. Whenever you try to pull 'http' files onto an 'https' site, the browser will block the request as it's a security issue. 

 

Some things you can try to fix this:

1. Store all the files and urls on an 'https' site

2. Hardcode this in as a custom module

3. Try to iframe in that page as an alternative

 

Same-origin is nice as it prevents scripting attacks and such, but it's such a buzz kill when trying to get things to work. If none of those above work, if you want to pull http files onto an https site, you will need to do so using AJAX requests.You can read more about Same-Origin here.

 

Hope this helps!

-- Ty

4 Replies 4
Community Manager
Community Manager

Hi @Yukon,

 

I have a couple small questions, then hopefully we can figure this out Smiley Happy

 

1. Do you have a link to the page we can see?

2. What are you trying to embed?

3. Are you receiving any console errors? (Go to the website page, right click "inspect element" or "inspect" then check the 'console' tab in the dev tools)

 

-- Ty

Reply
0 Upvotes
New Contributor

Hi there, @Ty,

 

Thank you for taking a look.

 

I want to embed the code at the end of this page: https://www.care-net.org/find-a-pregnancy-center

 

This is what it looks like on a WordPress site: http://pregnancydecisionline.org/find-a-pregnancy-center

 

Here is the code: 

 

 

   <script type="text/javascript">
        //<![CDATA[
        var cnpco_clientid = '7961897b-815b-4161-b0c6-c9350dfde095';
        var cnpco_style = 'style1';
        //]]>
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
    <script src="http://locator.pregnancydecisionline.org/PregnancyCenters/external/scripts/pregnancycenter-config.js" type="text/javascript"></script>
    <table>
        <tr>
            <td style="width: 67%; vertical-align: top;">
                <div id="cn-pco-results"></div>
            </td>
            <td style="vertical-align: top;">
                <div id="cn-pco-search"></div>
            </td>
        </tr>
    </table>

Here are the errors:

 

pregnancycenter-config.js Failed to load resource: net::ERR_INSECURE_RESPONSE
js:96 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
$g @ js:96
find-a-pregnancy-center:651 Uncaught SyntaxError: Unexpected token <
find-a-pregnancy-center:695 Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.
util.js:215 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
uB.j @ util.js:215
util.js:215 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

 

Reply
0 Upvotes
Highlighted
Community Manager
Community Manager

Hi @Yukon,

 

You're getting quite a few errors relating to insecure connections. Is that the exact code from the Wordpress site as well? I tried to both clone your page as well as run the code in a codepen and I get the same errors.

 

I took a look at the files you're linking to and I believe you are just experiencing a problem with Same-Origin policy. Whenever you try to pull 'http' files onto an 'https' site, the browser will block the request as it's a security issue. 

 

Some things you can try to fix this:

1. Store all the files and urls on an 'https' site

2. Hardcode this in as a custom module

3. Try to iframe in that page as an alternative

 

Same-origin is nice as it prevents scripting attacks and such, but it's such a buzz kill when trying to get things to work. If none of those above work, if you want to pull http files onto an https site, you will need to do so using AJAX requests.You can read more about Same-Origin here.

 

Hope this helps!

-- Ty

New Member

I'm having the same issue here. The map appears just fine in the editing mode in HubSpot. When I view the published page in a browser, it says "oops!". Help! 

 

oops.JPG

Reply
0 Upvotes