We Keep Coding

How to append an HTML tag which contains attributes in angular 8

I started to learn Angular recently and I just started to code a project which contains some articles.
Articles are passed from backend completely. (a thing like it)
<p onclick="function" name="itsName" data-info="data">text</p>
its tags and all attributes are saved in DB exactly like the mentioned example.
Now I am looking to show this data through angular.
[innerHTML] is the common way everyone uses. but it does not render tag's attributes. so my code is not working!
this.content="<div><h2 class='textAlignCenter' (click)='hello()' name='thisis' >"+id+"</h2><div>";
But it shows a thing like it after render :
<div><h2 class='textAlignCenter'>"+id+"</h2><div>
but I am looking to get a result like it.
<div><h2 class='textAlignCenter' (click)='hello()' name='thisis' >changed content - >333</h2><div>

What type of code is this? how/can I get javascript to recognize it?

I'm new to html and javascript, learning on the go to help update a website for the company i work for. The company does it through a browser program/interface called NETKIT / Adobe Business Catalyst. You can create pages for new projects which are called webapps and you can classify them to different groups for sorting, e.g. Water projects, Civil projects. Once you create a database of webapps, you can insert this line of code in html which will produce a thumbnail list of projects for which you've filtered for:
{module_webapps id="3388" resultsPerPage="20" filter="all" rowCount="3" template="/Templates/projectspage.tpl"}
So this code will show all projects in the database in rows of 3's, 20 results per page etc. It works fine when I insert it by itself in html, but I want to use it in javascript, however when i do it doesn't recognize the code and it doesn't show on the page.
For example:
html:
<div id="demo">
</div>
Script:
document.getElementById("demo").innerHTML = '{module_webapps id="3388" resultsPerPage="20" filter="all" rowCount="3" template="/Templates/projectspage.tpl"}'
I've tried with and without ' but nothing shows up within the div. If i replace the module_webapps code with simple text like = 'demo' then text shows up.
Does anyone know if its possible to include this code in a script? Or even better is it possible to create a html select/option with javascript that can change an internal piece of the code, e.g change filter="all" to filter="waterprojects"
Thanks for the help

JSF/Spring multiple sessions from one page - multi-tab interface

