An error was thrown: Unexpected token ILLEGAL was detected

Working with Liferay 5.2

I would like to show a message related to the current language of Liferay.

The code for this message is in Velocity language and can be found in navigation.vm file.

<div id="navigation" class="sort-pages modify-pages">
    <ul>
        #foreach ($nav_item in $nav_items)

            #if (($nav_item.getTitle() == 'register_correspondence') )
                    #if ($nav_item.hasChildren())
                        #foreach ($nav_child in $nav_item.getChildren())
                          <li >
                            <a href="$nav_child.getURL()" $nav_child.getTarget()>
                                <span >$nav_child.getName()</span>
                            </a>
                          </li>
                        #end
                    #end

            #end

            #if (($nav_item.getTitle() == 'reports') )      
              #if ($nav_item.isSelected())
                #set ($nav_item_class = "selected")
            #else
                #set ($nav_item_class = "")
            #end

            <li>

                #if (($nav_item.getTitle() == 'logout'))
                    <a href="$sign_out_url" $nav_item.getTarget()>
                        <span class="$nav_item.getTitle()">$nav_item.getName()</span>
                    </a>
                #else
                    <a href="$nav_item.getURL()" $nav_item.getTarget()>
                        <span class="$nav_item.getTitle()">$nav_item.getName()</span>
                    </a>
                #end

                #if ($nav_item.hasChildren())
                    <ul class="child-menu">
                        #foreach ($nav_child in $nav_item.getChildren())
                            #if ($nav_child.isSelected())
                                #set ($nav_child_class = "selected")
                            #else
                                #set ($nav_child_class = "")
                            #end

                            <li class="$nav_child_class">
                                <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
                            </li>
                        #end
                    </ul>

                #end

            </li>#end
            #end
            #if ($show_sign_out)
            <li class="$nav_child_class">
                <A HREF="$sign_out_url" onCLick="return confirm('Are you sure you want to log out')"> <font color="FF0000">
                Logout
                </font>
                </A>
            </li>

        #end
    </ul>
</div>

The message is contained within this element:

<li class="$nav_child_class">
                <A HREF="$sign_out_url" onCLick="return confirm('Are you sure you want to log out')"> <font color="FF0000">
                Logout
                </font>
                </A>
            </li>

I aim to display this message based on the current language in use by Liferay.

Therefore, when the language is set to French, the message will be shown in French.

My attempt at achieving this behavior was unsuccessful with the following code:

