In this post, we will demonstrate how to dynamically set the jqxWindow’s content.
1. Create the HTML structure for the jqxWindow widget. The content will be loaded in the second nested DIV tag.
<div id="window"> <div>Window</div> <div> </div> </div>
2. Initialize a new instance of the jqxWindow and call a function called changeContent which will dynamically load a new content into the Window.
$(document).ready(function () { $("#window").jqxWindow({ width: 300, height: 150 }); changeContent('https://api.twitter.com/1/statuses/user_timeline.json?screen_name=jqwidgets&count=1', $('#window')); });
3. Implement the changeContent function. The function makes an Ajax request and sets the window’s content. Until the content is loaded, the jqxWindow displays a ‘Loading…’ message.
function changeContent(url, window) { window.jqxWindow('setContent', 'Loading...'); $.ajax({ dataType: 'jsonp', url: url, success: function (data) { window.jqxWindow('setContent', data[0].text); }, error: function () { window.jqxWindow('setContent', 'Error'); } }); }