We Keep Coding

How print and image with react map function

My web app will open a array of JSON with map function, i need when the react the an "" the image get write on the table and the link on the image still active, my function is:
<table className="table">
<thead className=".thead-dark">
<tr>
<td>Id</td>
<td>Name</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
{this.state.contatos.map((contato, index) => (<>
<tr>
<td>{contato.id}</td>
<td>{contato.nome}</td>
<td>{contato.telefone}</td>
</tr>
</>))}
</tbody>
</table>
this is my sql db
INSERT INTO contatos(nome,telefone) VALUES ('<a><img src="example.com"</img></a>','305-565');
INSERT INTO contatos(nome,telefone) VALUES ('Carey Shers','305-565');
INSERT INTO contatos(nome,telefone) VALUES ('Bill Manys','298-2125');
INSERT INTO contatos(nome,telefone) VALUES ('john peter','465-1827');

Ideally, you'd want to store names and image urls in different columns in a db and work in a way that if name exists - show name, else, show image.
Assuming that is something that can not be changed, you can just use react's dangerouslySetInnerHTML property to set the name. So it wouldn't matter if it's a name or an image as the code would work for both the scenarios.
so you'd replace
<td>{contato.nome}</td>
with -
<td dangerouslySetInnerHTML={{ __html: contato.nome }} />
Also, whenever you're using dangerouslySetInnerHTML, make sure that the data that is coming from the DB is safe. Else your website can be prone to XSS attacks.

Reading HTML Table Head value in Adobe DTM

I'm using Adobe DTM and I'm trying to get the value from a table (I have no control over this format or naming) and I'd like to grab the value of "Opened Account" in the example below but not sure how to go about it in DTM? I'm trying to target "th.rich-table-headercell" but not sure how to grab value?
<table class="rich-table home table" id="startForm:OpenedReviewApps" border="1" cellpadding="0" cellspacing="0">
<colgroup span="0"></colgroup>
<thead class="rich-table-thead">
<tr class="rich-table-header">
<th class="rich-table-headercell" scope="colgroup">Opened Accounts</th>
</tr>
</thead>
<tbody id="startForm:OpenedReviewApps:tb">
<tr class="rich-table-row rich-table-firstrow">
<td class="rich-table-cell" id="startForm:Open" style="width:80%">
some data here
</td>
</tr>
</tbody>
</table>

There may be a better way to do this, depending on what/when/where you are trying to get the value (e.g. page load rule vs. event based rule), but in general, based on your html, here is one way to do it.
Go to Rules > Data Elements, and click on Create New Data Element.
Name the Data Element something like "table_header" or whatever convention you currently use.
For Type, choose "CSS Selector".
For CSS Selector Chain, use "th.rich-table-headercell" (no quotes).
For get the value of, select "text".
(Optional, but recommended) Check the Scrub whitespace and linebreaks using cleanText option.
Now, for example, you can create a page load rule, and use %table_header% in your condition(s) or variable field(s). Or, if you need to reference it in javascript in a custom code box, use _satellite.getVar('table_header')

Automatically refresh Google Apps Script after set period of time

I'm working on a portal which has a set of forms that can be accessed from the main screen and then a page which has reporting based on a users submissions to said forms.
The forms write to a singular Google spreadsheet where data is manipulated and a "Status" is thrown out.
I have got this status, among other data onto my reporting screen and at the minute it is static until the users physically refreshes the page.
I am wanting to make it so that this report refreshes automatically, say every 60 seconds, so any changes are reflected to the user.
I've spent time researching, and have managed to get two options which seem to be in the beginning stages of working, but I am unable to work out how to solve the issues I'm still having.
One choice was to do a meta refresh. The code for this is:
<meta http-equiv="refresh" content="60;url=HereIsTheURL"/>
This version works, but only in the first instance. i.e the page successfully reloads the first time, but when the second instance comes around all I get is a blank white screen.
The second choice I have been using is with JS. The code is:
<script type="text/javascript">
setTimeout(function () {
location.reload();
}, 60000);
</script>
However, this simply returns a blank white screen every time.
Further information:
I am using HTMLService in Apps Script.
The page on which the Log/report appears has the full script URL + "?page=pagename"
Does anybody have any ideas how to change the code so that the page refreshes properly every time?
Updated below with HTML content:
<div id="content" >
<h1>Change Log:</h1>
<br>
<br>
<div id="users-contain" class="ui-widget">
<table id = "user" style="width:100%" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Change Request Date</th>
<th>Change Request</th>
<th>Status</th>
<th>Completed By</th>
<th>Date Completed</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>