<div id="navigation" class="sort-pages modify-pages">
    <ul>
        #foreach ($nav_item in $nav_items)

            #if (($nav_item.getTitle() == 'register_correspondence') )
                    #if ($nav_item.hasChildren())
                        #foreach ($nav_child in $nav_item.getChildren())
                          <li >
                            <a href="$nav_child.getURL()" $nav_child.getTarget()>
                                <span >$nav_child.getName()</span>
                            </a>
                          </li>
                        #end
                    #end

            #end

            #if (($nav_item.getTitle() == 'reports') )      
              #if ($nav_item.isSelected())
                #set ($nav_item_class = "selected")
            #else
                #set ($nav_item_class = "")
            #end

            <li>

                #if (($nav_item.getTitle() == 'logout'))
                    <a href="$sign_out_url" $nav_item.getTarget()>
                        <span class="$nav_item.getTitle()">$nav_item.getName()</span>
                    </a>
                #else
                    <a href="$nav_item.getURL()" $nav_item.getTarget()>
                        <span class="$nav_item.getTitle()">$nav_item.getName()</span>
                    </a>
                #end

                #if ($nav_item.hasChildren())
                    <ul class="child-menu">
                        #foreach ($nav_child in $nav_item.getChildren())
                            #if ($nav_child.isSelected())
                                #set ($nav_child_class = "selected")
                            #else
                                #set ($nav_child_class = "")
                            #end

                            <li class="$nav_child_class">
                                <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
                            </li>
                        #end
                    </ul>

                #end

            </li>#end
            #end
            #if ($show_sign_out)

    <script type="text/javascript">

        var langVar = "$themeDisplay.getLocale()";

        if (langVar == 'en_US') {

        document.write('<li class="$nav_child_class">
                <A HREF="$sign_out_url" onCLick="return confirm(\'Are you sure you want to log out\')"> <font color="FF0000">
                Logout
                </font>
                </A>
            </li>');

        }
        else
        {

        document.write('<li class="$nav_child_class">
                <A HREF="$sign_out_url" onCLick="return confirm(\'Etes-vous sûr que vous voulez vous déconnecter\')"> <font color="FF0000">
                Déconnexion
                </font>
                </A>
            </li>');

        }

        </script>


        #end
    </ul>
</div>

While conducting my test within the JavaScript code, I added the line var langVar = "$themeDisplay.getLocale()";

However, upon testing, I encountered the following error:

Uncaught SyntaxError: Unexpected token ILLEGAL

Only modifications were made within the section labeled as #if ($show_sign_out)

javascriptliferay-velocity

Answer №1

Your issue lies in a javascript error within your script tag.

This is not considered valid

document.write('<li class="$nav_child_class">
        <A HREF="$sign_out_url" onCLick="return confirm(' Are you sure you want to log out ')"> <font color="FF0000">
        Logout
        </font>
        </A>
    </li>');

There are two main problems with this code.

The first problem is that strings should not cross multiple lines.

The second issue is the presence of single quotes within the string that already uses single quotes, requiring inner single quotes to be escaped.

You could rewrite it as 

document.write('<li class="$nav_child_class"><A HREF="$sign_out_url" onCLick="return confirm(\' Are you sure you want to log out \')"> <font color="FF0000">Logout</font></A></li>');

or simply as 

document.write('<li class="$nav_child_class">' +
        '<A HREF="$sign_out_url" onCLick="return confirm(\' Are you sure you want to log out \')"> <font color="FF0000\'>' +
        'Logout' +
        '</font>' +
        '</A>' +
    '</li>');

However, why are you using a script tag for this?

A cleaner approach would be

#if ($show_sign_out)

    #if ($themeDisplay.getLocale() == "en_US")
        #set($logoutLabel = "Logout")
        #set($logoutConfirm = "Are you sure you want to log out")
    #else
        #set($logoutLabel = "Déconnexion")
        #set($logoutConfirm = "Etes-vous sur que vous voulez vous déconnecter")
    #end    

    <li class="$nav_child_class">
        <A HREF="$sign_out_url" onCLick="return confirm('$logoutConfirm')"> <font color="FF0000">
            $logoutLabel
        </font></A>
    </li>

#end

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using TypeScript generics to add constraints to function parameters within an object

My Goal: Imagine a configuration with types structured like this: type ExmapleConfig = { A: { Component: (props: { type: "a"; a: number; b: number }) => null }; B: { Component: (props: { type: "b"; a: string; c: number }) =& ...

javascripttypescriptgenericstypeerrortypescript-generics

django Ajax GET request could not locate the specified URL

I'm facing an issue while trying to pass parameters through Ajax with Django 1.11. The error message states: Not Found: /enquiry/followup_alter/. Below is the relevant code snippet. Error: Not Found: /enquiry/followup_alter/ Ajax: $(docume ...

javascriptpythonjqueryajaxdjango

Experiencing difficulties with a cross-domain jQuery/AJAX service request

After extensively researching various threads both on this platform and elsewhere, I have been trying to successfully execute a cross-domain AJAX call. The scenario involves a Restful WCF service that simply returns a boolean value. The service is configur ...

javascriptjqueryjsonajaxwcf

Transfer the values from identical textboxes to jQuery, and subsequently to a PHP page for saving them to a database

Here is a list of textboxes that I have: ` <table id="div1" style="width:100%;"> <tr> <td> <label>Question Text</label> </td> <td colspan="5"> ...

javascriptphpjquery

Executing functions during the page loading process

I'm currently in the process of integrating a new payment method into a checkout page that does not have built-in support for it. The button on the page that redirects to an external payment portal requires specific parameters to be passed. I've ...

javascriptjquery

Is there a way to combine multiple array objects by comparing just one distinct element?

Is there a way to combine these two arrays into one? array1 = [ { image: 'image1', title: 'title1' }, { image: 'image2', title: 'title2' }, { image: 'image3', title: 'title3' }, ]; array2 = ...

javascripttypescript

Encountering a blank or 404 error page in React after running npm build - let's troubleshoot where the issue might be

Upon running npm build(react), my index.html displays a blank page. To address this issue, I initially attempted the following steps: Adding the following line in package.json homepage : "./" or "." or "absolute file PATH" ...

javascriptreactjsreact-router

Is it better to store CSS and JavaScript in separate files or within the main HTML document

While the best practice is to place JavaScript and CSS code in separate files (such as .js and .css), many popular websites like Amazon, Facebook, etc. often include a large portion of their JavaScript and CSS code directly within the main HTML page. Whic ...

javascripthtmlcssweb

Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...

javascripthtmlcssangulartypescript

Determine whether AngularJS directive method binding automatically defaults to angular.noop

In my directive, I am passing a function to a plugin which will use it with a specified value. Let's simplify things by ignoring data changes: angular.module('some.directives', []) .directive('myDirective', [, function () { ...

javascriptangularjsangularjs-directiveangularjs-scope

How can Chrome's display:none latency be eliminated?

My Chrome extension is designed to alter a third-party web page by removing a button and adding two new HTML elements. The process involves observing the URL of the current tab and executing an HTML injection if it matches the specified regex pattern. Desp ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Cross domain request in a simple HTML document

I'm currently working on an app that is strictly in plain HTML files without a server. I'm facing difficulties with cross domain requests from JavaScript. Whenever I try to make a request, the browser displays this error message: XMLHttpRequest ...

javascriptajaxcross-domain

Encountering issues while creating a basic digital clock webpage using React

I am trying to create a simple clock in React, but I want all the time data to be stored in a single object instead of separate states for hours, minutes, and seconds. However, I keep running into an error. Can someone please assist me? import React from & ...

javascriptreactjs

Looking for guidance on integrating cookies with express session? Keep in mind that connect.sid is expected to be phased out

Within my app.js file, I have the following code snippet: app.use(session({secret: 'mySecret', resave: false, saveUninitialized: false})); While this setup functions correctly, it triggers a warning message: The cookie “connect.sid” will ...

javascriptnode.jsexpresssessioncookies

I am experiencing difficulties with the state updates, as they are not displaying my products correctly when I select them from

When updating the states setProductsShow and setSelectedCategories, it is important to note that setSelectedCategories is updated before setProductsShow. This sequence is crucial for rendering products correctly. I have come across numerous solutions rega ...

javascriptreactjsnext.js

What is the method to trigger a function upon opening an anchor tag?

When a user opens a link in my React app, I need to send a post request with a payload to my server. My current strategy involves using the onClick and onAuxClick callbacks to handle the link click event. However, I have to filter out right-clicks because ...

javascripthtmlreactjs

Passing a Scope to ES6 Template Literals: How to Ensure they are Interpreted Correctly?

I've recently started utilizing template literals to create an error generator. Although I have functional code, I find myself having to define the list of potential errors within the constructor scope, and this is not ideal for me. Is there a way t ...

javascriptnode.jsecmascript-6

Encountering problems with parsing a lengthy JSON file

Can you spot the issue here? let stringinsta = JSON.parse({ "access_token":"129261**5ea59a4da481c65", "user":{ "username":"carlos_bellesso", ...

javascriptjqueryjson

Apply a custom filter to ng-repeat results

Asking for advice on how to iterate over an array using ng-repeat and filter the contained objects based on a function property. Find more details in this Plunker link. Let's say we have an object like this: vm.show1 = function(){ return true; }; ...

javascriptangularjsfilter

Select box in material design does not show an error when the value is empty

<md-input-container flex-gt-xs> <label translate>rule.type.title</label> <md-select name="type" ng-required="true" ng-model="vm.model.type" ng-change="vm.onRuleTypeChange(vm.model.type)"> <md-op ...

javascriptjqueryangularjs