Executing pure JavaScript code in Grails using Groovy

this is a duplicate of Executing groovy statements in JavaScript sources in Grails

with a slight variation, my intention is to only render the js-code without enclosing it in script tags

picture someone loading a script from my server within their html like

<script type="text/javascript" src="mywebsite.com/xyJs/xyz"></script>

and I aim to display the "content" of that request

in the controller, I analyze the /xyz and determine what should be inside the script along with an absolute link for the iframe's src attribute. I also need to execute this groovy script. I'm attempting to achieve this as follows:

    render "document.writeln('<iframe src=\"${grailsApplication.config.grails.serverURL}/superStuff/stuff23/${profil.slugs}\" name=\"SuperStuff\" width=\"300\" height=\"600\" align=\"left\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" frameborder=\"0\" ></iframe>');"

however, the browser simply disregards the document.writeln(' and interprets the iframe as an HTML element, rendering its content.

how can I specify that it's just a small snippet of js-code without wrapping it in script tags?

I have also attempted to render a view like so:

render(view:'SuperStuff',model:[profil:profil])

and inside the 'SuperStuff' view is:

<%@ page contentType="text/javascript; UTF-8" %>
document.writeln("<iframe src='${grailsApplication.config.grails.serverURL}/superStuff/stuff23/${profil.slugs}' name='SuperStuff' width='300' height='600' align='left' scrolling='no' marginheight='0' marginwidth='0' frameborder='0' ></iframe>");

unfortunately, this approach also fails and displays the content of the iframe's src. What am I doing wrong?

any guidance on this issue would be greatly appreciated, thank you in advance.

Answer №1

Success! That issue has been resolved.

render contentType: 'text/javascript', text: "document.writeln('<iframe src=\"${grailsApp......."

Answer №2

It seems like your controller is functioning as intended, delivering the javascript code precisely as needed for your document.writeln() call. To confirm this, you can use tools like Firebug's Network Panel, Chrome DevTools, or a similar resource.

Keep in mind that the javascript code will execute immediately, leading to the insertion of the specified iframe element at the current position, as described in more detail here.

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

The browser's window.location.href fails to redirect the page

Here are my functions: <a onClick="check_claims(this)" type="button" href="javascript:void(0)" redirurl="www.facebook.com" >Invite</a> function check_claims(ele){ var select_claims = document.getE ...

Fetching content and an image simultaneously via AJAX

My website features a photo gallery that I created using the code below: /*Begin Photo Gallery Code*/ var images = ['g1.jpg', 'g2.jpg', 'g3.jpg', 'g4.jpg']; function loadImage(src) { ...

Events related to SVG elements

I have a unique situation where a div containing multiple SVG elements that act as buttons is added to the page after the user interacts with it. I am trying to add events to these SVG elements using event delegation, where I inspect the target of the even ...

A critical issue occurred: array length is invalid. The attempt to include EJS in the template failed due to

Currently, I am attempting to loop through my JSON data using EJS from Node/Express. However, I need to insert a different pin into the flexbox when it reaches the 6th iteration. Whenever I try to implement this logic, I encounter a severe error that disr ...

how to bind data to an array in Angular

I recently developed an Angular 7 application that features the capability to dynamically add and remove controls. However, I am facing challenges when it comes to binding the data to the form. In the code snippet below, I am focusing on the process of ad ...

The page is not responding after closing the modal dialog

My web application is built using Spring Boot for the backend and Thymeleaf for the front end. The app displays all available groups for users to review. When a user clicks on a group, the documents within that group are listed in a tabular form. Clicking ...

When trying to save an image using multer's storage, the error message "ENOENT: file or directory not found" is displayed. It is important to note that symbols are not causing

Whenever I try to save an image using multer's storage feature, I encounter the following issue: [Error: ENOENT: no such file or directory, open 'C:\MAMP\htdocs\Chat Backend\public\images\servers\1596819056816AF ...

Switch the toggle to activate or deactivate links

My attempt at coding a switch to disable and enable links using CSS is functional in terms of JavaScript, but the appearance is not changing. I am lacking experience in this area. Here is my HTML Button code: <label class="switch" isValue="0"> ...

Issue with setting state in useEffect causing an infinite loop due to either linter warning or user error

In its current state, my component appears as follows: const { listOfStuff = [{name:"john"},{name:"smith"}] } = props const [peopleNames, setPeopleNames] = useState([]) useEffect(() => { listOfStuff.forEach(userName => { setPeopleNames(people ...

Mastering server requests in Angular 5

I have come across recommendations stating that server requests should be made via services and not components in order to ensure reusability of functions by other components. Ultimately, the server response is needed in the component. My query pertains t ...

developed a regular expression to disregard .goutputstream documents

After successfully creating a watcher with chokidar, I encountered an issue when trying to ignore certain files using regex. I am struggling to figure out what went wrong in my code or regex implementation. Below is the snippet of the code: const watcher ...

How can we best organize a VueJS application to accommodate this specific logic?

I am currently working on an app that needs to display data fetched from multiple sources based on a condition. The issue I am facing is that the process of fetching, organizing, and returning the data varies depending on the source, sometimes even requiri ...

``Passing a database value from a controller to a table popup through AJAX: A step-by

I need to display a popup containing data from a database. I'm using an AJAX function with onclick() to achieve this. The data retrieved will be shown in the popup, which includes a table. However, I'm unsure how to properly display the data with ...

Pass JavaScript variables to a PHP file with the help of AJAX

Hey there, I'm new to developing web-based applications and currently learning about AJAX. I've run into a problem while trying to make an AJAX request with user inputs as variables and fetching the same variables in a PHP file. Below is the code ...

Examples of Javascript closures in action with a for loop

I decided to stop my research here. Below is the question I have: After reading this post, I grasped the concept illustrated by the code snippet provided. var funcs = {}; for (var i = 0; i < 3; i++) { // creating 3 functions funcs[i] = functi ...

The issue arises when attempting to execute an Ajax function within a JQuery append method, causing malfunction

My JQuery append function is calling an ajax function within the onChange method. Here is my code snippet: var data='<?php echo $data; ?>'; var tambah=1; var txt=1; function add_fullboard_dalam_kota(){ function showU(str) { ...

When using React and React Router v6, make sure to implement a 404 status code response for unmatched routes

When it comes to managing unmatched routes with React Router, I have a solid understanding: <Routes> {/* Public routes */} <Route exact path="/" element={<Home />} /> // Other routes... {/* Error routes */} ...

Ways to identify when a specific react component has been clicked

Currently working on developing a klondike game with 4 empty stacks at the start of the game. The initial page layout resembles the first image provided in the link. I am facing an issue where I cannot determine which component was clicked when clicking on ...

Ensure that both Vue methods are executed synchronously

I am working with two Vue methods: (1) this.retrieveSavedSearches() (2) this.updateDefaultSelectOption() Is there a way to ensure that method (2) only executes after method(1) has completed its execution? ...

Retrieve information using server-side rendering

I'm faced with a situation where my page utilizes query parameters to fetch data via SSR. The challenge arises when these query parameters frequently change, triggering a re-fetch of the data using SSR despite there being no client-side data fetching ...