How to programmatically close a Liferay dialog box

I am currently dealing with a Liferay dialog box. My goal is to close this dialog box and then redirect the URL to a specific page.

This is how I am attempting to achieve it:

<aui:column columnWidth="16" >

<%if(UserGroupRoleLocalServiceUtil.hasUserGroupRole(u.getUserId(), groupId, role.getRoleId())){ %>

<input value="delete" type="button"  onclick="document.location.href='
<portlet:actionURL name="deleteUserRole"><portlet:param name="memberId" value="<%= memberIdStr %>"/>
<portlet:param name="organization" value="<%=  Long.toString(organizationID) %>"/></portlet:actionURL>'"  />
    <%} %>
            </aui:column>


public void deleteUserRole(ActionRequest actionRequest,ActionResponse actionResponse){

// process to delete user role

    Role r = RoleLocalServiceUtil.getRole(org.getCompanyId(),
                    "Power User");


    UserGroupRoleLocalServiceUtil.deleteUserGroupRoles(userID, groupId, new long[] { r.getRoleId() });

        actionResponse.sendRedirect("/group/employee/empHome");                 


}

Upon clicking the delete button, the above method executes, processes data, and redirects to the specified URL within a popup window.

However, my intention is to have the redirection happen outside of the dialog box, not within it.

How can I first close the dialog box and then redirect to the desired URL?

To open the dialog box, I am invoking a class on a link. Below is my JavaScript file:

/test.js/

 var myPopup;
AUI().ready( function() {

    if (AUI().one('#testing-menu')) {

    AUI().one('.extendClick').on(
        'mouseenter',
        function(event){
            AUI().one('.navi-type').setStyles({'display': 'none'});
            AUI().one('.extendClick').setStyles({'display': 'none'});
            AUI().one('.collapseArrow').setStyles({'display': 'block'});
        }
      );


   AUI().all('.employee-dialog').on(
        'click',
        function(event){
          var url = event.currentTarget.get('href');
          event.preventDefault();
          //console.info(url);

        window.myPopup= Liferay.Util.openWindow(
              {
                dialog: {
                  align: { points: ['tc', 'tc'] },
                  width: 960
                },
                title: 'Settings',
                uri: url
              }
            );
        }
      );


  }
});

Answer №1

Remember the popup reference and make sure to close it later using that:

let myPopupReference;
AUI().all('.employee-dialog').on(
    'click',
    function(event){
      [..]
      myPopupReference = Liferay.Util.openWindow([...]);
    }
  );

Utilize the stored popup reference in onclick:

<input value="close" type="button" onclick="myPopupReference.close();document.location.href='
    [...]

Answer №2

At long last, I have found a solution to dismiss this pop-up dialogue box using the following method.

<button value="discard" type="button"  onclick="javascript:closePopup();document.location.href='
<portlet:actionURL name="removeUserRole"><portlet:param name="userID" value="<%= userIdString %>"/>
<portlet:param name="group" value="<%=  Long.toString(groupID) %>"/></portlet:actionURL>'"  />


<script type="text/javascript">
function closePopup(){
top.document.getElementById('closebox').click();
}
</script>

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

Are `<text>` nodes unable to utilize ligature fonts in CSS/SVG?

Check out this JsFiddle demo: http://jsfiddle.net/d0t3yggb/ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="material-icons">add add add add</div> <svg width="100%" height="100% ...

Next.js fails to properly render external links when utilizing the Link component

It was quite surprising to discover that a basic Link component doesn't function as expected in Next.js when attempting to use it with an external URL and HTML Button tag within. Here is my attempt at solving this issue: Attempt 1: <Link href="h ...

Having trouble receiving accurate intellisense suggestions for MongoDB operations

Implementing communication between a node application and MongoDB without using Mongoose led to the installation of typing for both Node and MongoDB. This resulted in the creation of a typings folder with a reference to index.d.ts in the server.ts file. In ...

The Ionic search bar will only initiate a search once the keyboard is no longer in view

In my Ionic application, I have implemented a search bar to filter and search through a list. The filtering process is triggered as soon as I start typing in the search bar. However, the updated results are not displayed on the screen until I manually hide ...

Include new items in the li tag using JavaScript

