Knockout Html binding - html

I'd bound my model &lt ; input type=&quot ; radio &quot ; name=&quot ;&quot ; &gt ; with the view model of razor engine file.
** I've separated the tags just to show how the html codes were saved in the original format.
When the above data get's displayed over the view, the data is shown as "< input type="radio" name="" />".
The knockout tag that I use at the cshtml page is "<label data-bind = "html: XYZ"></label>".
I want to know why the above data reflects as a string message rather than an html control?

If the string you have provided is correct, I would say it is because of the whitespace between < and input. Make it <input. Secondly, depending on how you are quoting within the html to be rendered, you'll need to escape some of the " or change them to '.
Viewmodel
vm={
html1: "C<input type=\"radio\" name=\"\" />",
html2: "D<input type='radio' name='' />",
html3: "Your example has whitespace causing it to be invalid HTML: < input type='radio' name=''/>"}
ko.applyBindings(vm)
Html
<body>
With escaped double quotes <label data-bind="html: html1"></label>
<br/>
With single qoutes <label data-bind="html: html2"></label>
<br/>
<label data-bind="html: html3"></label>
</body>
See this fiddle for working example of the above.

Related

Locating the same text in XPATH with the same address location

While this info doesn't help resolve my issue, I'll let it be known I'm creating automation tests in Python using Selenium WebDriver.
I have an issue where I want to verify the existence of two identical text elements that appear to have identical XPATH addresses. As you can see from the XPATH of the web page below...
<div class="pagebox">
<h2>Database</h2>
Restrict access to group: <input id="database_group" name="database_group" value="postgres" type="text">
<br></br>
<h2>Sessions</h2>
User sessions time out after
<input id="session_timeout" name="session_timeout" maxlength="5" value="1200" type="text">
minutes.
<br></br>
<h2>HMI</h2>
<input id="use_large_header_text" name="use_large_header_text" type="checkbox">
Use large text in the header bar and link bar on HMI
<br></br>
<input id="display_tagging_button" name="display_tagging_button" checked="true" type="checkbox">
Display tagging button and information in HMI control dialog
<br></br>
<br></br>
<h2>Inactive Redirect</h2>
Auto redirect after user is inactive for
<input id="inactive_time" name="inactive_time" maxlength="4" placeholder="Min: 0 (Default) Max: 1440" size="25" value="0" type="text"></input>
minutes.
<span id="ieInactTime" style="font-style: italic"> Min: 0 (Default) Max: 1440</span>
<br></br>
Redirect Address:
<input id="inactive_page" name="inactive_page" placeholder="File Path e.g. /Home/" size="30" value="" type="text"><span id="ieInactPage" style="font-style: italic"> File Path e.g. /Home/</span>
<br></br>
...the phrase "minutes." shows up twice [line 8 and line 21], but it doesn't show up in a way where I can use the element's XPATH to locate which element I want to verify the existence of as I normally would using methods you'd find here, here, or here. Both text elements appear to have the same exact XPATH address:
//div[#class='pagebox']
I tried to distinguish between the two text elements using brackets to signify which text elements I'd like to verify...
e.g. //div[#class='pagebox']/[1] & //div[#class='pagebox']/[2]
...but that didn't work.
The closest I could find to distinguishing between the two of these text elements was to use the 'text()' feature of XPATH.
//div[#class='pagebox']/text()[contains(.,'minutes')][1]
//div[#class='pagebox']/text()[contains(.,'minutes')][2]
Is there any way to verify these two text elements using XPATH?
You can use JavaScriptExecutor to find text node inside the element div. See C# code below:
IWebElement e = driver.FindElement(By.ClassName("pagebox"));
string script = "var nodes = arguments[0].childNodes;" +
"var text = [];" +
"var count=0;" +
"for (var i = 0; i < nodes.length; i++) {" +
" if ((nodes[i].nodeType == Node.TEXT_NODE) && (nodes[i].textContent.trim()=='minutes.')) {" +
" text[count]= nodes[i].textContent.trim();" +
" count++;" +
" }" +
"}" +
"return text;";
Object obj = ((IJavaScriptExecutor)driver).ExecuteScript(script,e);
To distinguish between the two different text elements "minutes.", you need the following XPATH:
For the 1st "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][1]]
For the 2nd "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][2]]

