What is the process for implementing a JavaScript digital clock in a .JSFF file?

Currently utilizing the ADF program. Encountered an issue where this javascript code is functional in the .JSF file but not in the .JSFF file. Seeking guidance on potential solutions to address this problem.

<?xml version='1.0' encoding='UTF-8'?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <f:view>
       <af:document title="Test.jsff" id="d1">
        <af:resource type="javascript">
          function startTime() {
              var today = new Date();
              var h = today.getHours();
              var m = today.getMinutes();
              var s = today.getSeconds();
              m = checkTime(m);
              s = checkTime(s);
              document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
              t = setTimeout('startTime()', 500);
          }

          function checkTime(i) {
              if (i &lt; 10) {
                  i = "0" + i;
              }
              return i;
          }
        </af:resource>
        <af:form id="f1">
            <af:outputText value="outputText1" id="txt">
                <af:clientListener method="startTime()" type="propertyChange"/>
            </af:outputText>
        </af:form>
    </af:document>
</f:view>
</ui:composition>

javascriptjsforacle-adf

Answer №1

The issue arises when attempting to include an ad:document tag within a fragment, as it is not possible to do so directly. In order to incorporate JavaScript into a fragment, the recommended approach is to utilize an ad:panelFormLayout and then add the at:resource tag accordingly. Another challenge emerges with your JavaScript code, where the assumption is made that the component can be accessed solely by the ID 'txt'. This method is only effective when the component is placed directly on a page, outside of any additional naming containers. Since a fragment functions as a naming container, the client ID for the component will change based on its position within the page. As fragments can be added multiple times onto a page, using 'txt' as the ID would result in duplication issues. For clarification, examining the page source when rendering with a fragment (a specific area on the page) will reveal a modified ID format such as 'r1:0:txt', where 'r1' represents the region ID, '0' signifies the region index, and 'txt' denotes the component ID within the region.

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

What is the correct way to utilize async/await in a React render function?