I am trying to add multiple-tabs capability to my JSF(facelets)/Spring/ application, something like OpenBravo already has (http://wiki.openbravo.com/w/images/9/9c/WIK_PartsOfScreen.png, but their app is using different technologies - I guess - pure JavaScript for GUI): each document or report can be opened in separate JavaScript tabs.
Bascially it is simple - each document or report is separate JSF region and only one of them is made visible. Tabs are only visual effect.
The problem is communication with JSF backing beans (or Spring beans that sometimes can be employed in this role). E.e. is is simple for one tab interface: one can create the following bean:
class BankDocumentServiceBean {
BankDocument selectedDocument;
Long id;
void setId(Long id) {
if (selectedDocument.id!=id) {
setupBankDocument(id);
}
}
void setupBankDocument(Long id) {...}
BankDocument getBankDocument() {...}
...
}
And BankDocument JSF page can be something like this:
...
<f:metadata> <!-- page is called with parameter id and this code calls setId(...) -->
<f:viewParam name="id" value="#{bankDocumentServiceBean.id}"/>
</f:metadata>
<h:body>
...
<!-- p for Primefaces -->
<p:inputText id="amountTxt"
value="#{bankDocumentServiceBean.selectedDocument.amount}"
required="true" label="amountLbl"/>
<p:message for="amountTxt" />
...
Is this approach generally good?
The main question is - how this single-document approach can be extended to multiple tabes. JSF code can be included in the page dynamically, but the service bean remains the problem. Use of additional parameters in each call can be solution - e.g. BankDocumentServiceBean can contain not single BankDocument but List of BankDocuments and each opearation (e.g. getBankDocument) can have additional identifier for selection the right bean from the collection, i.e., the bean that is relevant for the tab with which the user interacts.
But maybe there is some better approach. E.g. maybe one page can be multiple instances of the old good single-document BankDocumentServiceBean. Maybe there are less coarse scopes (JSF scopes and Spring scopes) that are good for tabs, some kind of conversation scope?
Each tab is sitting in its own general panel (div) with its distinct id. Maybe JSF/Spring application can detect that request is coming from distinct panel/div and select instance of BankDocumentServiceBean accordingly?
I guess - solution with List and parameters will work, but maybe there is better architecture for this? Thanks!

Not a complete a solution but a good starting point for handling multiple browser tabs in a jsf web application:
A very good read in dealing with multiple tabs: http://myfaces.apache.org/orchestra/myfaces-orchestra-core/multiwindow.html
I also recommend Apache Codi scopes for this.

partials like rails has only done in pure javascript, and purely on the clients side. --I.E. no servers

I'm working on a little home brew project and I've found I've been spoiled by working with RoR and more specifically RoR partials.
My project is entirely client side. So I'm using javascript and HTML5. Now what I would like to do is this: have a home screen template with a container in which I could do something like the
classic <%= yeild %> tag does in RoR.
I have thought about using iframes but that seems messy. I have also thought about using xmlHTTP requests to get the file in my javascript and then update the innerHTML of my content div with the file stream. I have done this before for personal projects, but it's hacky and I have to flag browsers like Chrome with a --allow-file-access-from-files tag. Which obviously I can't advise end users to do.
My other thought was to write the html as a javascript string, and then just put different strings as the value of content.innerHTML but this sounds stupid hard to maintain and just not clean at all.
Ultimately I am even up for writing my own solution (which I would then post here as the answer for anyone else looking) but I wanted to know if there was already a solution out there.
The ultimate end goal behavior would follow this flow:
Main_page:
<div id="main_content">
<!-- this is the yield area -->
</div>
App starts and the file menu.html is loaded into the yield area:
<div id="main_content">
<!-- this is the content of menu.html, notice it's like a partial,
there is no body or head or doc type tags, just a list -->
<ul>
<li>Menu item</li>
</ul>
<!-- this is the end of the menu.html content -->
</div>
And finally when they click on Menu item it loads the contents of menu_item.html into the content div replacing the current content (menu.html).
Some research I already did:
Div like an iframe?
Div src attribute plugin (looks interesting but runs on webserver)
Stack question about updating div with javascript
Found a link somewhere that led to Pure This looks like it could do the trick, but seems like it would be difficult to implement for a lot of content (since I don't have anything generating the json, I would have to do it all by hand.)
This talks about the seamless attribute of iframes, looks promising but only chrome has implemented and even then its bugs have been abandoned.See here for status of webkit development of the seamless attribute.

If you're using jQuery, you could use jQuery.load(): http://api.jquery.com/load/
Example:
$("#main_content").load("menu_item.html");

If you're worried about the safety of the <div> (which is a good thing to be worried about), then what you'd be better off doing is using an intermediary <div> which is not attached to the DOM.
function parse_html (html) {
var div = document.createElement("div");
div.innerHTML = html;
var scripts = div.getElementsByTagName("script"),
i = scripts.length;
while (i > 0) {
div.removeElement(scripts[i]);
i -= 1;
}
return div.firstChild;
}
Then if you grabbed an HTML file via XHR:
var xhr = new XMLHttpRequest();
xhr.open("GET", "/templates/menu.html", true);
You could put your var child_el = parse_html(xhr.responseText); in your XHR callback.
Then just append that element to your div.
That function is assuming that your partial has one root element (assuming that you could have multiple back-to-back partials, but each template would start from a single element.
If that's not the case, then you'd create a document fragment in the function (document.createDocumentFragment();) and append each of the elements in order, to the fragment, returning the fragment at the end of the function, which you would then append to the div (of course, this would make managing the nodes inside the div that much harder, after the fact).
I'm doing something similar to this for a few pet projects, using a simple template system built on {% %} for injecting data-properties ({% item.title %}) or arbitrary JS/return values from functions, within the html.
This is only a basic implementation, and there are lots of things you could do with this...
Supporting arbitrary nesting levels, for templates inside of templates is going to be more work.

how to re-factor/extract methods to separate file for re-use

I'm fairly new to the whole JQuery/javascript world, but I've managed to wack together a working jqgrid with a datepicker & custom control (used jquery auto complete) based on code samples i found on the net. I've added the code to a T4 template in my project as it'll probably act as a base/starting point for most pages. (Side note. I'm using asp.net MVC)
JFIDDLE: LINK
1.) I'd like to move the initDateEdit & initDateSearch to the same function (using a parameter, to disable/enable the showOn property) as they are basically similar.
2.) How would be the best way to set nonWorkingDates from outside the new function/file. same applies to the autocomplete_element (I'd like to specify the url)
Changing
"function nonWorkingDates(date)" to => "function nonWorkingDates(date, nonWorkingDates)"
isn't working, (guess it's got got something to do with how its gets called "beforeShowDay: nonWorkingDates")
Thanks in advance!

If you have a chunk of JS code like this:
<script type="text/javascript">
... code goes here ...
</script>
You simply copy the whole thing, eliminate the containing script tags, and save the raw code
... code goes here ...
to a file, which you then include with:
<script type="text/javascript" src="yourfile.js"></script>
However, since you're using jquery, you'll have to make sure that this above snippet is placed AFTER the script tag that loads up jquery, or you'll get a "no such function" syntax error.