javascript - Document.write not capturing values - Angularjs project -
the code below tries copy part of the page, form without buttons new document. once done, aim print() it.
the problem .write() not capturing content/values of form html tags. fields copied , empty.
i wonder because i'm using angular inherit $scope , ng-model functionality document.write cannot handle?!
the form want print has tag <form name="ticketform" id="printform" class="form-horizontal" novalidate>
and button initiate call
<button type="button" class="btn btn-primary" ng-click="printelem()" > print </button> the js files . mind had shenanigans of adding header , other elements piece piece since want remove table, buttons among other things. want print form still remain css.
$scope.printelem = function(){ $log.info("i'm here"); //popup($(elem).html().print()); var elem = document.getelementbyid("printform"); $log.info(elem); var pwindow= window.open('', 'printform', 'height=800,width=600'); pwindow.document.write('<html ng-app="helpdeskapp0" class="ng-scope"><head><style type="text/css">@charset "utf-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}</style>'); //window.print(); pwindow.document.write('<link href="css/bootstrap.css" rel="stylesheet" type="text/css">' + '<link href="css/ashraf.css" rel="stylesheet" type="text/css">' + '<link href="css/json-tree.css" rel="stylesheet" type="text/css">' + '<link href="css/loading-bar.css" rel="stylesheet" type="text/css">' + '<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">' + '<link href="css/dx.common.css" rel="stylesheet" type="text/css">' + '<link href="css/dx.light.css" rel="stylesheet" type="text/css">'); pwindow.document.write('<script src="lib/jquery-2.1.4.js"></script>' + '<script src="lib/angular.min.js"></script>'+ '<script src="lib/angular-sanitize.js"></script>'+ '<script src="lib/angular-resource.js"></script>'+ '<script src="lib/globalize.min.js"></script>'+ '<script src="lib/ui-bootstrap-tpls.js"></script>'+ '<script src="lib/angular-route.js"></script>'+ '<script src="lib/bootstrap.js"></script>'+ '<script src="lib/dx.all.js"></script>'+ '<script src="js/app.js"></script>'+ '<script src="js/controllers.js"></script>'+ '<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">'+ '<meta name="apple-mobile-web-app-capable" content="yes">'+ '<meta name="apple-mobile-web-app-status-bar-style" content="black"> </head>'); pwindow.document.write('<body><nav class="panel panel-primary"> <!-- navbar navbar-default-->'+ '<div class="container-fluid">'+ '<!-- brand , toggle grouped better mobile display -->'+ '<div class="menubar" role="navigation">'+ '<div class="">'+ '<div class="menubar-content-left">'+ '<a><img src="images/mgpi.png" height="50" width="50"> <b style="color: #428bca">mgpi - beta version</b></a>'+ '</div> '+ '</div>'+ '</div>'+ '<!-- collect nav links, forms, , other content toggling -->'+ '<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">'+ ' <ul class="nav navbar-nav">'+ '<li><a href="#/home">help desk</a></li>'+ '</ul> '+ '</div><!-- /.navbar-collapse -->'+ '</div><!-- /.container-fluid -->'+ '</nav>'+ '<!-- ngview: --><div ng-view="" class="container-fluid ng-scope"><div ng-controller="homecontroller" class="ng-scope">'+ '<div class="container bs-docs-container"> '+ '<div class="row"> '+ '<div class="row margin-top">'+ '<br>'+ '</div>'+ '<div class="row margin-top margin-left">'+ '<div class="col-sm-12 top-buffer">'); pwindow.document.write('<div class="well well-lg" style="height: 250vh; background-color:#add8e6">'+ elem.innerhtml + '<br></div> </div></div></div> </div></div></div></body></html>'); $log.info(pwindow.document); //pwindow.print(); //pwindow.close(); }; i tried multiple ways elem.innerhtml, elem.value etc none capture value of fields. form written , printed empty values although original form has values. here screen shot. ideas why? , thanks! 
my first comment bit rude. apologize. in defense, it's in morning , i've run out of milk make more coffee. :-(
i think approach better if just:
- created new route printing.
- set new partial or page template. can create service pass current form values new page via resolve property on route.
- your print function in controller simple like:
window.open('http://yourbasesite/print/123abc');
this type of approach easier maintain , test (and have admit, it's way prettier).
that said, wouldn't surprised if still had issues race conditions. using window.open - window.print - window.close, have no context of angular. when generate page , let's takes few milliseconds page render fully, window may in closed state. if you're committed approach, may consider changing button on base page read "print preview" , add separate print button on pop window window.print - window.close part.
Comments
Post a Comment