<span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 13px; border-collapse: collapse; ">Hi,<br><br>I am currently working on some elaborate jquery plugin projects with a lot of custom javascript generation. But i find it very difficult to check if the generated javascript is correct in firebug, because it appears all on one line. <br>
<br>Is there a special javascript stream which does all the formatting?<br><br>For instance, i am currnetly porting the squak jqgrid plugin to visual works and I am adding the editing functionality to it. <br><br>I end up with strings like this:<br>
<br>/*<![CDATA[*/function onLoad(){$("#grid").jqGrid({datatype:"json",url:"/jqgrid?_s=djvP-IcmhCV41XX9&_k=F3dJxyNWd7_KXQ8C&1",editurl:"/jqgrid?_s=djvP-IcmhCV41XX9&_k=F3dJxyNWd7_KXQ8C&2",viewrecords:true,height:"100%",onSelectRow:function(id){if(id && id!==lastsel){ $("#grid").jqGrid("restoreRow",lastsel); $("#grid").jqGrid("editRow",id,true); lastsel=id;} },colNames:["Inv No.","Date","Client","Amount","Tax","Total","Notes"],colModel:[{index:"id",name:"id",width:70},{index:"invdate",name:"invdate",editable:true,width:110},{index:"name",name:"name",editable:true,width:100},{index:"amount",name:"amount",align:"right",editable:true,width:100},{index:"tax",name:"tax",align:"right",editable:true,width:80},{index:"total",name:"total",align:"right",editable:true,width:80},{index:"note",name:"note",editable:true,sortable:false,width:150}],altRows:true,rowNum:10,rowList:[10,20,40,100],pager:"pager",sortname:"id",caption:"JSON Example"})}/*]]>*/<br>
</script><br></body><br><br>But I would like to end up with something like this (generated by <a href="http://jsbeautifier.org/" target="_blank" style="color: rgb(7, 77, 143); ">http://jsbeautifier.org/</a>)<div>
<br></div><div><br><div><div>function onLoad() {</div><div> $("#grid").jqGrid({</div><div> datatype: "json",</div><div> url: "/jqgrid?_s=djvP-IcmhCV41XX9&_k=F3dJxyNWd7_KXQ8C&1",</div>
<div> editurl: "/jqgrid?_s=djvP-IcmhCV41XX9&_k=F3dJxyNWd7_KXQ8C&2",</div><div> viewrecords: true,</div><div> height: "100%",</div><div> onSelectRow: function (id) {</div>
<div> if (id && id !== lastsel) {</div><div> $("#grid").jqGrid("restoreRow", lastsel);</div><div> $("#grid").jqGrid("editRow", id, true);</div>
<div> lastsel = id;</div><div> }</div><div> },</div><div> colNames: ["Inv No.", "Date", "Client", "Amount", "Tax", "Total", "Notes"],</div>
<div> colModel: [{</div><div> index: "id",</div><div> name: "id",</div><div> width: 70</div><div> },</div><div> {</div><div> index: "invdate",</div>
<div> name: "invdate",</div><div> editable: true,</div><div> width: 110</div><div> },</div><div> {</div><div> index: "name",</div><div> name: "name",</div>
<div> editable: true,</div><div> width: 100</div><div> },</div><div> {</div><div> index: "amount",</div><div> name: "amount",</div><div> align: "right",</div>
<div> editable: true,</div><div> width: 100</div><div> },</div><div> {</div><div> index: "tax",</div><div> name: "tax",</div><div> align: "right",</div>
<div> editable: true,</div><div> width: 80</div><div> },</div><div> {</div><div> index: "total",</div><div> name: "total",</div><div> align: "right",</div>
<div> editable: true,</div><div> width: 80</div><div> },</div><div> {</div><div> index: "note",</div><div> name: "note",</div><div> editable: true,</div>
<div> sortable: false,</div><div> width: 150</div><div> }],</div><div> altRows: true,</div><div> rowNum: 10,</div><div> rowList: [10, 20, 40, 100],</div><div> pager: "pager",</div>
<div> sortname: "id",</div><div> caption: "JSON Example"</div><div> })</div><div>}</div></div></div><div><br></div><div>Is that possible? </div><div><br></div><div>I could add the extra tab's and linefeeds to the stream functions in the JSStream but I am hoping that there might already be an implementation that beautifies javascript (Like the WAPrettyPrintDocument used by the Halo's (would be great if that could be the default writer as well ;-) )).</div>
<div><br></div><div>Regards,</div><div><br></div><div>Bart Veenstra</div></span>