Iterate with index using thymeleaf

I am new to thymeleaf and am converting all my jsp code to thymeleaf.I don't know how to convert this below code to thymeleaf.Do anyone know how to convert the below code to thymeleaf?
<logic:iterate id="id" property="idList" name="sampleForm" indexId="i">
<label for="id<%=i%>">
<bean:write name="id" property="id" />
</label>
</logic:iterate>
Please tell me how to initialize the index value in thymeleaf to be used in some values??
<label th:each="id,status : ${idList}" th:for="|id${status.index}|" th:text="${id.id}"></label>
th:each will iterate over the idList, assign each item to id and create a label for each item. The status of the item can be assigned by adding an extra name, separated by a comma (status in this example).
th:for will set the for attribute of the label. The pipes (|) are used for easy string concatenation.
th:text will set the inner text of the label to the ID.
You can also use it like this:
<label th:each="id : ${idList}" th:for="${'id' + idStat.index}" th:text="{id.id}">
This starts the index from 0
If you want to start the index from 1 use this
<label th:each="id : ${idList}" th:for="${'id' + idStat.count}" th:text="{id.id}">
Check out the Thymeleaf documentation

WWW::Mechanize::Firefox How do you extract the text within HTML element tags?

Good Day,
How do you print the text of an HTML tag with WWW::Mechanize::Firefox?
I have tried:
print $_->text, '/n' for $mech->selector('td.dataCell');
print $_->text(), '/n' for $mech->selector('td.dataCell');
print $_->{text}, '/n' for $mech->selector('td.dataCell');
print $_->content, '/n' for $mech->selector('td.dataCell');
Remember I do not want {innerhtml}, but that does work btw.
print $_->{text}, '/n' for $mech->selector('td.dataCell');
The above line does work, but output is just multiple /n
my $node = $mech->xpath('//td[#class="dataCell"]/text()');
print $node->{nodeValue};
Note that if you're retrieving text interspersed with other tags, like "Test_1" and "Test_3" in this example...
<html>
<body>
<form name="input" action="demo_form_action.asp" method="get">
<input name="testRadioButton" value="test 1" type="radio">Test_1<br>
<input name="testRadioButton" value="test 3" type="radio">Test_3<br>
<input value="Submit" type="submit">
</form>
</body>
</html>
You need to refer to them by their position within the tag (taking any newlines into account):
$node = $self->{mech}->xpath("//form/text()[2]", single=>1);
print $node->{nodeValue};
Which prints "Test_1".
I would do :
print $mech->xpath('//td[#class="dataCell"]/text()');
using a xpath expression
The only solution I have is to use:
my $element = $mech->selector('td.dataCell');
my $string = $element->{innerHTML};
And then formatting the html within each dataCell
Either:
$element->{textContent};
or
$element->{innerText};
will work.

Submit form to calculate quadratic equation

