I have a footer on my website that lists the date last updated.
<footer>
<table class="foot">
<tr>
<th>Contact information:</th>
<th>Date Last Updated:</th>
</tr>
<tr>
<td>email address</td>
<td>November 31, 2014</td>
</tr>
</table>
</footer>
As you can see the date is hard coded and this has to be changed each time I update the site. The site however is made up of 15 different pages and each one need to be updated because the footer is on everyone of them.
Is there a way to update the date on all the pages if I only update the information on the homepage using javascript. If so how?
Thank you
I was wondering
Changing the date on the home page might not be the best idea.
Instead create a new (maybe json or even just plain text) file to store the date. Then read this file on every page and put the content into your footer.
If the files are part of a solution, you can Replace All in Entire Solution with Visual Studio. If you can connect to a database, you can store the date last modified there, and just call to it from your pages - then you can just update database field when you update the content. Otherwise, you can store it in a separate file and call that for the date.
Short answer: Probably not, but there are other ways to skin a cat.
Create a file "global.js" to include on every page...
inside global.js:
window.onload = updateDate;
function updateDate() {
displaydate = "November 31st, 1999";
fd = document.getElementById('footerdate');
fd.innerHTML = displaydate;
}
include that file on every page:
<script type="text/javascript" src="global.js"></script>
change your footer to be:
<footer>
<table class="foot">
<tr>
<th>Contact information:</th>
<th>Date Last Updated:</th>
</tr>
<tr>
<td>email address</td>
<td id="footerdate"></td>
</tr>
</table>
</footer>
Then you can just update the date in the global.js and it will carry through to all pages every time.
Put the date in a separate html file, then display it using an <iFrame> inside the <td>.
Related
I'm using stripes java framework. I have jsp page:
<table id="mlTable" style="">
<col width="200">
<col width="250">
<thead>
<tr>
<th align="center"><p>Name</p></th>
<th align="center"><p>Address</p></th>
</tr>
</thead>
<c:forEach items="${actionBean.mLocations}" var="ml">
<tr>
<td><p>${ml.name}</p></td>
<td><p>${ml.address}</p></td>
</tr>
</c:forEach>
</table>
In my actionbean I'm returning list:
public List<Location> getmLocations() {
mLocations = wrapperBean.getLocations();
return mLocations;
}
What I want is pagination because list is very long. And pagination must be asynchronous without reloading the page. Because I have also search field and that value must stay in field. And I don't want use DISPLAYTAG because I'm adding some custom classes to table. What can I do? please help
You could use a Javascript library such as List.js to paginate a HTML table client-side. This avoids refreshing the page, but if the amount of data is truly staggering, it may cause performance issues, since you're always downloading the whole thing (but only once per loading the page itself).
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.
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
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.
I guess I am spoiled with JavaScript. If you want to change something about the parent, you can code something like parentNode.style.etc.
<TABLE id="hasID">
<TBODY>
<TR>
<TD>
<IMG id="hasID2" src="somePicture.png">
<IMG id="hasID3" src="someOtherPicture.png">
</TD>
</tr>
<tr>
<td>other stuff</td>
</tr>
</tbody>
</table>
As you can see from my code table has an id, and the img tags have ids. What I would like to do is add a stype class to the first TD, so that all the images are aligned to the left or middle, that kind of thing.
However, here is a tricky part, I don't want to user JavaScript, because it looks to slow. Everything starts out on the right, and then jump to the center, after everything is loaded.
Also, here is a second tricky part. I can't change add a class to the TD, because it generated by JSF.
So my main question is can I do this with CSS.
UPDATE:
I don't really need to reference a parent. Referencing a child will also work for me.
You can't select a parent via CSS. It was proposed as a feature but it's not even close to implementation.
I will suggest that you move any javascript you have to just after the content above, which means that it will run as soon as that part of the section is rendered, thus removing any delay.
<TABLE id="hasID">
<TBODY>
<TR>
<TD>
<IMG id="hasID2" src="somePicture.png">
<IMG id="hasID3" src="someOtherPicture.png">
</TD>
</tr>
<tr>
<td>other stuff</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var img = document.getElementById("hasID2");
img.parentNode.style.textAlign = "right";
</script>
Inline Javascript is OK to use in these scenarios.
Sorry no way to select parent in css.
Is there a CSS parent selector?
Not sure if this will help, but I'll mention that you can add classes using JSF with styleClass="", depending on how you are generating the table. There is also a columnClass="" if you are putting these in a datatable.