I've written a VCL application in D10.1 Berlin.
It uses DataSnap to provide some REST API to connect an externally
written component to my application. That works and I can also use the
API via browser URL input or via CURL.
Now I wanted to create a smallish HTML website for demoing some people
the value of a web service in some simplistic way. I put together a simple form for using one of my services, but I failed to get this to work, because the DataSnap service has no query parameters as it seems but in my case it requires 2 parameters (a string and a number). I know that DataSnap wizard can generate a complete website, but I fear that this will generate so much
stuff that it will hide what I'm actually trying to show with my simplistic example provided below.
My call is like this:
http://127.0.0.1:1024/datasnap/Tmyapp/UpdateMyValue/1%3A1/500
And this is the simplistic form part of my simple HTML page:
<form action="http://127.0.0.1:1024/datasnap/Tmyapp/UpdateMyValue"
method="post">
<table>
<tr>
<td width=50%>Address</td>
<td width=50%><input type="text" name="MyAddress" value="1:1"
maxlength="5" required></td>
</tr>
<tr>
<td width=50%>Value</td>
<td width=50%><input type="number" name="MyValue" value="300"
min="0" max="2000" required></td>
</tr>
</table>
<p>
</p>
<input type="submit" value="Setzen">
</form>
What's wrong, or can't it be done this way?
Related
I am trying to use the Click to Edit example with HTMX, by using a table.
Each row (<tr>) is a database record that looks like this:
<tr hx-target="this" hx-swap="outerHTML">
<form>
<td><input type="text" name="name" value="{{row.name}}"></td>
<td><input type="text" name="email" value="{{row.email}}"></td>
<td>
<button class="btn" hx-put="/edit/{{row.id}}">Update<buttun>
<button class="btn" hx-get="/view/{{row.id}}">Cancel</button>
</td>
</form>
</tr>
Unfortunately, when I print the request body with request.form.keys on my flask server, I see that that the request is empty ([])
It seems like the button click did not trigger the form submission with all the input fields.
How can I make the button click trigger the form submission with all the fields populated ?
Ah, just remembered: you are working with tables here. Unfortunately tables are super picky about the elements inside them, and I bet form doesn't work where you put it. If you inspect the DOM I bet you'll find that there isn't really a form element in there, so htmx isn't finding it to include the inputs.
You'll need to rework this to include the values in a different way, for example using hx-include.
Something like this:
<tr hx-target="this" hx-swap="outerHTML">
<td><input type="text" name="name" value="{{row.name}}"></td>
<td><input type="text" name="email" value="{{row.email}}"></td>
<td>
<button class="btn" hx-put="/edit/{{row.id}}"
hx-include="closest tr">
Update
<button>
<button class="btn" hx-get="/view/{{row.id}}">Cancel</button>
</td>
</tr>
If you are willing to switch from table rows to divs, the original code you had should work fine.
This is an unfortunate situation where tables are not very flexible.
update: #guettli reminded me that you can include any element and it will include all inputs below it, so you can just use closest tr in your hx-include attribute. Thanks!
Can you post what the request looks like from the chrome or firefox console?
This looks correct, in general.
I want to manipulate the values associated with the entries of an external mongodb database using a django webapp.
I've created the app and I'm currently displaying all the entries and their associated value in a simple table.
My idea is simply to create a button, that calls a python script with an argument (the id of that entry) and then changes it from false to true. The problem is, this seems like rocket-science, I've been at this for days now and I just can't get it to work as I have little to no proficiency when it comes to Ajax or Jquery, and all relevant examples I can find don't simply seem to pertain very well to my situation despite how basic it would appear, nor fit with Django 2.0+.
I'm using Django 2.1.5
def change_value(idnumber):
db_value = get_db_status_value(idnumber)
if db_value is True:
change_db_entry_status(idnumber, False)
else:
change_db_entry_status(idnumber, True)
my_template.html
<table>
<thead>
<tr>
<th> Status </th>
<th> Button </th>
</tr>
</thead>
<tbody>
{ % for entry in entry_data % }
<tr>
<td> {{ entry.status }} </td>
<td> <button type="button">{{ entry.idnumber }}</button> </td>
</tr>
</tbody>
{% endfor %}
</table>
I simply can't figure out how I can get the change_value function in there that I can create a button for and include an argument ( entry.idnumber ). This seems incredibly difficult, which from what I understand is a design principle, but it seems a shame if I can't even accomplish something as basic as above.
I was hoping someone could explain how I'm actually supposed to go about this? So far, it seems I require AJAX or Jquery (unfortunately, I barely know the basics of this, and what usually trips me up is that the urls.py which exist in both project and application level seems to work a little different in django 2.0+ compared to older versions)
This isn't actually difficult. It's just that you're missing an understanding of the relationship between the client and the backend code.
Once the template is rendered, the user sees it as HTML in their browser. That's it as far as the backend (ie Django) is concerned. The only way to run any further code on the server is to send another request. A request involves the browser contacting the server, which requires a URL and a view in Django.
Now, one way to send that request is via Ajax, but for your purposes that isn't necessary; since you're just learning, it's easier if you make it a simple form. So, your template might look something like this:
{% for entry in entry_data % }
<tr>
<td> {{ entry.status }} </td>
<td><form action="{% url 'change_value' idnumber=entry.idnumber %}" method="POST"> {% csrf_token %} <button type="submit">{{ entry.idnumber }}</button> </form></td>
</tr>
{% endfor %}
</tbody>
Notice how every iteration of the for loop has a separate form, which posts to a specific URL including the ID number.
Next you need a URL:
path('change_value/<int:idnumber>/', views.change_value, name='change_value'),
and update your function to actually be a view, which needs to accept a request and return a response:
def change_value(request, idnumber):
if request.method != "POST":
return HttpResponseNotAllowed()
db_value = get_db_status_value(idnumber)
if db_value:
change_db_entry_status(idnumber, False)
else:
change_db_entry_status(idnumber, True)
return redirect('/')
You always need to redirect after a POST, but you could redirect back to the same URL that rendered my_template in the first place. (Also note I've put in a test to make sure the user is actually sending a POST; you don't want Google to crawl this URL and flip your values for you.)
And that's it, now you have a button that should toggle your value.
The answer from #Daniel is enough for you. But if you want to use ajax so that the page does not have to refresh to change the vaue, you may do something like:
In your template make changes as:
<table>
<thead>
<tr>
<th> Status </th>
<th> Button </th>
</tr>
</thead>
<tbody>
{ % for entry in entry_data % }
<tr>
<td id="status"> {{ entry.status }} </td>
<td> <button type="button" onclick="change_status(this)" id="{{ entry.idnumber }}">{{ entry.idnumber }}</button> </td>
</tr>
</tbody>
{% endfor %}
and a script as:
<script>
function change_status($this){
var request_data = $this.id;
console.log("data: " + request_data);
$.post({
url: "url that leads to your view",
data : { request_data: request_data},
success : function(json) {
document.getElementById('status').innerHTML = "" //insert the data returned from the function
}
})}
</script>
I am automating the test for web application. I have a scenario for creating an admin, for which i have to enter the name, email address and phone number text boxes. But ids of this text boxes are dynamic.
userName, id='oe-field-input-41'
Email, id='oe-field-input-42'
phone number, id='oe-field-input-43'
First Query:
The numbers in the ids are dynamic, it keep changes
I tired to use the xpath for handling the dynamic value.
xpath = //*[starts-with(#id,'oe-field-input-')]
In this it enter the text into first text box successfully
Second Query:
I am not able use the same xpath for next two text boxes, as it enters the email and phone number into name field only
Please help me to resolve this dynamic value handling.
Edited: added the html code,
<table class="oe_form_group " cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="oe_form_group_row">
<td class="oe_form_group_cell oe_form_group_cell_label" width="1%" colspan="1">
<td class="oe_form_group_cell" width="99%" colspan="1">
<span class="oe_form_field oe_form_field_many2one oe_form_field_with_button">
<a class="oe_m2o_cm_button oe_e" tabindex="-1" href="#" draggable="false" style="display: inline;">/</a>
<div>
</span>
</td>
</tr>
<tr class="oe_form_group_row">
<td class="oe_form_group_cell oe_form_group_cell_label" width="1%" colspan="1">
<td class="oe_form_group_cell" width="99%" colspan="1">
<span class="oe_form_field oe_form_field_email">
<div>
<input id="oe-field-input-35" type="text" maxlength="240">
</div>
</span>
</td>
</tr>
<tr class="oe_form_group_row">
<td class="oe_form_group_cell oe_form_group_cell_label" width="1%" colspan="1">
<td class="oe_form_group_cell" width="99%" colspan="1">
<span class="oe_form_field oe_form_field_char">
<input id="oe-field-input-36" type="text" maxlength="32">
</span>
</td>
</tr>
<tr class="oe_form_group_row">
<td class="oe_form_group_cell oe_form_group_cell_label" width="1%" colspan="1">
<td class="oe_form_group_cell" width="99%" colspan="1">
<span class="oe_form_field oe_form_field_char">
<input id="oe-field-input-37" type="text" maxlength="32">
</span>
</td>
</tr>
<tr class="oe_form_group_row">
</tbody>
you can try alternate way for locating unique element by label or so. For example:
css=.oe_form_group_row:contains(case_sensitive_text) input
xpath=//tr[#class = 'oe_form_group_row'][contains(.,'case_sensitive_text')]//input
If you are using ISFW you should create custom component for such form fields.
You do have some classes which are good for identification, e.g. oe_form_field_email, oe_form_field_char. It's a little complicated to use them because they're not on the input fields themselves, and the second one is not unique; but it's quite possible:
.//span[contains(#class, 'oe_form_field_email')]//input
That is an xpath which identifies the Email field as being the input which is a descendant of a span with the oe_form_field_email class. You could also use the same logic in a css selector like this, more efficiently:
span.oe_form_field_email input
For the two other fields, there is no unique class which can tell them apart so you're going to have to rely on the order (I'm assuming username comes before phone number), and that means you have to use xpaths:
(//tr//span[contains(#class, 'oe_form_field_char')])[1]//input
(//tr//span[contains(#class, 'oe_form_field_char')])[2]//input
Those xpaths pick out the first and second fields respectively, which are inputs which are descendants of a span of class oe_form_field_char.
P.S. I used Firepath in firefox to verify the xpath and css locators.
The problem here is, that your XPath does the correct selection, but Selenium will always pick the first one if multiple results are returned for your query.
You can select each of the input fields directly by using:
//input[1]
//input[2]
//input[3]
If there are other input fields, you can tighten your selection by selecting only input nodes with oe-field-input in their id attribute like this:
//input[starts-with(#id,'oe-field-input-')][1]
//input[starts-with(#id,'oe-field-input-')][2]
//input[starts-with(#id,'oe-field-input-')][3]
Use the following xpath works like a charm. Although I don't recommend this kind of an xpath. Since we don't have text against the text box no other choice.
//div/input[contains(#id, 'oe-field-input')] - First text box
//tr[#class = 'oe_form_group_row'][2]//input - Second text box
//tr[#class = 'oe_form_group_row'][3]//input - Third text box
You can use below XPATH.
//tr[#class = 'oe_form_group_row'][2]//input for First Text box
//tr[#class = 'oe_form_group_row'][3]//input for Second Text box
//tr[#class = 'oe_form_group_row'][4]//input for Third text box.
I have tested avove xpath.
But the better way if you have development access then ask developers to make is standaralized and recommand tags like "name" , "value", or attach text e.g. Email:, Password. So you can use these in your xpath.
I'm a novice in XSL, so excuse me if my question is too easy.
Look at code
<table class="foot_table">
<tr>
<td>
<div id="open_all">
show all
</div>
</td>
<td>
<div id="producers_footer">
close
</div>
</td>
</tr>
</table>
So i have page showall.xsl. How can i connect xslt template with that page?
Because now my page (showall) is empty.
Can you show me some examples?
Not exactly sure, but I think you are looking for a XSLT processor. An XSLT processor takes the source code (html in your case) and executes the showall.xslt on it and produces a new output.
Some references:
http://www.xml.com/pub/a/2000/08/30/xsltandhtml/index.html
http://en.wikipedia.org/wiki/Category:XSLT_processors
You can download a free copy of Visual Studio Express 2012 and process the xslt and xml in there.
The following piece of code in my JSP caused a cross site scripting vulnerability on the input tag.
<form name="acctFrm" method="post" action="<%=contextPath%>/form/acctSummary?rpt_nm=FIMM_ACCT_SUMM_RPT">
<table>
<tr>
<td>Account Id:</td>
<td>
<input class="tbl1" type="text" id="acctId" name="acctId" size="20" maxlength="10" value="<%=rptBean.getAcctId()%>"/>
<img class="tbl1" src="<%=contextPath%>/img/Submit.gif" border="0" />
</td>
</tr>
</table>
</form>
During Penetration testing they were able to alert some random message to the user by injecting a alert script in the value attribute of the tag as follows
<input class="tbl1" type="text" id="acctId" name="acctId" size="20" maxlength="10" value="1"><script>alert(12345)</script>" />
What is the problem here, and what would be the fix.
I was reading through some online references on XSS still I wasnt 100% sure on what could be the issue.
Any help would be greatly appreciated.
Thanks,
Deena
I have used the following solution,
The scriplet in the value attribute is the problem, I replaced it with jstl tag, I read somewhere that jstl tags have inbuild escaping mechanism to avoid xss issues.
<input class="tbl1" type="text" id="acctId" name="acctId" size="20" maxlength="10" value="<c:out value=${rptBean.acctId}"/>"/>
This works good for my issue.
Thanks
It seems the penetration testers were able to manipulate their session such that rptBean.getAcctId() would return an arbitrary string. If they could inject quotes and a right bracket, they could "force close" the input tag and insert their own script tag.
It looks like penetration testers got the method to return the string 1"><script>alert(12345)</script>.
This indicates that you need to escape the data when writing to the page. I would suggest taking a look at the answer on escaping HTML in jsp.
Also, remember that code does not have to be "perfectly" formatted for a browser to render it "correctly". Here are some links on how attackers may try evade XSS filters:
http://blog.whitehatsec.com/tag/filter-evasion/
http://ha.ckers.org/xss.html
Always treat user data as "dangerous" and take care when rendering it on a page.
It seems using jstl tag <c:out value=""> in value attribute will cause errors in jstl <form options> tags,
more info
XSS prevention in JSP/Servlet web application
if getAcctId() returned data come from DB you can filter before sending to client. for example check is data should be a number.