Upgrade the JavaScript source code from the backbean JSF

In my XHTML file, I have included Javascript like this:

<script src="test1.js"></script>

Additionally, I have a few other Javascript files which are actually themes.

I want to provide users with the option to change the theme (Javascript name) from a drop-down box.

I attempted to do it this way:

<script src="#{testBean.jsName}</script>

Since this will be an Ajax update, I updated the section with:

<h:panelGrid id="jsName">
<script src="#{testBean.jsName}</script>
</h:panelGrid>

It's important to note that this is not within the form.

When I try:

<p:commandButton value="Generate"
actionListener="#{tBean.generateGraph}" update="jsName"></p:commandButton>

It does not work and gives an error saying it couldn't find jsName.

If I place that grid inside the form, the error goes away but the script name remains the same.

Does anyone have a better idea or alternative method to achieve this?

Answer №1

To perform an update from a component within the form, make sure to reference the absolute id of the panelGrid. Failure to do so will prompt PrimeFaces to attempt updating an element with the id jsName within the form. To use the absolute id, precede it with a :. Update the button as follows:

<p:commandButton value="Generate" actionListener="#{tBean.generateGraph}" update=":jsName"/>

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

No content found in jQuery .text() values within iframe

I am experiencing an unusual issue with assigning a value to a variable using jQuery. I am unable to retrieve the values from .text() specifically on Spotify, while other functions on different sites are working fine. Even after the elements have loaded, i ...

Retrieving, storing, and utilizing JSON variables in Express

I've been struggling to grasp the concept of accessing and processing data using different HTTP methods like get, put, post. Currently, I have managed to retrieve JSON data and store it in a global variable. var pokemonsData; fetch('https://raw ...

Observing nested data changes in Vue.JS?

In my Vue.js components, I have a group of checkboxes that are sending data to the parent element. My goal is to monitor this data for changes and use it to filter information in an API call. When certain checkboxes are selected, the data stored on the pa ...

TS1057: It is required that an async function or method has a return type that can be awaited

There was a recent Github issue reported on March 28th regarding async arrow functions generating faulty code when targeting ES5, resulting in the error message: TS1057: An async function or method must have a valid awaitable return type You can find t ...

Sending data using AJAX and receiving it in PHP

After spending 3 days and coming across numerous basic questions in this community, I have finally managed to grasp a bit of the concept of ajax post. However, I am still stuck on one little issue - how can I retrieve the value passed by Ajax using PHP? $ ...

Changing a single array into a series of arrays

I'm attempting to reverse the flattening process of an array. The JSON array I have as input contains 4 elements: [ { "nestedObj": { "id":12 } }, { "nestedObj": { "id":555 } ...

Exploring the capabilities of argon2-browser in a cutting-edge setup with vite

After spending several hours attempting to implement the argon2-browser library in a Vue app with Vite, I have been encountering a persistent error. Despite following the documentation closely, I keep receiving the following message: This require call is ...

Stop the webpage from scrolling when clicking on a ui-grid field

Is there a way to prevent page scrolling when clicking on a row field in ui-grid? I'm working with a page that has ui-grid, and each row includes an anchor tag with a URL value linked and target="_blank" to open in a new tab like the example below: ...

"Slow loading times experienced with Nextjs Image component when integrated with a map

Why do the images load slowly on localhost when using map, but quickly when not using it? I've tried various props with the Image component, but none seem to solve this issue. However, if I refresh the page after all images have rendered once, they ...

Retrieving elements within an object using jQuery

Here's some code I'm working on: function popAreaTree() { var tree = $("ol.tree"); var list1 = tree.children('li'); var list2 = list1.children('ol').children('li'); $(tree).on(&apo ...

Using html data attributes to encode JSON data with strings

Looking for a way to pass data to JavaScript, I decided to create a template tag as shown below: from django.utils.safestring import mark_safe from django import template import json register = template.Library() @register.simple_tag def mydata(): r ...

++first it must decrease before it increases

I'm attempting to create a basic counter feature, where clicking on a button labelled "+" should increase a variable named Score by 1, and the "-" button should decrease it by 1. However, I've encountered an issue where pressing the "+" button fo ...

Background Patterns on Webpages

My website has a lovely gradient background on the html tag in css, while the body tag showcases a seamless pattern repeating on both the x and y axes. Everything was looking great until I checked the website on an iPad/iPhone in portrait mode, where the ...

Conflicts arising between smoothState.js and other plugins

After successfully implementing the smoothState.js plugin on my website, I encountered an issue with another simple jQuery plugin. The plugin begins with: $(document).ready() Unfortunately, this plugin does not work unless I refresh the page. I have gone ...

Issue with Angular 2 NgFor Pattern Error Message Display Absence

I am attempting to incorporate inputs with a regex requirement within an ngFor loop, but I am not receiving the expected error message when entering something that does not match the required pattern. Even when I input an incorrect pattern, "Test" remains ...

What are the best strategies for securing a RESTful API endpoint within a Flutter app?

I have a Flutter mobile app that accesses a backend API server, requiring an API key. I don't want to hardcode the key into the app for security reasons. How can I safeguard both the API key and the endpoint from unauthorized access? My app does not n ...

Building an easy-to-use jQuery task list

I'm currently working on a basic to-do list in Javascript, but I've encountered an issue. When I check the checkbox, the style of the adjacent text doesn't change as expected. Instead, it's the heading text that is affected by the chang ...

How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

Starting with this code snippet: convert utilizes svgInjector to start and terminate a resource. export async function convert( serializedSvg: string, svgSourceId: string, containerId: string ): Promise<string> { const svgInjector = new SvgI ...

What could be causing my function to output unicode replacement characters instead?

As I work on enhancing password security by implementing encryption, my goal is to store the hashes and perform encryption/decryption during signup/login processes. The encryption process works smoothly, converting from utf8 to hex without any issues. Howe ...

Perform a search within an iframe

Despite the fact that iframes are considered outdated, I am attempting to create a browser within an HTML browser. I have implemented a search bar that opens the typed input in a new window which searches Google. However, I would like to modify it so that ...