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

Is it possible to stop Angular requests from being made within dynamic innerhtml?

I have a particular element in my code that looks like this: <div [innerHtml]="htmlContent | sanitiseHtml"></div> The sanitiseHtml pipe is used to sanitize the HTML content. Unfortunately, when the htmlContent includes relative images, these ...

Why do we even need Angular controllers when directives can perform the same tasks as controllers?

As a new Angular developer, I have to say that I am really impressed with the architecture of this framework. However, one thing that puzzles me is the existence of controllers. Let me elaborate: Services in Angular seem to have a clear purpose: 1) Store ...

Sharing $scope Data Between Controller and Directive in AngularJS

Recently, I created a straightforward directive that displays an object: var app = angular.module("myApp", []); app.controller('myCtrl', function($scope) { $scope.users=[ {name:'davidi',age:'23'}, {name:'karen ...

Upon receiving AJAX-content, the next iteration of the $.each function will be triggered

This question has been asked on an online forum in the past, but it was around four years ago and there may be a more efficient solution available now. In my code, I have a loop that sometimes requires additional data to be fetched through ajax calls. Af ...

Having Trouble with Jquery UI Date Picker?

I have included my form code below. <div class="threeleft second" id='displayallformshow' style="float: none;width: 80%;padding:10px;"> <form action="investor_submit.php"> <div class='formdiv'> ...

Utilize AngularJS to modify the appearance of text

Just starting out with AngularJS and I need to achieve the following task. I have a text that says "bob" and two buttons, one for bold and one for italic. When the bold button is clicked, I want to make the text BOB bold and when the italic button is click ...

Issue with Vuetify v-alert not appearing after updating reactive property

I am trying to set up a conditional rendering for a v-alert if the login response code is 401 Unauthorized. Here is how I have defined the alert: <v-alert v-if="this.show" type="error">Invalid email and/or password.</v-alert> Within the data ...

The v-select function organizes data based on the content of "item-text"

I created a v-select component using Vuetify, and I am wondering how I can sort the names of the items from largest to smallest within this v-select? <v-select v-model="selectedFruits" :items="fruits" label="Favorite Fruit ...

A guide on sorting JSON data with Javascript/jquery

I have a set of JSON data: {"X1":"3","X2":"34","Y1":"23","Y2":"23","Z1":"234","Z2":"43",...} My goal is to rearrange and group this data as follows: var newDataJson1 = { "X":{"X1":"3","X2":34}, "Y":{"Y1":"23","Y2":"23"}, ... } ALSO, I want to stru ...

Check out the new Bootstrap 5 form when it's successfully validated

I need to execute some JavaScript if my form is valid. I am using Bootstrap 5 and found this code, but I am unsure how to add 'if form.is_valid {}' <script> (function () { 'use strict' const forms = document.querySelectorAll(&apos ...

AngularJS: Error - Angular object is undefined

Hello! I am currently working on a project to develop a simple App using c# WebAPI and AngularJS. Unfortunately, I have encountered an error in the console which is preventing the web app from functioning properly. Here is a snippet of my Index.html file: ...

What is the best way to include the parameter set in the interceptor when making a post request?

-> Initially, I attempt to handle this scenario in the axios request interceptor; if the parameter is uber, then utilize a token. If the parameter is not uber, then do not use a token. -> Afterward, how can I specify uber as a parameter in the custo ...

Activate browser scrollbar functionality

Below is the HTML code snippet: <html> <head> <style> #parent { position : absolute; width : 500px; height : 500px; } #top { position : absolute; width : 100%; height: 100%; z-index : 5; } #bottom { position : absolute; width : 100%; ...

How to submit the next row using jQuery AJAX only when the previous submission is successful without using a loop - could a counter

Currently, I am dealing with loops and arrays. My goal is to submit only the table rows that are checked, wait for the success of an Ajax call before submitting the next row. Despite trying various methods, I have not been successful in achieving this yet. ...

The PHP application encountered an error when trying to use an object of the mysqli_result type as an array

In my section, I have a straightforward display of data sourced from the database. Upon clicking options like construction and selecting countries like Algeria, the displayed values are [251, 211,712]. Similarly, for selections like Power in Egypt, the ou ...

"Angular-chart is throwing an error with an undefined $scope.chart

I am having trouble creating a chart with an onClick event that can retrieve the label that was clicked. After searching, I found and modified a solution. Here is my code snippet: $scope.chart; $scope.onClick = function (points, evt) { console.log(po ...

PHP displaying incorrect value after modifying value in JavaScript

One issue I am facing is with an html page that submits a form through javascript. Prior to the submission of the form, I modify the value of a hidden tag, which should then be retrievable in php. However, when attempting to retrieve the value in php, it a ...

Guide on displaying a tooltip for an object in an Angular component using Bootstrap syntax

i have a data object structured like this var obj = {"test price type ty dynamic ": 10, test: 7, pricetype1u: 0, Price type 3: 0, Price type 2: 0} in my Angular component HTML, with Bootstrap styles applied, I've written the following code ...

I encountered an issue while using the tab bar feature in Bootstrap where I wasn't able to navigate back to the first tab or any

My current project involves JavaScript, and I integrated a Bootstrap tab bar component. However, when I try to run the code in Google Chrome, I encounter an issue. The first time I select the first tab, the content displays correctly. But when I select the ...

Implement a JavaScript and jQuery code that alternates between fading in and fading out every two items in a

Can someone help me figure out how to create a loop that fades in and out every 2 items from an unordered list using jQuery? I've been trying to do this, but my loop only processes one item at a time. <div> <ul> <li>item1</li ...