Am just learning html. I need to write code that solves the quadratic equation formula. I tried php code embeding in html but am getting blank output. How do I get user values a, b, c and display conditional answers?
Here's a simple example of what you need to do. First make a HTML form:
<form method="post" action="index.php">
<input type="text" name="a" value="Enter 'a'" />
<input type="text" name="b" value="Enter 'b'" />
<input type="text" name="c" value="Enter 'c'" />
<input type="submit" name='calc' value="Calculate" />
</form>
There is your form. Now the calculations:
<?php
// Check if the form is submitted
if (isset($_POST['calc'])) {
//assign variables
$a = $_POST['a'];
$b = $_POST['b'];
$c = $_POST['c'];
//after assigning variables you can calculate your equation
$d = $b * $b - (4 * $a * $c);
$x1 = (-$b + sqrt($d)) / (2 * $a);
$x2 = (-$b - sqrt($d)) / (2 * $a);
echo "x<sub>1</sub> = {$x1} and x<sub>2</sub> = {$x2}";
} else {
// here you can put your HTML form
}
?>
You need to do more checks on it, but as I said before this is a simple example.
Edit: learn from the source , the official php site: http://php.net/manual/en/tutorial.forms.php
1.Create a form with the fields you want. <form method='post' ....>...</form>
2.The user submit the form and then write a PHP code which get the posted data ($_POST)
and manipulate it according to the quadratic equation formula.
3.Echo the result.
I have smaller example.
This file sends data from form to itself. When it sends something - result of condition
$_SERVER['REQUEST_METHOD']=='POST'
is true. If its true - server process code in "if" block. It assigns data sent from form to 2 variables, then adds them and store in "$sum" variable. Result is displayed.
<html>
<body>
<form method="POST">
<p>
A: <br />
<input name="number_a" type="text"></input>
</p>
<p>B: <br />
<input name="number_b" type="text"></input>
</p>
<p>
<input type="submit"/>
</p>
</form>
<?php
if ($_SERVER['REQUEST_METHOD']=='POST') // process "if block", if form was sumbmitted
{
$a = $_POST['number_a'] ; // get first number form data sent by form to that file itself
$b = $_POST['number_b'] ; // get second number form data sent by form to that file itself
$sum = $a + $b; // calculate something
echo "A+B=" . $sum; // print this to html source, use "." (dot) for append text to another text/variable
}
?>
</body>
</html>
You need PHP server to test/use this! PHP file must be processed by web server, which creates page. Opening php file from disk will not work. If you need more explanations - ask for it in comments.

Struts 1 bean tag inside HTML quotes

Here is my code:
<html:text name="rptData" property="emailAddress" onblur="checkIfEmpty('<bean:write name="rptData" property="status" />' , this.id)" />
This is nested inside a logic:iterate tag. What i need to do, is to pass value of 'status' to the javascript checkIfEmpty method. But i guess there is some error in the quotes. It is not working properly. Please anyone guide me. Thanks.
You can't nest custom tags like that, period, and it's unfortunate most of the answers imply you can, because that represents a fundamental misunderstanding of JSP.
Ideally, you wouldn't use the <logic:iterate> tag, as its use is not recommended when you have JSTL available: when JSTL and Struts 1 tag functionality overlaps, use the JSTL option. Then use standard JSP EL to access the variable.
<c:forEach items="listOfThings" var="current">
...
<html:text ... onblur="checkIfEmpty('${rptData.status}', ${current.id})" ...
...
In this example I also assumed that this was supposed to refer to the current iteration object, defined in the <c:forEach> tag.
ok after doing some research i found out the answer.
if i have some code like this:
<html:text styleId="emailAddress+<%=statusC.toString() %>" name="rptData" property="emailAddress" />
its output is as follows:
<input type="text" name="emailAddress" value="abc#gmail.com" id="emailAddress+<%=statusC.toString() %>" />
but if i use
<html:text styleId="<%=statusC.toString() %>" name="rptData" property="emailAddress" />
the output is:
<input type="text" name="emailAddress" value="abc#gmail.com" id="Approved" />
That means without string concatenation the output is correct. i.e. only using
styleId="<%=statusC.toString() %>"
rather then
styleId="emailAddress + <%=statusC.toString() %>"
or even
styleId="emailAddress" + <%=statusC.toString() %> - This results in an error, though
yeilds correct output.
So the workaround is to first intialize a complete java String in a scriplet then use it inside the styleId tag.
<% String emailId = "emailAddress" + statusC.toString() ;%>
<html:text styleId="<%=emailId%>" name="rptData" property="newEmailAddress" />
It will work fine. Cheers !
You might want to try adding some escape characters while using double quotes inside double quotes like in your case it would be some like:
onblur="checkIfEmpty('<bean:write name=\"rptData\" property=\"status\" />' , this.id)"
Try this:
<html:text name="rptData" property="emailAddress" onblur="checkIfEmpty('<bean:write name=\'rptData\' property=\'status\' />' , this.id)" />