Search code examples
javascriptjquerybackbone.jswindow.open

Creating new windows when using backbone.js and jQuery

Currently I create a dialog box using jQuery and populate it using backbone like this:

$("#" + dialogID ).html(new MyView({model: MyModels}).el);


$( "#" + dialogID ).dialog({ width: 950,
                           height: 500,
                           autoOpen: true, 
                           dialogClass: dialogID,
                           position: { my: "center", at: "center", of: window },
                           close: function( event, ui ){  
                                                          $(this).remove();
                                                        },
                           title: "My dialog"
                          });

All I want to do is make this a new window so users can move it around more liberally, so I tried:

var w = window.open();
var html = $("#" + dialogID).html();
$(w.document.body).html(new MyView({model: MyModels}).el);

This almost works. I lose my styles and some functionality is lost. Can someone suggest how to fix this snippet so that my styles and functionality is restored? (e.g. my data table styles are gone and some interaction with the elements in the original window).

Thanks!

Solution

  • I can suggest you two possible solutions:

    1. Create a new route in your application back end which will generate html page with just needed scripts and styles. And after it do the same as you have done but change winsow.open('yournewroute').

    2. Use method described here. In plain javascript it looks like

    var w = window.open('');
w.document.write('<html><head><title>Dialog</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
w.document.write(new MyView({model: MyModels}).el);
w.document.write('</body></html>');

    You could do it with jQuery as well.

    Hope it helps.

    Update

    Selecting all javascript's import tags in document:

    var $javascriptTags = $('script[type="text/javascript"]');
$(w.document.head).append($javascriptTags);

    Same with stylesheets:

    var $stylesheetTags = $('link[rel="stylesheet"]');
$(w.document.head).append($stylesheetTags);