jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by edwardsmarkf 10 years, 10 months ago.

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

Author

using navigationBar inside of jqxWindow Posts
August 21, 2014 at 2:24 pm using navigationBar inside of jqxWindow #58626

edwardsmarkf
Participant

hello all –

i am trying to incorporate the fantastic navigation widget inside of a window. it works great when initially loaded, but when reloaded it stops working:

http://jsfiddle.net/edwardsmarkf/khxee0ee/

any suggestions?

thank you.

example code below:

var basicDemo = (function () {
function _addEventListeners() { };
function _createElements() { };
function _createWindow() {
$(‘#window’).jqxWindow({
showCollapseButton: true, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500,
initContent: function () {
$(‘#window’).jqxWindow(‘focus’);
}
});
};
return {
config: {
dragArea: null
},
init: function () {
_createElements();
_addEventListeners();
_createWindow();
}
};
} ());
$(document).ready(function () {
//Initializing the demo
basicDemo.init();
navigationBar();
});

function navigationBar() {
$(‘div#windowContentEmbedded’).html( $(‘div#jqxNavigationBar’).html() );
$(“div#windowContentEmbedded”).jqxNavigationBar({ width: 400, });
}
</script>
</head>
<body class=’default’>
<input type=”button” value=”replace original contents” onclick=’navigationBar();’ />
<div id=”jqxWidget”>
<div id=”window”>
<div id=”windowHeader”>
window header
</div>
<div style=”overflow: hidden;” id=”windowContent”>
<div id=’windowContentEmbedded’>
this is marks test
</div>
</div>
</div>
</div>
<div style=’display: none; visibility: hidden;’ id=’jqxNavigationBar’>
<div>part one header</div>
<div>part one body<br />more part one body</div>
<div>part two header</div>
<div>part two body<br />more part two body</div>
<div>part three header</div>
<div>part three body<br />more part three body</div>
</div>
</body>

August 21, 2014 at 8:15 pm using navigationBar inside of jqxWindow #58636

Peter Stoev
Keymaster

Hi edwardsmarkf,

Sorry, but I don’t understand why you try to do this. You cannot call html() method and expect that the widget will work again when you replaced its entire HTML. If you want to recreate a widget for some unknown reason, the process is – destroy the widget, add its DOM structure again and create the widget.

Best Regards,
Peter Stoev

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

August 21, 2014 at 9:48 pm using navigationBar inside of jqxWindow #58651

edwardsmarkf
Participant

ok that worked – thank you very much.

i am using a temporary widget in a variable and not trying to use any other widgets now to get it working:

http://jsfiddle.net/edwardsmarkf/excwktpx/

any suggestions or improvements are most welcome.

August 21, 2014 at 9:58 pm using navigationBar inside of jqxWindow #58653

edwardsmarkf
Participant

working navigation bar inside of window:
http://jsfiddle.net/edwardsmarkf/khxee0ee/
Author

Posts

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

You must be logged in to reply to this topic.