How to display the portlet of other jsp on to popup in some othe portlet?

in view.jsp of first portlet:

<%@ taglib uri="http://liferay.com/tld/theme" prefix="theme"%>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>

<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>

<%@ page import="com.liferay.portal.util.*" %>

<portlet:defineObjects/>

<theme:defineObjects/>

<%

String url ="http://localhost:8080/web/guest/create-course?p_p_id=course_WAR_courseportlet&p_p_lifecycle=0&p_p_state=exclusive&p_p_mode=view&p_p_col_id=column-2&p_p_col_count=1&_course_WAR_courseportlet_jspPage=%2Fhtml%2Fcourse%2Fedit.jsp";

//the above url is the which jsp u want to display on to popup page

%>

<liferay-portlet:renderURL

    var="testPopupURL"

    portletName="course_WAR_courseportlet" //name of the other portlet jsp

    windowState="<%=LiferayWindowState.POP_UP.toString() %>">

</liferay-portlet:renderURL>

<a href="#" onClick="openCoursePopup()">another portlet popup url</a>

 <script type="text/javascript">

    function openCoursePopup()

    {

     

        AUI().use('aui-dialog', 'aui-io', 'event', 'event-custom', function(A) {

            var dialog = new A.Dialog({

                    title: 'course portlet',

                    centered: true,

                    draggable: true,

                    modal: true,

                    width: 300,

                    height: 300,

                }).plug(A.Plugin.IO, {uri: '<%=url%>'}).render();

            dialog.show();

        });

  }

</script>