Use the h:outputScript tag specifically within a h:panelGroup in your JSF application, avoiding applying it to the entire

Within my jsf page, I have made entire panels clickable even when they contain links. This functionality is achieved through a specific js function that is applied to the jsf page (refer to the page structure below).

<h:panelGroup layout="block" styleClass="col-md-3">
    <h:form>
        <ui:repeat> 
            //numerous panels and panel groups   
        </ui:repeat> 

        **<h:outputScript>
            $(function() {
                setupPanelLinks();
            });
        </h:outputScript>**    

    </h:form>    
</h:panelGroup>
<h:panelGroup id =**"SeceondPanelGroup"** layout="block" styleClass="col-md-6 col-md-offset-1">
</h:panelGroup>

The required javascript function resides on a separate .js page.

function setupPanelLinks() {
    $(".panel").click(function() {
        window.location.href = $(this).find("a.myLink").attr('href');
    });

    $(".panel a").click(function(e) {
        e.stopPropagation();
    });
}

In this setup, the 'myLink' styleClass is applied to an h:link within the ui:repeat of the first panel group.

Although everything is functioning properly, the challenge lies in restricting the application of the javascript function solely to the upper panel group and not to the "SecondPanelGroup". As my knowledge of JS is limited, I believe a targeted approach is needed to refine the scope of the function. Any recommendations on how this can be accomplished?

Is it possible to apply a javascript function only to a specific section of a page, such as a div, rather than affecting the entire page?

javascriptajaxjsf-2.2

Answer №1

Is it possible to target a specific section of a webpage with a JavaScript function instead of the entire page?

Absolutely, you can achieve that with a JavaScript function. When working on your code, if you only want to apply the function to certain sections, such as div elements, you need to be mindful of how you are targeting those elements within your function.

To selectively apply the function to specific panelGroups, assign them unique ids or styleClasses (if there are multiple ones) and then refer to these identifiers in your JavaScript function instead of using a generic selector like (".panel").

function setupPanelLinks() {
    $(".clickablePanel").click(function() {
        window.location.href = $(this).find("a.myLink").attr('href');
    });

    $(".clickablePanel a").click(function(e) {
        e.stopPropagation();
    });
}

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

Combining two arrays to create a new object: a step-by-step guide

Assuming I have two arrays as follows: let arr1=["john","Bruce","Clent"]; and let arr2=[55,33,22]; How can I create an object using these arrays in JavaScript? The object should look like: {"john":55,"Bruce":33,"Clent":22}; It should use arr1 to define th ...

javascriptarraysobject

It is not possible to update the content of this element using document.getElementById and storing it in a variable

Having trouble with this simple code. Looking for some assistance! <p id="p"> Test </p> <script> var p_tag = document.getElementById("p"); document.p_tag.innerHTML = "Hey"; </script> ...

javascriptdom

Employing Ajax.Updater to retrieve a javascript file (prototype.js)

My ajax request is set up as follows: new Ajax.Updater({ success: 'footer' }, '/dyn/actions/checkSystemMessage', { insertion: 'after', evalScripts: true }); The content found at /dyn/actions/checkSystemMessag ...

javascriptajaxprototypejs

Retrieve the current URL upon page load

I'm currently attempting to parse the URL in document.ready() so I can retrieve the id of the current page and dynamically populate it with content from an AJAX call. However, I've encountered an issue where 'document.URL' seems to refe ...

javascriptjqueryajax

tips for performing a case-insensitive search in SQL

I have encountered an issue with this SQL query: var userLogin = "select * from login where USERNAME = ?"; The problem arises when some usernames are <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b4f5e484f7f4e5656420a09087b5 ...

javascriptmysqlsqlnode.jsdb2

What causes useEffect to run twice in React and what is the best way to manage it effectively?

I'm currently facing an issue with my React 18 project where the useEffect hook is being called twice on mount. I have a counter set up along with a console.log() inside the useEffect to track changes in state. Here's a link to my project on Code ...

javascriptreactjsnext.js

Exploring the functionality of Protractor testing in combination with Angular 2, focusing

