SOLVED IN 1.4: Code Element - JS script - code disappear

Bricks Version: 1.3.2
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.
URL: dev env

I’m using the below JS code in the Code Element. I don’t know why, when the script is rendered some code disappear:

My JS code in Code Element:
image

Html Rendered:

It is not related on JS library I’m using, already happened other times.

Workaround?

Workaround:

Paste the code in the Custom Code section of Bricks Settings. In my case in the “Body (Footer) Scripts”

Hello @lanzoni.nicola,

This is caused by the Dynamic Data mechanism which catches the {delay: 500, ...} as a dynamic data tag, and because it cannot render a value, it wipes out the “tag”. We’re working on a solution to exclude certain patterns from the Dynamic Data logic.

Thank you for letting us know about the workaround.

Hi Nicola,

This has been fixed in Bricks 1.3.5. There are two new Bricks Academy articles on how to handle this:

If you still have problems with it, feel free to let us know in this post.

Best regards,
timmse

Having the same problem.
I have read the article and don’t unserstand what I need to do. Do I need to replace “my_specific_tag” by the name of the var? or what?

Hello @salwebs

If you are using code that has {...some logic..} and that code is not working it is probably because it has a conflict with the Dynamic Data logic.

To avoid this, just follow this Academy article:

Thanks, something happened, but still happening…
But I don’t why it parses a shortcode. This is data that is coming from a shortcode…Why the builder should parse this content? Why not only parse the content of the builder_template shortcode?


thanks,

In fact, is a shortcode rendered from a post_content. This means that if I put some dynamic data inside a post content will be rendered right?

A fix I could implement is to avoid parsing the post_content, right?

It’s working properly if I modify your file
includes/integrations/dynamic-data/providers
adding this in render function:

...
preg_match_all( '/{([\w\-\s\.\/:|,]+)}/', $content, $matches );

//my "filter"
if(strpos($content, "gooogleMapOption") > -1){
			// var_dump( $matches);
			// var_dump($content);
			
			return $content;
		}

So this means this render function happens once the post_content is got. I don’t understand properly why you should parse tags for the post_content if in theory you only add dynamic data from the builder, not from the post content itself.

This also makes parse a lot of tags from a lot of shortcodes that use js…

And more… If some js code has “existent_tags”, because in their code uses something like

<script>
let myPlugin = {
post_content: "don't touch this"
}
</script>

the filter
add_filter( 'bricks/dynamic_data/replace_nonexistent_tags', '__return_false', 10, 1 ); will still break the code…

Please some solution for this! :pray: :pray:

Thanks

Hello @salwebs

All the Bricks data is parsed by the Dynamic Data logic, including the output of the Post Content element.

With the current Bricks version the only possible workaround is to use the exclude tags filter and exclude the strings that are still in a conflict in the JS you want to use.

Thank you

I’m sad there is not a fix from part of the team.

Here there is a solution:
I’ts simple: I use the “bricks/frontend/render_data” filter to first replace all scripts for some key and then, once the dynamic data is done, replace the key for the scripts again.

class Sal_bricksSkipScripts {


	//array scripts with their unique keys
	private $scriptsArray = [];
	private $prefix = "###script###";

	//function to replace the script for a script key
	public function pre_render($content, $post ){

		$pattern = "/\<script([^>]*)?\>.*?\<\/script\>/ims";

		if(preg_match_all($pattern , $content, $matches)) {

			foreach($matches[0] as $index => $script ) {
				$key = $this->prefix . $index;
				$this->scriptsArray[$key] = $script;	
				 $content = str_replace($script, $key, $content );
			
			}
		

		}
	

		return $content;

	}

	//function to replace script keys for the script
	public function post_render($content, $post ){

		if(!empty($this->scriptsArray)){

			//substitute all matches
			foreach($this->scriptsArray as $key => $script){
	
				$content = str_replace($key, $script, $content );
			}
	
			//clean array
			$this->scriptsArray = array();
		}

		return $content;
	}	

}


$fix = new Sal_bricksSkipScripts();

add_filter( 'bricks/frontend/render_data', [$fix, "pre_render"], 0, 2 );

add_filter( 'bricks/frontend/render_data', [$fix , "post_render"], 999999999, 2 );

Also its affecting to style tags… I don’t understand how there are not more people with this problem…

Hello @salwebs,

Thank you for your messages.

We’re looking into this code conflict and we’ll add an improvement to the Dynamic Data logic to avoid conflicts with scripts and styles in a near future.

Hi, just wanted to feedback in v1.4.0 RC

My JavaScript codes in Metabox.io will be filtered unexpectedly as well.

To solve it, I need to wrap my JavaScript object keys with double quotes.

Please see my screen here:

Hello @itchycode

We found a bug in the logic and we’ll add a fix to the 1.4 stable release.

Thank you for your report.
Luis

2 Likes

Related issue here, sorry for the double post: Javascript corrupted in code element - #3 by yankiara