Can inter-portlet communication be achieved using AJAX?

Is it possible to use an AJAX call in Portlet A to dynamically update Portlet B without refreshing the entire portal page? I am aware that portlets can refresh their content using the JSR286 resourceURL tag, but I am curious about targeting and updating a different portlet.

The goal is to prevent the need for a complete portal page refresh when performing inter-portlet communication through actionURL or events.

Answer №1

To establish communication between portlets, you can utilize jQuery's trigger() and bind() methods. This enables all communication to occur on the client-side, without the need for server interaction.

Portlet B, which is listening for the event, can implement the following code:

$(document).bind("myevent", function(event, param) {
     // perform the necessary tasks here
     alert("Message received with data: " + param);
});

Portlet A, responsible for triggering the event, can use the following code:

$(document).trigger("myevent", "mydata");

Answer №2

In the scenario where Portlet B does not require server-side logic, an efficient approach would be to implement pub/sub on the client side. This way, Portlet B can simply listen for a specific event that will be published by Portlet A.

The process flow is as follows:

  1. The initial HTML page is delivered to the client with both Portlet A and Portlet B.
  2. A pub/sub system is set up on the client, utilizing tools such as amplifyjs.
  3. Portlet B on the client subscribes to a topic named "MyDataUpdated" or any other relevant name chosen.
  4. The client initiates a serveResource call to Portlet A through XHR.
  5. Portlet A on the server performs the necessary logic for the serveResource call.
  6. The server sends the response from Portlet A back to the client.
  7. Portlet A on the client processes the serveResource response and broadcasts the outcome using the "MyDataUpdated" topic.
  8. Portlet B on the client receives a notification about the "MyDataUpdated" event.
  9. Portlet B on the client can then refresh itself based on the received update.

Implementing pub/sub in this manner helps in decoupling the portlets from one another. This design ensures that if Portlet A is absent, Portlet B remains unaffected. Similarly, if Portlet B is not present, Portlet A continues to function seamlessly.

Moreover, if a new Portlet C is introduced and is also capable of fetching MyData, it can begin publishing "MyDataUpdated" events. Consequently, Portlet B will automatically start receiving these updates without any additional effort. This approach enables Portlet B to stay updated with new information effortlessly!

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

Exploring the possibilities of implementing the .map() function on a JSONArray within a ReactJS project using ES

When I receive a JSONArray from the server, my goal is to use .map() on it in order to extract key-value pairs of each object within the array. However, when I try to implement this code, I encounter an error stating "files.map is not a function". Can some ...

Ways to delete an element from an array in MongoDB

I am a beginner in the MEAN stack development. I am currently working on implementing this and this. I have been using the $pull method, but it seems that it is not working for me. I suspect that the issue might be due to the differences in my MongoDB stru ...

TinyMCE Node Replacement Feature

I am working on a WordPress plugin that adds a button to the TinyMCE editor. The intended behavior when the button is clicked is as follows: 1. If the selected text is not part of a shortcode (or is the shortcode itself), then the shortcode should be inser ...

What is the reason for needing a page reload in Javascript or JQuery?

I'm curious why Javascript or jQuery require a page reload before applying certain effects. CSS updates in real-time, as demonstrated by the following example: This changes dynamically without needing to refresh the page @media all and (max-width:7 ...

Display a div element for a specified amount of time every certain number of minutes

I am currently utilizing AngularJS, so whether the solution involves AngularJS or pure JS does not make a difference. In the case of using AngularJS, I have a parameter named isShowDiv which will determine the switching between two divs based on the follow ...

Retrieve a collection of JSON objects using RestAngular

Currently, I am attempting to retrieve a JSON response from the server using Restangular. var baseAccounts = Restangular.one('getAllCustomers'); baseAccounts.getList().then(function(customers) { $scope.myData = customers; console. ...

React Native app clings

How have you been lately? I am reaching out for some advice from my friends. I have developed an amazing React Native application exclusively for an Android tablet. The app works perfectly, but sometimes, after leaving it open with the screen on for a wh ...

Running a setTimeout function within the context of a jQuery each

My goal is to animate characters one by one, but for some reason the following code isn't functioning as expected: $('.overlay-listing').hover(function(){ var idx = 1; $('.strip-hov span', this).each(function(){ if ...

How does Jasmine compare to the second parameter with the toBeCloseTo function?

Jasmine's documentation is often brief, but not always sufficient. I am curious about the second parameter of the toBeCloseTo function. The official reference only provides this example: it("The 'toBeCloseTo' matcher is for precision mat ...

The counterpart to Ruby's `.select{ |x| condition }` in Javascript/ React.js would be to

This javascript function in React.js utilizes a for loop to determine the opponent team: getOpponentTeam: function(playerTeamId){ var matches = this.state.matches; var player_team = this.state.player.team.name for (i in matches){ if (matches[i]. ...

Try utilizing the 'id name ends with' parameter within the on() function for creating dynamic bindings

I need help with dynamically binding the change event to multiple select input fields that are generated within my form. The item field is generated with IDs like: id="id_form-0-item" id="id_form-1-item" id="id_form-2-item" ... Although I have attempte ...

Trigger the fire event on .click() except when text is being selected

I am currently working on a chat box project and I want the input field within the message area to automatically get focused when the user clicks anywhere in the chat box. However, I don't want this functionality to interfere with text selection for c ...

Set a variable in Node.js to capture the return value of res.json

Embarking on the creation of a social network using Node.js, I must admit that I am quite new to this field. This marks my inaugural post on the subject and I sincerely hope for your understanding. Within my social network project, I aim to implement an a ...

The code is triggering IE 8 to switch to compatibility mode resembling IE7

I have created a custom javascript function that generates a pop-up, and I am invoking this function in my code. However, every time I click the button, the browser switches to IE 7 compatibility mode and the pop-up appears behind the button. Below is my ...

Generate a customizable URL for my search bar

I have developed a single HTML page with full AJAX functionality, displaying all content including form submits, main page, form results, and more through various DOM manipulations. The issue I am currently encountering is related to a search box where use ...

Unleashing the Power of Javascript in Selenium with Java (featuring PrimeFaces)

Recently, I discovered that JavaScript seems to be malfunctioning in my Selenium Tests written in Java. The reason behind this issue remains a mystery to me. Any ideas on how to tackle this roadblock? ((JavascriptExecutor) driver).executeScript("retur ...

Is there a way to swap out values in a JavaScript Object for new ones?

I need to update the initial values of myObject with new names: let myObject = [ { name: 'X0', values: 'FALSE,TRUE' } , { name: 'X1', values: 'NORMAL,LOW,HIGH' } , { name: 'X2', values: ' ...

Building a personalized django widget to enhance functionality on other websites

Currently, I am in the process of developing a new website that includes user statistics. My goal is to create a widget that can be embedded on other websites using JavaScript to pull data from my server and display the statistics for a specific user. Howe ...

Utilizing React, generate buttons on the fly that trigger the display of their respective

Looking for a way to dynamically display 3 buttons, each of which opens a different modal? I'm struggling to figure out how to properly link the buttons to their respective modals. Here's the code I've attempted so far: Button - Modal Code: ...

Extracting data from JSON array

The output I am receiving is: [{"ref":"contact.html","score":0.7071067811865475}] $.getJSON( "index.json", function(data) { idx = lunr.Index.load(data); var searchResults = idx.search(variabletosearch); var formattedResults = JS ...