Home>Support>JavaScript pasted into widget in Page Builder layout does not work.

JavaScript pasted into widget in Page Builder layout does not work.

By Daniel Favand, 9 years ago. Last reply by Daniel Favand, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi, I have the same problem as noted here: https://siteorigin.com/thread/pasting-javascript-into-a-wiget-page-builder/

I have a javascript embed code that works when pasted into the text view of the core page content editor. It also works when pasted into a core text widget and used in a sidebar. However, it doesn’t work when pasted into any widget in a PageBuilder layout. I’ve tried the core text widget, the SiteOrigin Editor widget, and the Black Studio TinyMCE Widget.

When viewing the page, all that I see is

');
. The page source shows most of the javascript, but it’s somehow mangled.

This is the original javascript, what I would paste into the text widget:

 var fgConfig = (fgConfig !== undefined) ? fgConfig : []; fgConfig.push({ eventId:"39204", designId:"1479", Styles: "1", fgDomain: "//www.firstgiving.com", fgUrl:"http://www.firstgiving.com/vtso/burlington2016", includeButton:"true", hasTeams:"true", showGoal:"true", eventName:"Burlington Penguin Plunge", buttonColor:"ff0000", buttonText:"Register Today!", buttonTextColor:"fff", id:"event39204", embedType:"popup", embedhref:"//www.firstgiving.com/Participate/Register/embedded/39204/true?color=ff0000&textColor=fff", embedhrefOffline:"//www.firstgiving.com/fundraiseforanevent/embedded/39204/true?color=ff0000&textColor=fff", href:"//www.firstgiving.com/Participate/Register/embedded/39204", textShadow:"#333", start: "registrationStart", elID:"f2eba34c-357c-1035-837d-b22b74a6b458" }); document.write('');

Where you can see it working (using the core page content editor): http://penguinplunge.org/burlington/
Where you can see the problem:
And here is a page where you can see this: http://penguinplunge.org/temporary-javascript-problem-demo/

The other thread said this problem should be fixed in an upcoming release, but that was a few weeks ago. Any updates or suggestions?

Thank you!
Dan

URL: http://penguinplunge.org/temporary-javascript-problem-demo/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 11 months ago Daniel Favand

    So I’ve looked into this a bit. It seems that the code from a core text widget in a page builder layout is saved properly to the wp_options table as a serialized object/array:

    a:3:{s:7:"widgets";a:1:{i:0;a:4:{s:5:"title";s:0:"";s:4:"text";s:1027:"<script async> var fgConfig = (fgConfig !== undefined) ? fgConfig : []; fgConfig.push({ eventId:"39204", designId:"1479", Styles: "1", fgDomain: "//www.firstgiving.com", fgUrl:"http://www.firstgiving.com/vtso/burlington2016", includeButton:"true", hasTeams:"true", showGoal:"true", eventName:"Burlington Penguin Plunge", buttonColor:"ff0000", buttonText:"Register Today!", buttonTextColor:"fff", id:"event39204", embedType:"popup", embedhref:"//www.firstgiving.com/Participate/Register/embedded/39204/true?color=ff0000&textColor=fff", embedhrefOffline:"//www.firstgiving.com/fundraiseforanevent/embedded/39204/true?color=ff0000&textColor=fff", href:"//www.firstgiving.com/Participate/Register/embedded/39204", textShadow:"#333", start: "registrationStart", elID:"f2eba34c-357c-1035-837d-b22b74a6b458" }); document.write('<script async type="text/javascript" src="//www.firstgiving.com/Scripts/RequireJs/Widgets/widgets-built.js"></script><d'+'iv id="f2eba34c-357c-1035-837d-b22b74a6b458" class="fgwidgets"></d'+'iv>');</script>";s:11:"panels_info";a:5:{s:5:"class";s:14:"WP_Widget_Text";s:4:"grid";i:0;s:4:"cell";i:0;s:2:"id";i:0;s:5:"style";a:2:{s:27:"background_image_attachment";b:0;s:18:"background_display";s:4:"tile";}}s:6:"filter";b:0;}}s:5:"grids";a:1:{i:0;a:2:{s:5:"cells";i:1;s:5:"style";a:0:{}}}s:10:"grid_cells";a:1:{i:0;a:2:{s:4:"grid";i:0;s:6:"weight";i:1;}}}

    However, running the unserialize function returns this:

    Array
(
[widgets] => Array
(
[0] => Array
(
[title] => 
[text] => ');
[panels_info] => Array
(
[class] => WP_Widget_Text
[grid] => 0
[cell] => 0
[id] => 0
[style] => Array
(
[background_image_attachment] => 
[background_display] => tile
)

)

[filter] => 
)

)

[grids] => Array
(
[0] => Array
(
[cells] => 1
[style] => Array
(
)

)

)

[grid_cells] => Array
(
[0] => Array
(
[grid] => 0
[weight] => 1
)

)

)

    Notice that

    [text] => ');

    So I’m not sure how to resolve this… can the code be escaped so that it passes through the deserializer properly?

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More