AFAIK, you can't use location.reload because of redirecting security issues (wild guess), but you could reset the whole page, with setTimeouts in the Javascript HTML, and update the page, if you'd share you HTML code we could help on how to update them.

Selenium IDE fails to find components

I'm testing an ADF application with Selenium IDE. At one point, the automated test case has to click on a button, which has a partialTrigger attribute pointing to a table on the page and after the button executes some background logic, the table is populated with rows, but the page is not fully refreshed.
The problem I'm facing is that the Selenium IDE can't find the table rows after the button click. Possibly, Selenium is not aware of the page's DOM update, but I'm not sure about that.
What I have tried so far is this:
I stored the expected full xpath for a cell in the first row of the table.
Created a self-executing JavaScript function that is used for clicking on the given path.
I have tested the following commands on a simple HTML page and they work fine.
Selenium commands:
<tr>
<td>store</td>
<td>//html[1]/body[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]</td>
<td>myTableRowPath</td> <!-- store the xpath with name 'myTableRowPath' -->
</tr>
<tr>
<td>storeEval</td>
<td>(function(path) {
var result = selenium.browserbot.getUserWindow()
.document.evaluate(path,
selenium.browserbot.getUserWindow().document,
null,
8,
null).singleNodeValue; result.click();
return null;
})
(${myTableRowPath})
</td>
<td>elementToBeClicked</td>
</tr>
How can I make Selenium IDE aware of any (AJAX) DOM updates on the page ?

Generally when dealing with AJAX on Selenium IDE, you'll want to use a waitForElementPresent type of action.
For instance if your table changes from
<table id="myTable">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>
to
<table id="myTable">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>something</td>
<td>else</td>
</tr>
</tbody>
</table>
You can use:
<tr>
<td>click</td>
<td>//input[#id='myButton']</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//table[#id='myTable']/tbody/tr[2]</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>//table[#id='myTable']/tbody/tr[2]/td</td>
<td>something</td>
</tr>
Here's a JSFiddle I tested it against (no AJAX, but simulating that with a slow JS function).

ADF manipulate the generated HTML in a way that it'll be very hard to maintain an XPath. The easiest way to target specific elements in ADF is giving this element a styleClass and access it using the class attribute.

ADF loads the table UI (whose ID selenium is looking for) before it loads the contents of the table. It is possible your webdriver is looking for the content before it is loaded, so you could explicitly wait for a short period of time before clicking on the row.
Your table might be using lazy load which only loads the contents of the table when you scroll it into view. If your window only shows 5 rows and there are 10 rows in your table, your browser will only load 5 rows. If you ask selenium to look for row 8, it will throw an exception. I solved this by clicking on the first row and driver.switchTo().activeElement().sendKeys(Keys.DOWN); for the number of times the number of the row I am searching for. So I am "scrolling" to the row before accessing it

jquery grid and javascript best practice

Im new to jquery and need some help.
I have written a table that act like a grid with help from jquery.
When a user click on Name column the user will be redirected to the details page.
Now I want to know if I can do this in a better way?
And should the JS code be in the page or in a separated JS file?
Here is the code.
<table id="grid">
<thead>
<tr>
<th data-field="name">Namn</th>
<th data-field="location">Ort</th>
<th data-field="phone">Telefon</th>
<th data-field="buildinmonth">Bygga inom</th>
<th data-field="houselot">Har tomt</th>
<th data-field="created">Skapad</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td><span id="open" data-id="#item.Id">#item.Name</span></td>
<td>#item.Location</td>
<td>#item.Phone</td>
<td>#item.BuildInMonth</td>
<td>#item.HouseLot</td>
<td>#String.Format("{0:d}", item.CreatedDate)</td>
</tr>
}
</tbody>
</table>
<script>
$("#grid").kendoGrid({
scrollable: false,
sortable: true
});
$("#grid #open").click(function () {
window.location.replace("/lead/details/" + $(this).data("id"));
});
</script>

In this scenario, dont need to use any jquery click event, when the html table is loading that time we can give a <a> tag like,
<td>#item.Name</span></td>

When a user click on Name column the user will be redirected to the details page. Now I want to know if I can do this in a better way?
This seems ok. The only thing I feel can be adde to this is on hover of the Name column, you can show a tooltip of "Show more details" or something more intuitive.
And should the JS code be in the page or in a separated JS file?
Yes I always prefer to have all my JS code in a seperate file. The advantage of doing so is that you can minify the JS code later on.