I am trying to add a <div class="wrapper"> to my generated html after the body tag. I want the ending </div> to be before the ending </body>. So far I have
private String addWrapper(String html) {
Document doc = Jsoup.parse(html);
Element e = doc.select("body").first().appendElement("div");
e.attr("class", "wrapper");
return doc.toString();
}
and I am getting
</head>
<body>
</head>
<p>Heyo</p>
<div class="wrapper"></div>
</body>
</html>
I also can't figure out why I am getting "</head>" in the html too. I only get it when I use JSoup.
Jsoup Document normalizes the text with normalise method. The method is here in Document class. So It wraps with and tags.
In Jsoup.parse() method it can take three parameter, parse(String html, String baseUri, Parser parser);
We will give the parser parameter as Parser.xmlParser which is using XMLTreeBuilder (Otherwise it uses HtmlTreeBuilder and it normalises html.).
I tried, latest code (it may be optimize) :
String html = "<body></head><p>Heyo</p></body>";
Document doc = Jsoup.parse(html, "", Parser.xmlParser());
Attributes attributes = new Attributes();
attributes.put("class","wrapper");
Element e = new Element(Tag.valueOf("div"), "", attributes);
e.html(doc.select("body").html());
doc.select("body").html(e.toString());
System.out.println(doc.toString());
Related
I have several pages on a website that use the same header for each page. I was wondering if there was some way to simply reference a file with the html for the header sort of like in this pseudo code:
<!-- Main Page -->
<body>
<html_import_element src = "myheadertemplate.html">
<body>
Then in a separate file:
<!-- my header template html -->
<div>
<h1>This is my header</h1>
<div id = "navbar">
<div class = "Tab">Home</div>
<div class = "Tab">Contact</div>
</div>
</div>
This way I could write the header html once and just import it in each of my pages where I need it by writing one simple tag. Is this possible? Can I do this with XML?
You could do it in this fashion below.
<head>
<link rel="import" href="myheadertemplate.html">
</head>
where you could have your myheadertemplate.html
<div>
<h1>This is my header</h1>
<div id = "navbar">
<div class = "Tab">Home</div>
<div class = "Tab">Contact</div>
</div>
</div>
You can then use it with JS below
var content = document.querySelector('link[rel="import"]').import;
So, after a long time I actually found a way to do this using AJAX. HTML Imports are a great solution, but the support across browsers is severely lacking as of 04/2017, so I came up with a better solution. Here's my source code:
function HTMLImporter() {}
HTMLImporter.import = function (url) {
var error, http_request, load, script;
script =
document.currentScript || document.scripts[document.scripts.length - 1];
load = function (event) {
var attribute, index, index1, new_script, old_script, scripts, wrapper;
wrapper = document.createElement("div");
wrapper.innerHTML = this.responseText;
scripts = wrapper.getElementsByTagName("SCRIPT");
for (index = scripts.length - 1; index > -1; --index) {
old_script = scripts[index];
new_script = document.createElement("script");
new_script.innerHTML = old_script.innerHTML;
for (index1 = old_script.attributes.length - 1; index1 > -1; --index1) {
attribute = old_script.attributes[index1];
new_script.setAttribute(attribute.name, attribute.value);
}
old_script.parentNode.replaceChild(new_script, old_script);
}
while (wrapper.firstChild) {
script.parentNode.insertBefore(
wrapper.removeChild(wrapper.firstChild),
script
);
}
script.parentNode.removeChild(script);
this.removeEventListener("error", error);
this.removeEventListener("load", load);
};
error = function (event) {
this.removeEventListener("error", error);
this.removeEventListener("load", load);
alert("there was an error!");
};
http_request = new XMLHttpRequest();
http_request.addEventListener("error", error);
http_request.addEventListener("load", load);
http_request.open("GET", url);
http_request.send();
};
Now when I want to import HTML into another document, all I have to do is add a script tag like this:
<script>HTMLImporter.import("my-template.html");</script>
My function will actually replace the script tag used to call the import with the contents of my-template.html and it will execute any scripts found in the template. No special format is required for the template, just write the HTML you want to appear in your code.
As far as I know it's not possible. You can load the header as a webpage in a iframe element though. In the past webpages were built with frame elements to load seperate parts of a webpage, this is not recommended and support in current browsers is due to legacy.
In most cases this is done with server side languages like php with as example include("header.php");.
I am having a one single row with text with HTML-tags. Example.
html_string = '<!DOCTYPE html><html><body> <h1> My First Heading</h1> <p> My first paragraph.</p> </body> </html> '.
I want to give the value of html_string back as a formatted HTML text like that:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Best would be in a popup. Anyone got any idea? Best would be a function module or so. I've been looking around for some while but I have not found anything which fits my requirements.
I just found exactly what I needed. This might help any future programmers:
https://help.sap.com/doc/abapdocu_750_index_htm/7.50/de-DE/abenstring_function_escape_abexa.htm
REPORT demo_escape_html.
CLASS demo DEFINITION.
PUBLIC SECTION.
CLASS-METHODS main.
ENDCLASS.
CLASS demo IMPLEMENTATION.
METHOD main.
DATA: body TYPE string,
esc_body TYPE string.
body = `<table border> `
&& `<tr><td>11</td><td>12</td></tr> `
&& `<tr><td>21</td><td>22</td></tr> `
&& `</table>`.
esc_body = escape( val = body
format = cl_abap_format=>e_html_text ).
cl_demo_output=>new(
)->begin_section( 'Original text'
)->write_text( body
)->next_section( 'Original text formatted as HTML'
)->write_html( body
)->next_section( 'Escaped text'
)->write_text( esc_body
)->next_section( 'Escaped text formatted as HTML'
)->write_html( esc_body
)->display( ).
ENDMETHOD.
ENDCLASS.
START-OF-SELECTION.
demo=>main( ).
If the HTML is XHTML (XML-compatible), then you may display it like any other XML, and the integrated Windows browser will automatically indent the XML levels:
DATA l_xml TYPE string.
cl_abap_browser=>show_xml( xml_string = l_xml title = 'text' ).
If the HTML is not XHTML, there's no SAP program which interprets "begin-end" tags (like <br>, <li>, etc.)
In trying to fine-tune the appearance of my Web API page, I'm making changes to CSS classes, and adding new classes, to \Content/Site.css, yet they do not alter the appearance of the page as they should, even when I append "!important" to specific rules.
For example, I added a horizontal rule to the page, which does show up, but quite unobtrusively (with a faint, barely discernible line). So I added this .css class to Site.css:
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
...which works just fine in another project, but doesn't in this one. The line remains faint even when I append "! important" to the "height" rule there:
height: 1px !important;
I tried right-clicking the page at runtime and selecting "Reload Page" but that made no difference, either.
Other CSS changes (margins and paddings) are not having any effect, either; this is just one specific case whose resolution should work for all of them.
What do I need to do to get modified/added CSS rules to be applied?
UPDATE
Even when I, acquiescing to Algernop K's suggestion, change the code from this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr />");
. . .
...to this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style=\'size:4;\' />");
. . .
...(adding "; margin-top:48;" to the h1 element, and "size" to the hr), no change is evident.
UPDATE 2
A "funny" thing happened on the way to the Inspecting of Elements. As Chris W suggested, I right-clicked the hr element on the page, but it's so miniscule that I may have got a different element to inspect. Nevertheless, an err msg in the console may be revealing the basic problem - there it says, "bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery"
UPDATE 3
Should I explicitly add my \Content\Site.css file to the html? I tried dragging it from Solution Explorer below the lines shown above, hoping it would generate the correct code, but instead it gave me:
C:\Projects\ProActWebReports\ProActWebReports\Content\Site.css
...and a prompt to add "'System.Security.Policy.Site' and all other references in file"
Note that I have a related question here
UPDATE 4
FWIW, here's the entire (relevant) code that builds up this html:
namespace PlatypusWebReports.Controllers
{
[RoutePrefix("api")]
public class LandingPageController : ApiController
{
private string _unit;
[Route("{unit}")]
public HttpResponseMessage Get(string unit)
{
_unit = unit;
string beginningHtml = GetBeginningHTML();
string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
string fillRateHtml = GetFillRateHTML();
string priceComplianceHtml = GetPriceComplianceHTML();
string produceUsageHtml = GetProduceUsageHTML();
string endingHtml = GetEndingHTML();
String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
beginningHtml,
deliveryPerformanceHtml,
fillRateHtml,
priceComplianceHtml,
produceUsageHtml,
endingHtml);
return new HttpResponseMessage()
{
Content = new StringContent(
HtmlToDisplay,
Encoding.UTF8,
"text/html"
)
};
}
private string GetBeginningHTML()
{
StringBuilder builder = new StringBuilder();
builder.Append("<html>");
builder.Append("<head>");
builder.Append("<title>");
builder.Append(string.Format("Available Reports For {0}", _unit));
builder.Append(_unit);
builder.Append("</title>");
builder.Append("<script src='https://code.jquery.com/jquery-1.12.2.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("</head>");
builder.Append("<body class=\"body-content\" style='margin-top:0;margin-left:60;margin-right:60;'>");
builder.Append("<div class=\"jumbotronjr\">");
builder.Append("<img src=\"http://www.Platypususa.com/wp-content/themes/Platypus/images/pa_logo_notag.png\" alt=\"Platypus logo\">");
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available Platypus Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style='color:red;height:12;' />");
builder.Append("</div>");
builder.Append("</div>");
// for beginning the row div
builder.Append("<div class=\"row\">");
return builder.ToString();
}
private string GetEndingHTML()
{
StringBuilder builder = new StringBuilder();
// for ending the row div
builder.Append("</div>");
builder.Append("</body>");
builder.Append("</html>");
return builder.ToString();
}
. . .
Everything is displaying basically as I want it to, it's just not allowing me to add the "gingebread" (adding margins, hrs, shadow around the used area)
UPDATE 5
Even though _ViewStart.cshtml points to Layout:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
...and _Layout.cshtml renders (supposedly) the Styles in the Content/css folder, which contains the Sites.css which I have been adding CSS styles madly to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - PRO*ACT USA</title>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/bootstrap")
#Styles.Render("~/Content/css")
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")*#
#RenderSection("scripts", required: false)
</body>
</html>
...all that does nothing to add these styles I want. The only way seems to use inline styles:
builder.Append("<body style='margin-top:40;margin-left:60;margin-right:60;'>");
. . .
builder.Append("<hr style='border:0;height:1;background:#333;color:navy;' />");
The whole process could certainly be made much clea[n,r]er / more straightforward.
Is searching possible in html tags on the behalf of ID? for example to find div tag having id="abc".
I can use document.getElementByID("abc"). But i need parent div + its inner HTML in return of searching. i.e if this div has childs
Try this :-
<script >
function showHTML(){
var vinner=document.getElementByID("abc").innerHTML;
var totalinner="<div >"+vinner+"</div>";
alert(totalinner);
}
</script>
HTML part:-
<body onload="showHTML();">
<div id="abc">
Hello inside abc
<div>
Inner div inside abc tag.
</div>
</div>
</body>
Its working fine. You can get Attributes here.
It's hard to understand what you want to achieve:
document.getElementById("abc").parentNode.innerHTML;
//will return <div id="abc"> and other items from parrent
document.getElementById("abc").getAttribute("name");
//will atribute of <div id="abc">
if (document.getElementById("abc").hasChildNodes()) {
// It has at least one
}
Using jQuery is much simplier, you could do that:
$("#abc").attr('id') //retunrs id
$("#abc").attr('class') //returns classes
//or other manipulations
One way to do this is to use outerHTML, which:
gets the serialized HTML fragment describing the element including its descendants.
Given the following HTML:
<div id="abc" data-attr="A custom data-* attribute">Some text in the div.</div>
The following JavaScript will log, in the console, the HTML of the element of id equal to abc:
var htmlString = document.getElementById('abc').outerHTML;
console.log(htmlString);
JS Fiddle demo.
References:
outerHTML.
outerHTML compatibility.
I have a string:
private str:String = '
<!DOCTYPE html>
<html>
<body>
<div>TEST</div>
<span id="t1">T1 Content</span>
<span class="t2">T2 Content</span>
</body>
</html>';
I want to parse the string. Next, I get innerHTMl via Object, ID or Class.
E.g.:
Objects: Body, Div, Span
IDs: t1
Classes: t2
In PHP with the class, it's easy. But I could not create this build with Flex.
Thanks for help...
Convert it to native XML in as3, then use e4x to parse the information required:
var xml:XML = XML(str);
//trace the content of any span with the id of "t1"
trace(xms..span.(attribute("id") == "t1"));
//trace the content of any span with the class t2
trace(xml..span.(attribute("class") == "t2"));
//trace the contents of the first div
trace(xml..div[0]);
For more on e4x, this is a good primer:
http://www.senocular.com/flash/tutorials/as3withflashcs3/?page=4