I am currently developing an Angular 2 application and I require some information regarding unit testing with Protractor. Previously, in Angular 1, we were able to check for things like: element(by.css('[ng-click="myFunction()"]')) in our test ...

javascriptangularprotractor

What is the process for obtaining the home directory path of a computer using JavaScript?

I am inquiring about how to obtain the home directory path of a computer using AngularJS or JavaScript. An example of this would be C:\Users\<username>. ...

javascriptangularjs

The Primevue Chart failed to display

I'm having some trouble displaying a Chart using Primevue components. It's built on the chart.js library. Currently, I have a basic Vue component set up as follows: <template> <div class="p-chart"> <h2>Chart:< ...

javascriptvue.jschart.jsprimevue

What could be causing Django REST Framework to block non-GET requests with a 403 Forbidden error from all devices except for mine?

Currently in the process of developing a web app using a Django REST Framework API. It runs smoothly on the computer where it was created (hosted online, not locally), but when trying to access the website from another computer, all GET requests work fine ...

javascriptpythondjangoreactjsdjango-rest-framework

Ways to tidy HTML/XML code?

Upon receiving a web service response, the data appears as such: <text>&lt;span class="TitleServiceChange" &gt;Service Change&lt;/span&gt; &lt;span class="DateStyle"&gt; &amp;nbsp;Poste ...

javascripthtmlxmlweb-servicesrest

What is the best way to retrieve AJAX response, specifically data, and store it in a PHP variable located beneath

Is there a way to store the data received from an AJAX response in a PHP variable located below this specific div? Essentially, I am looking for a method to access the AJAX response directly in PHP. <script> $(document).ready(function(){ ...

phpjqueryajax

Knex.js allows you to use the .whereBetween() method to include dates that

While running a filter query to get records within a specific date range, I noticed that it's including records from a day before the actual range. Here is an example: .whereBetween('created_at', [dateRange.from, dateRange.to]); https://i.s ...

javascriptexpresseloquentknex.js

Showcasing unique <div> content after a delay with setTimeout()

Within this code snippet, I am utilizing a setTimeout() function to make an API call to my backend node.js application every 5 seconds. The AJAX success section determines when to display divContent1 and divContent2 based on specific conditions that must b ...

javascriptjqueryajaxsettimeoutsetinterval

Node.js NPM Google search results showing [ Object object ] instead of actual result

searchOnGoogle: function(searchQuery){ googleSearch.query({ q: searchQuery }, function(error, response) { console.log(response); botChat.send ...

javascriptnode.jsnpm

When using promises in Vue, you can expect to receive an observer object

In my Vue.js project, I am trying to trigger a Vuex action in the created() lifecycle hook and then proceed to call an asynchronous method to fetch more data from the server upon receiving the initial data. The goal is to utilize this data in a component ...

javascriptvue.js

Exploring the concept of promise.reject() and the art of passing an object as a parameter

By passing response.json in Promise.reject(), I intended for it to be accessible in the catch block. However, it appears as undefined in the catch block. const checkResponse = (response) => { if (response.status >= 200 && response.status & ...

javascriptnode.js

Error: The 'then' method cannot be invoked on an undefined object in the Parse.File.save function

I am currently utilizing the Javascript API for parse.com within an Angular JS application. My goal is to successfully save or update the user's profile picture. Below is the code snippet that I have been working with: Some HTML . . . <input type ...

javascriptangularjsparse-platformpromise

Displaying a PDF in a new browser tab using JavaScript after retrieving data with cURL

Seeking guidance here. I currently have a URL for Phantomjs that produces a PDF, but my goal is to generate the PDF on the server side. <script> $("#generatePDF").click(function(){ var fullLink = "<? echo $link ?>" $.ajax({ ...

javascriptphpajaxpdfcurl

Managing multiple element click events through bubbling

I have a collection of controls contained within a main div called overlay-controls. Each control has its own set of overlay-controls. To handle deletion, I am using a for loop to attach an event listener to each button with the class delete. Prior to a ...

javascripthtmljqueryeventsdom-events