jQWidgets Forums

Tagged: window

This topic contains 7 replies, has 4 voices, and was last updated by gustavo 10 years ago.

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

Author

Dynamic modal window Posts
May 31, 2013 at 5:45 pm Dynamic modal window #22291

kc
Participant

How do I create a Modal window dynamically?

Basically, I do not want to create any HTML

I just want to call the jqxWindow object to dynamically construct and open a modal window.

June 1, 2013 at 3:27 am Dynamic modal window #22318
Peter Stoev
Keymaster
Hi,

Here’s a sample which dynamically adds a Modal Window.
```
<!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.8.3.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">
        $(document).ready(function () {
            var window = $("<div><div>Title</div><div>Content</div></div>");
            window.appendTo(document.body);
            window.jqxWindow({ isModal: true });
        });
    </script>
</head>
<body class='default'>
   
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
June 3, 2013 at 6:28 pm Dynamic modal window #22460

kc
Participant

Can you give an example how to create a dynamic window without having to append HTML code to the document.body

June 4, 2013 at 5:00 am Dynamic modal window #22469

Peter Stoev
Keymaster

Hi,

To create a Window, you should have the required HTML Elements – Container DIV tag and two nested DIV tags – for header and content. There is no other way to dynamically create a window except the one I suggested you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

April 23, 2015 at 10:56 am Dynamic modal window #70178
dima72
Participant
Dear Peter,

I’m creating Window dynamically On Button Click like this
```
var window = $("<div id='jqxModal'><div>Title</div><div>Content</div><br/><br/></div><div><div id='jqxMyCheckBox'>MyCheckBox</div></div>");
window.appendTo(document.body);
$("#jqxModal").jqxWindow({ isModal: true,  initContent: function () { $("#jqxMyCheckBox").jqxCheckBox({ width: 120, height: 25}) }  });
$("#jqxModal").jqxWindow('open');
```
can you please suggest, why jqxMyCheckBox is not initialized?
I have window showed but without checkbox.

thanks,
April 23, 2015 at 11:37 am Dynamic modal window #70186

Peter Stoev
Keymaster

Hi dima72,

Because your Window is with Invalid HTML Structure. I would suggest you to take a look at the Window’s demos online and Getting started help topics. It requires 2 nested DIV tags – one for Title and another for content. Your Window’s HTML contains additional DIV tags, BR tags and so on.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

April 23, 2015 at 11:41 am Dynamic modal window #70188

dima72
Participant

Ops..
I apologies for mistake in my HTML content. It must be:

<div id='jqxModal'><div>Title</div><div>Content <div id='jqxMyCheckBox'>MyCheckBox</div> </div><br/><br/></div><div></div>

well, I have noticed that state of checkbox is remembered every time form is closed, so I guess from is not freed in memory of browser,
since window.appendTo(document.body) is done;

Can somebody suggest a correct way to release form?

thanks,

May 28, 2015 at 8:30 pm Dynamic modal window #71752

gustavo
Participant

I’m trying to using the jqxWindow to display About info, without actually leaving the current page. The app is MVC 5 and I tried the approach Peter posted in June 1, 2013 at 3:27 am, but the problem I’m having is that makes a post to the About page leaving the current page once the popup displays.

Is there a way to display a jqxWindow popup based on a ajax call to the controller to get the view html rendered without leaving the current page?

Please need some guidance.

Thanks
Gus
Author

Posts

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

You must be logged in to reply to this topic.