Although I am quite familiar with using async await in back end development with nodejs, I recently encountered a scenario where I needed to apply it on the front end. The task involves receiving an array of objects containing the latitude and longitude ( ...

javascriptreactjsasynchronouspromiseasync-await

Incorporating User Information into the Socket with NestJS Guard

Struggling to add a user's data to a socket in order to access it in a Gateway's handlers. Here is my attempted code: @Injectable() export class MySocketAuthGuard implements CanActivate { canActivate(context: ExecutionContext): boolean | Promise ...

javascriptnode.jstypescriptexpressnestjs

Stop submission of form using react by implementing e.preventDefault();

Having trouble figuring this out.... Which event should I use to bind a function call for e.preventDefault(); when someone clicks enter in the input tag? Currently experiencing an unwanted refresh. I just want to trigger another function when the enter k ...

javascriptreactjs

In what way can I display momentjs in Arabic?

I have been attempting to display the duration since a post was created! After doing some research, I discovered that I need to utilize momentJs. The timestamp is formatted like this: https://i.sstatic.net/bMoXz.png Below is the code I used to display th ...

javascriptreactjsmomentjs

I'm having trouble getting my code to work with axios in Vue.js. How can I fix this issue

I am trying to use axios.get to retrieve data from my database, but I encountered an error. Below is my code in store.js export default new Vuex.Store({ state: { test: null }, mutations: { testt(state, payload) { state.test = payloa ...

javascriptvue.jsaxios

The error of "Unhandled Rejection (TypeError): respo.json is not a function" has occurred

Looking for some help as a React beginner. I'm encountering an error message stating Unhandled Rejection (TypeError): respo.json is not a function. import React, { useEffect } from "react"; import { useState } from "react"; import ...

javascriptreactjsasync-awaitaxiosuse-effect

Having trouble establishing a connection with the SignalR client using an npm package

Greetings! I am looking for npm packages that can help me run SignalR client on my console. I've attempted using the following package - https://www.npmjs.com/package/signalr-client, but unfortunately, it is not establishing a connection to the server ...

javascriptnpmsignalr

Employing JavaScript to set a variable that changes dynamically

In my code, I have a functionality that allows for changing different dropdowns with similar ending IDs. In other parts of the code, I have assigned variables rl and rl_extra as well as rs and rs_extra. Now, when the var prefix is determined to be either ...

javascriptjquery

Change the position of an array element when displayed on an HTML page

I'm trying to figure out a way to manipulate the position of an HTML element that is stored inside an array. The issue I am facing is that my code generates a new div every time a specific function is called, and this div has a class applied to it for ...

javascripthtmlcss

The issue with ThreeJS where the camera movement stops working after clicking

Seeking assistance with implementing camera movement in ThreeJS. Despite having no errors, clicking the button does not trigger the camera movement as expected. The function aimed at moving the camera by 200 units in all directions seems to have no effec ...

javascriptthree.jstween

Troubleshooting Asynchronous Code in JavaScript

I was experimenting with creating a brute force poll voting script. $('#vote').click(function(e) { var votes = 0; var attempts = 0; var failures = 0; for(var i = 0; i < 500; i++){ ...

javascriptjqueryajaxblocking

Is there a way for me to gain access to the ng-repeat scope?

I have a scenario where my ng-repeat generates different elements and I need to perform certain operations, such as creating variables, within the scope of the ng-repeat. Is there a way to access the specific ng-repeat scope? How can I achieve something ...

javascriptangularjsangularjs-ng-repeat

Is it possible to generate output from a string dust template without the need for prior compilation?

Can dustjs be used to dynamically render templates without compiling them first? > > var dust = require('dustjs-linkedin'); > > dust.stringRender("Hello {name}, how are you?", { name: "Joe" }, function(err, res) { > console. ...

javascriptnode.jsdust.js

My JavaScript code runs perfectly fine on JSFiddle, but for some reason, it's not functioning correctly on

I need a solution where a new button is generated every time the post button is clicked, and each of these buttons should have its own counter. This works successfully in JSFiddle, but unfortunately doesn't work when I try to implement it elsewhere. ...

javascriptjquerycsshtml

Displaying spinner until the entire section has finished loading

In order to display a loading spinner until all images in a specific section of the page have fully loaded, I am utilizing Django, jQuery, and Ajax technologies. The HTML structure consists of two main divs: On the left side, there is a table, while on t ...

javascriptjqueryajaxdjango

What is the best way to retrieve a particular element from a dictionary?

In my dictionary structure, I have a list containing 2 dictionaries. Here is an example: dict: { "weather":[ {"id": 701, "main": "Mist", "description": "mist"}, {"id": 300, "main": "Drizzle", "description": "light intensity drizzle"} ] } If I wan ...

javascriptpythonarraysjsonobject

Focus loss occurs when the state changes in a Custom Tooltip containing an MUI TextField

Currently, I am utilizing MUI and have implemented a custom Tooltip for one specific TextField within my form. The issue arises when I start typing in this particular TextField as it loses focus immediately. Consequently, the state of the value in my formD ...

javascriptreactjsmaterial-ui

Integrating content from a separate PHP page into the main index PHP page

I can't seem to get the #container1 div on my index.php page to load with the content from another #container2 div on page1.php. It's frustrating because I've checked my file hierarchy and everything seems correct. This is how my files are ...

javascriptphpjqueryhtml

What could be causing the lack of responsiveness in my site rendering when utilizing Bootstrap on an aspx page?

I am currently facing an issue with my page setup. I have Bootstrap running on an aspx page and it works perfectly on desktop but not on mobile devices. Page: https://i.sstatic.net/N8vSF.png I even tried hosting the Bootstrap core files locally, but sti ...

javascriptasp.nettwitter-bootstrapbootstrap-4

There seems to be an issue with Material UI Autocomplete not responding to the onChange value

I am currently developing a project using reactjs and incorporating material ui to create components. One specific component I have utilized is the Autocomplete within a form for event creation in my project. I am encountering an issue where I want the sta ...

javascriptreactjsmaterial-uionchange