jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by Minko 12 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Multiple Modal Windows issue in IE8 Posts

July 9, 2012 at 5:13 am Multiple Modal Windows issue in IE8 #5763

DollyB

Member

Hi ,

I am trying to open two modal windows, one on each button click.
Requirement: On clicking Button1 in a jsp file, opens ModalWindow1 and in Modal Window1, on clicking Button2 ModalWindow2 opens up.

The following code is used to implement the requirement. But it works in Mozilla but not in IE8. In IE8, the ModalWindow1 gets disabled when Button2 is clicked but ModalWindow2 is not visible. Please suggest me the solution.

$(document).ready(function () {                   
	            var theme = $.data(document.body, 'theme', theme);
	            if (theme == undefined) theme = '';
	            addEventListeners();
	            createElements(theme);
	            $("#jqxWidget").css('visibility', 'visible');
	        });
function createElements(theme) {
	            $('#eventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 450, width: 750,
	                theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, autoOpen: false, showCollapseButton: true
	            });	   
	            $('#addFileEventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 300, width: 500,
	                theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, autoOpen: false, showCollapseButton: true
	            });
}
function addEventListeners() {
	            $('#showWindowButton').mousedown(function () {
	                $('#eventWindow').jqxWindow('show');
	            });	      
	            $('#addFileButton').mousedown(function () {
	            	$('#addFileEventWindow').jqxWindow('show');
	            });
}

<div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;" id="mainDemoContainer">
            <div id="eventWindow">
                <div> <mars:marstypeimage type="<%=bObj.getTypeName()%>" width="23" height="23" border="0" alt="View Object"/><font size="2"><B><I><%=bObj.getTypeName()%></I>:&nbsp;&nbsp;<%=bObj.getName()%>&nbsp;<%=bObj.getRevision()%>&nbsp;-&nbsp;<%=bObj.getAttributeValue(context, "Title", true)%></B></font></div>
                <div style="overflow: hidden;" id="windowContent">
                    <div id="tab1">
                        <ul style="margin-left: 30px;">
                            <li style="padding: 5px; height: 20px;">Details</li>
                            <li style="padding: 5px; height: 20px;">Attachments</li>
							<li style="padding: 5px; height: 20px;">Reports</li>
                        </ul>
                        <div>
						   <div id="jqxgrid"></div> 
                        </div>   
						<div>			
							<div style="height: 25px; padding: 5px;" class="jqx-widget-header">						        
						        <input type="button" value="Add File" style="float: left;" id="addFileButton"  />
						        <div style="margin-left: 5px; float: left;" id='jqxWidgetButton'></div>						        
						    </div>						
                            <div id="jqxgrid2"></div> 
                        </div>
						<div>
                             
                        </div>
                    </div>                    					
                </div> <!-- window content -->                
            </div> <!-- event winodw -->
            <div id="addFileEventWindow">
			  <div>Add File</div>
			  <div>
				<FORM name="addForm" method="post" enctype="multipart/form-data" action="">
			  <tr>
			    <td colspan="2" class="thheading">
			      <div style="height: 5px; padding: 5px;" class="jqx-widget-header">Add File</div>
			    </td>
			  </tr>
				  <tr>
					<td colspan="1" align="left">
						<div id='name'><font><B>Name: </B></font></div>            
					    	<div id='nameVal'><%=bObj.getName() %> </div>
					    <div id='type'><font><B>Type: </B></font></div>
					    	<div id='typeVal'><%=bObj.getTypeName() %></div>
					    <div id='format'><font><B>Format: </B></font></div>
					    	<div id='formatVal'></div><br/>
					    <div id='status' style="margin-right: 5px; float: right;"><IMG name="status" src=""></div>
					</td>		
			      </tr>
			      <tr>
					<td colspan="2" align="left">
			      		<div id='file'><font><B>File: </B></font></div>
					    <div id='name'>
							<input type="file" size="25" value="" style="margin-right: 5px;" name="file" />
						</div>
					</td>
			      </tr>
				  <tr>
				  <td colspan="2" align="right" height="70"></td>
				</tr>
			    <tr>
			      <td colspan="2" align="right">
			      <br/>
				      <input type="button" value="Close" style="float: right;" id="closeButton" onclick="javascript:window.close();" />
					  <input type="submit" value="Add File" style="margin-right: 5px; float: right;" id="addFileConfirmButton"  />	  
			      </td>
			    </tr>
			  </form>
			</div>
		 </div>                  
         </div> <!-- mainDemoContainer -->

July 9, 2012 at 6:02 am Multiple Modal Windows issue in IE8 #5765

