Load jQuery Window Content with Ajax

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');
}
});
}
jquery-window-dynamic-content

About admin


This entry was posted in JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxWindow. Bookmark the permalink.



Leave a Reply