CODEWITHSUNDEEP
jspstruts2strutsjquery-ui-dialogstruts2-jquery
Hasan K
Hasan K

Reputation: 600

How to show <sj:select> in jQuery dialog

I have a scenario where upon clicking a button, I open a jQuery dialog which renders a JSP (Struts) form through Ajax call as shown below.

This form has a <sj:select> tag which receives entries from a object List. The list is populating correctly but it does not show up on the dialog instead it shows on the parent JSP page from where I open the dialog.

Here's my parent JSP code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

$("#mydialogpopup").click(function(){
     $.ajax({
        url : "popupAjax.action",
        success : function(response) { 
            $("#form_add").html(response);
         $("#form_add").dialog('open');
        }
 });
 });
     $("#form_add").dialog({autoOpen: false, 
         modal: true,
         width: 450,
        height: 280
     });

</script>


<a href="#" id="mydialogpopup" class="isw-plus"></a>

<div class="newdialog" id="form_add" style="display: block;" title="My Dialog"></div>

Here's the code of my popup.jsp page which is rendered as a successful result of Ajax call:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
 <%@ taglib  uri="/struts-tags" prefix="s"%>      
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<html>
<head>
<sj:head/>
 <link href="jsp/css/stylesheets.css" rel="stylesheet" type="text/css" />
</head>
  
  <s:form id="userForm" action="" method="post" >
    
  <s:url id="remoteurl" action="listUser"/>                         
                            <sj:select
                            href="%{remoteurl}"
                            id="echo3"
                            cssStyle="width: 100%;"
                            name="echo" 
                            list="userList" 
                            listKey="id" 
                            listValue="name"
                            autocomplete="true"
                            emptyOption="true"
                            headerKey="-1" 
                            loadMinimumCount="2"
                            headerValue="Please Select a User" />
    
    <sj:submit targets="result" id="savedialog" value="Save" validate="true"/>&nbsp; &nbsp; <input type="button" id="closedialog" value="Cancel"/>
    
    </s:form>

Upvotes: 1

Views: 727

Answers (1)

Roman C
Roman C

Reputation: 1

Don't load jQuery library twice on the same page. First time you load it with 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

the second time you load it with

<sj:head/>

Also you should not use these tags on the rendered page

<html>
<head>
<sj:head/>
 <link href="jsp/css/stylesheets.css" rel="stylesheet" type="text/css" />
</head>

The page that you render is not a full html page, but a part of it, and you should render only tags that are suitable for the parent tag's body. Because you render to the div tag it's position is defined by the CSS style and could be floating out of the dialog. Make sure you use position: relative style.

Upvotes: 0

Related Questions