Minko

Blocked

Hello DollyB,

we tried to reproduce your issue but unfortunately we could not. Please make sure you’re using the last version of jQWidgets and jQuery 1.7.2.
If you still have this issue after updating your JavaScript files let us know.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 9, 2012 at 6:11 am Multiple Modal Windows issue in IE8 #5766

DollyB

Member

Hi Minko,

I am using jQuery 1.7.2 .
Tell me whether it is possible to open another modal Window while a modal Window is already open?

Could you gimme an example matching my requirement?

July 9, 2012 at 6:55 am Multiple Modal Windows issue in IE8 #5767

Minko

Blocked

Hello Dolly,

here is example with your source code and little modifications:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        var theme = $.data(document.body, 'theme', theme);
        if (theme == undefined) theme = '';
        addEventListeners();
        createElements(theme);
        $("#jqxWidget").css('visibility', 'visible');
    });
    function createElements(theme) {
        $('#eventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 450, width: 750,
            theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, autoOpen: false, showCollapseButton: true
        });
        $('#addFileEventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 330, width: 500,
            theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, autoOpen: false, showCollapseButton: true
        });
    }
    function addEventListeners() {
        $('#showWindowButton').mousedown(function () {
            $('#eventWindow').jqxWindow('show');
        });
        $('#addFileButton').mousedown(function () {
            $('#addFileEventWindow').jqxWindow('show');
        });
    }
</script>
</head>
<body class='default'>
<div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;" id="mainDemoContainer">
    <input type="button" id="showWindowButton" value="Click me" />
            <div id="eventWindow">
                    <div>Header</div>
                    <div style="overflow: hidden;" id="windowContent">
                    <div id="tab1">
                        <ul style="margin-left: 30px;">
                            <li style="padding: 5px; height: 20px;">Details</li>
                            <li style="padding: 5px; height: 20px;">Attachments</li>
							<li style="padding: 5px; height: 20px;">Reports</li>
                        </ul>
                        <div>
						   <div id="jqxgrid"></div>
                        </div>
						<div>
							<div style="height: 25px; padding: 5px;" class="jqx-widget-header">
						        <input type="button" value="Add File" style="float: left;" id="addFileButton"  />
						        <div style="margin-left: 5px; float: left;" id='jqxWidgetButton'></div>
						    </div>
                            <div id="jqxgrid2"></div>
                        </div>
						<div>
                        </div>
                    </div>
                </div> <!-- window content -->
            </div> <!-- event winodw -->
            <div id="addFileEventWindow">
			  <div>Add File</div>
			  <div>
				<FORM name="addForm" method="post" enctype="multipart/form-data" action="">
                <table>
                  <tr>
                    <td colspan="2" class="thheading">
                      <div style="height: 5px; padding: 5px;" class="jqx-widget-header">Add File</div>
                    </td>
                  </tr>
                      <tr>
                        <td colspan="1" align="left">
                            <div id='name'><font><B>Name: </B></font></div>
                                <div id='nameVal'></div>
                            <div id='type'><font><B>Type: </B></font></div>
                                <div id='typeVal'></div>
                            <div id='format'><font><B>Format: </B></font></div>
                                <div id='formatVal'></div><br/>
                            <div id='status' style="margin-right: 5px; float: right;"><IMG name="status" src=""></div>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2" align="left">
                            <div id='file'><font><B>File: </B></font></div>
                            <div id='name'>
                                <input type="file" size="25" value="" style="margin-right: 5px;" name="file" />
                            </div>
                        </td>
                      </tr>
                      <tr>
                      <td colspan="2" align="right" height="70"></td>
                    </tr>
                    <tr>
                      <td colspan="2" align="right">
                      <br/>
                          <input type="button" value="Close" style="float: right;" id="closeButton" onclick="javascript:window.close();" />
                          <input type="submit" value="Add File" style="margin-right: 5px; float: right;" id="addFileConfirmButton"  />
                      </td>
                    </tr>
                </table>
			  </form>
			</div>
		 </div>
         </div> <!-- mainDemoContainer -->
</body>
</html>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 9, 2012 at 8:54 am Multiple Modal Windows issue in IE8 #5781

DollyB

Member

Hi Minko,

It doesn’t work for me.

July 9, 2012 at 9:27 am Multiple Modal Windows issue in IE8 #5782

Minko

Blocked

Hi DollyB,

try to clear your browser cache, make sure twice you’ve updated the files and try again.
Here is a screenshot based on your code showing two modal jqxWindows in IE8:

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.