Hello, I am looking to dynamically add elements to an LI element when a link is clicked. I have successfully added elements to a DIV using the following code snippet: I came across a similar question on Which "href" value should I use for JavaScript links ...

Transferring the AJAX response into a JavaScript variable

New to AJAX and JS here. I am implementing an AJAX code that fetches data from a php service. I am trying to figure out how to store the returned data in a JavaScript variable, which I can then display on the UI. Below is my AJAX code snippet: <script ...

"Troubleshooting: Why isn't my MVC5 Controller able to receive

I am facing an issue with a controller method that I have defined: public JsonResult Save(List<BlogInfo> list) { return Json(new { Data = "" }, JsonRequestBehavior.AllowGet); } In addition, there is an ajax post request from the client side lik ...

Click to expand for answers to commonly asked questions

Having trouble setting up a FAQs page on my blog and can't seem to get the code right. Check out what I'm trying to do here: http://jsfiddle.net/qwL33/ Everything seems fine but when I click on the first question, both questions open up. Can som ...

Color in the diamond shape only to a designated height

I am in search of a unique diamond shape that allows me to fill the color up to a specific height based on an attribute or variable provided. https://i.stack.imgur.com/62U6h.png. I attempted creating the diamond shape and initially considered placing it ...

Tips for obtaining and storing multiple inputs within the same readline.question prompt in separate variables

Seeking to gather multiple user inputs in a single readline question and assign them to different variables? You're not alone! Ran into this challenge myself while trying to figure out the solution. Code import * as readline from 'node:readline&a ...

Setting up Karma configuration to specifically exclude nested directories

When unit testing my Angular 2 application using Karma, I encountered an issue with my directory structure: └── src/ ├── index.js ├── index.js.text ├── index.test.js ├── README.txt ├── startuptest.js ...

What methods can be utilized to conceal an if statement in code?

In my application, I am facing an issue with an external JavaScript file that contains multiple if statements. The problem arises when one of the if statements is still being executed even if the corresponding form is hidden. The flow of my application is ...

Use JavaScript to change the text of a hyperlink to @sometext

<li class="some-class one-more"><label>twitter:</label> <a href="https://twitter.com/sometext?s=09" target="_blank" rel="noreferrer noopener">https://twitter.com/sometext?s=09</a> < ...

Vue's smooth scrolling in Nuxt.js was not defined due to an error with the Window

There seems to be an issue with adding vue smooth scroll to my nuxt.js project as I'm encountering the "window is not defined error". The steps I followed were: yarn add vue2-smooth-scroll Within the vue file, I included: import Vue from 'vue ...

Razzle fails to initiate the server

After creating my React project with Razzle.js and downloading it from a repository, I encountered an issue when trying to run it. Upon running yarn start, the screen gets stuck at a message saying the source is compiled and server is running on localhost: ...

Verify if a certain value exists in an array while using ng-if inside ng-repeat

Currently, I have a loop using ng-repeat that goes through a list of wines obtained from an API. Alongside this, there is an array variable containing all the IDs of wines that have been marked as favorites and retrieved from the database. My goal is to sh ...

The Express application seems to load forever after a certain period of time

I encountered a peculiar problem with my express application. It was deployed on the server and functioning properly, but after a few hours, when I tried to access the website again, it kept loading indefinitely. Below is my app.js code: const express = r ...

Why does Vuetify/Javascript keep throwing a ReferenceError stating that the variable is undefined?

I'm currently developing in Vuetify and I want to incorporate a javascript client for Prometheus to fetch data for my application. You can find the page Here. Despite following their example, I keep encountering a ReferenceError: Prometheus is not def ...

What is the best way to transfer information from df ~ to my webpage?

I'm currently working on a pie chart that visualizes the disk space usage on my Linux machine. I need help figuring out how to properly parse this data onto a microservice URL. Any assistance would be greatly appreciated. Here's what I have so f ...

I am looking to dynamically insert a text field into an HTML form using jQuery or JavaScript when a specific button is clicked

This is my code snippet: <div class="rButtons"> <input type="radio" name="numbers" value="10" />10 <input type="radio" name="numbers" value="20" />20 <input type="radio" name="numbers" value="other" />other </div> ...