Simple. How to right aligned a table?? What Am I missing? - twitter-bootstrap-3

I have search extensively and have not had any luck. I have try some of the right aligned coding and I appear to just make things worse. I try to research and fix the problem without asking question but here I am. Basically I need my table to right aligned. The table that has "invoice, date, total, payments, and balance remaining". I have attached a photo also. The code I have for just the table is below:
<div class="col-xs-4">
<table class="table">
<tbody>
<tr>
<td>
<strong>Invoice</strong>
</td>
<td class="text-right">
{{ job.job_number }}
</td>
</tr>
<tr>
<td>
<strong>Date</strong>
</td>
<td class="text-right">
{% if job.scheduled_on %}
{{ job.scheduled_on | date: "%m/%d/%y" }}
{% endif %}
</td>
</tr>
<tr>
<td>
<strong>Total</strong>
</td>
<td class="text-right">
{{ job.total | currency }}
</td>
</tr>
<tr>
<td>
<strong>Payments</strong>
</td>
<td class="text-right">
{{ job.total_applied_payments | currency }}
</td>
</tr>
<tr>
<td>
<strong>Balance Remaining</strong>
</td>
<td class="text-right">
{{ job.balance | currency }}
</td>
</tr>
</tbody>
</table>
</div><!-- .col-xs-4 -->
</div><!-- .row -->
photo

Related

How to refactor this table with Vue?

I have a table where I have 6 rows and 4 columns that looks like this
`
<template>
<div class="col-md-12">
<fieldset>
<legend>Sellers Data Comparison</legend>
<div class="row">
<div class="col-xs-12">
<table class="table table-condensed" id="SellersDataComparisonTable">
<thead>
<tr>
<th>
<h4></h4>
</th>
<th class="numeric">Sellers Data</th>
<th class="numeric">Asset Index</th>
<th class="numeric">Deviation</th>
</tr>
</thead>
<tbody>
<tr>
<td><label># Accounts</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.NumberOfAccounts,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.AssetIndex.NumberOfAccounts,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.NumberOfAccounts ,'0,0') }}
</td>
</tr>
<tr>
<td><label># Customers</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.NumberOfCustomers,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.AssetIndex.NumberOfCustomers,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.NumberOfCustomers,'0,0') }}
</td>
</tr>
<tr>
<td><label>Principal</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.Principal,'0,0.00') }}
</td>
<td class="numeric">
{{useFormatNumber( store.assetIndexSummary?.SellersDataComparison.AssetIndex.Principal,'0,0.00') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.Principal,'0,0.00') }}
</td>
</tr>
<tr>
<td><label>Face Value</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.FaceValue,'0,0.00') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.AssetIndex.FaceValue,'0,0.00') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.FaceValue,'0,0.00') }}
</td>
</tr>
<tr>
<td><label>L12 payers</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.NumberOfPayersInLast12M,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.AssetIndex.NumberOfPayersInLast12M,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.NumberOfPayersInLast12M,'0,0') }}
</td>
</tr>
<tr>
<td><label>L12 avg payment</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.AveragePaymentsinLast12M,'0,0.00') }}
</td>
<td class="numeric">
{{useFormatNumber( store.assetIndexSummary?.SellersDataComparison.AssetIndex.AveragePaymentsinLast12M,'0,0.00') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.AveragePaymentsinLast12M,'0,0.00') }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</template>
`
As you can see it is very copy paste and clunky, I am trying to make it reusable and more elegant with vue.js, here is the problem I have the data for each column is coming from a different source - LatestSellersData, AssetIndex and Deviation.
What I tried was making a TableRow.Vue component that looks like this
<template>
<tr>
<td><label>{{ label }}</label></td>
<td class="numeric">{{ useFormatNumber(itemValue) }}</td>
<td class="numeric">{{ useFormatNumber(itemValue) }}</td>
<td class="numeric">{{ useFormatNumber(itemValue) }}</td>
</tr>
</template>
<script lang="ts">
import { defineComponent, inject } from 'vue';
import useFormatNumber from '#/use/formatNumber';
export default defineComponent({
props: {
label: String,
itemValue: Number,
},
setup() {
return {
useFormatNumber
};
}
})
</script>
The problem with this is the table data would look like this because I need to be putting value in to columns not rows
AssetIndex
Latest Data
Deviation
Number of People
1
1
1
Value
2
2
2
Average value
3
3
3
What I want it to look like is this
AssetIndex
Latest Data
Deviation
Number of People
1
2
3
Value
1
2
3
Average value
1
2
3
Hope I made my problem clear, thanks in advance!

Showing table heading once in VueJS component

I have a search built in VueJS and the results of the search are displayed in a separate component. I want to display the data in a table with the table headings. The issue I'm having is that the table heading appears before each row. How do I get it to appear once? Im sure this is easy but I cant think how to do this. Im fairly new to Vue, so any help appreciated.
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3">
{{ title }}
</td>
<td>
{{ award }}
</td>
<td class="col-md-3">
{{ level }}
</td>
<td class="col-md-3">
<a
:href="result.displayUrl"
class="btn-sm btn-primary"
role="button"
>
<span class="sr-only">Read more about {{ title }}</span> Read
more</a
>
</td>
</tr>
</tbody>
</table>
You need to separate row from tbody to component. And do v-for only on this component and not on the entire table.
It will be look like:
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<rowComponent v-for="rowData in tableData" :row="rowData"></rowComponent>
</tbody>
</table>
And RowComponent will look like:
<td class="col-md-3">
{{ row.title }}
</td>
<td>
{{ row.award }}
</td>
<td class="col-md-3">
{{ row.level }}
</td>
<td class="col-md-3">
<a :href="row.displayUrl"
class="btn-sm btn-primary"
role="button">
<span class="sr-only">Read more about {{ row.title }}</span> Read
more</a>
</td>
<script>
export default {
name: "rowComponent",
props: ['row']
}
</script>

Print all lines from account.invoice.line model

I created a new template for printing, and i want to customize it so it prints all the lines from account.invoice.line model. Is there a way you can do that. Here is the code of the template so far.
<t t-name="account.specifikacioni_report_document">
<t t-call="report.external_layout">
<div class="page">
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th class="text-right">Unit Price</th>
<th class="text-right" groups="sale.group_discount_per_so_line">Discount (%)</th>
<th class="text-right">Taxes</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line" t-as="l">
<td>
<span t-field="l.name"/>
</td>
<td>
<span t-field="l.quantity"/>
<span t-field="l.uos_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td class="text-right" groups="sale.group_discount_per_so_line">
<span t-field="l.discount"/>
</td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: x.name, l.invoice_line_tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
</tr>
</tbody>
</table>
</div>
</t>
</t>
This prints invoice lines for one invoice cause I copied the account.report_invoice_document and just edited it, but how can I list all invoice lines here not only the invoice lines for an invoice
You can follow the report_invoice.xml to print the lines.
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th class="text-right">Unit Price</th>
<th class="text-right" groups="sale.group_discount_per_so_line">Discount (%)</th>
<th class="text-right">Taxes</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line" t-as="l">
<td><span t-field="l.name"/></td>
<td>
<span t-field="l.quantity"/>
<span t-field="l.uos_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td class="text-right" groups="sale.group_discount_per_so_line"><span t-field="l.discount"/></td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: x.name, l.invoice_line_tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</tbody>
</table>

Join 2 rows into one based on condition

I´m fairly new to SQL and can´t get this around my head and need some help!
My table look something like this:
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="307" colspan="3" valign="top">
<p>
<strong>Kompetens</strong>
</p>
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
<strong>Emp.nr</strong>
</p>
</td>
<td width="102" valign="top">
<p>
<strong>Code</strong>
</p>
</td>
<td width="102" valign="top">
<p>
<strong>EndDate</strong>
</p>
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
111
</p>
</td>
<td width="102" valign="top">
<p>
Dansa1
</p>
</td>
<td width="102" valign="top">
<p>
2015-01-01
</p>
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
111
</p>
</td>
<td width="102" valign="top">
<p>
Dansa2
</p>
</td>
<td width="102" valign="top">
<p>
2015-02-01
</p>
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
222
</p>
</td>
<td width="102" valign="top">
<p>
Dansa1
</p>
</td>
<td width="102" valign="top">
<p>
2015-01-01
</p>
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
222
</p>
</td>
<td width="102" valign="top">
<p>
Dansa2
</p>
</td>
<td width="102" valign="top">
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
333
</p>
</td>
<td width="102" valign="top">
<p>
Dansa1
</p>
</td>
<td width="102" valign="top">
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
333
</p>
</td>
<td width="102" valign="top">
<p>
Dansa2
</p>
</td>
<td width="102" valign="top">
<p>
2015-02-02
</p>
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
444
</p>
</td>
<td width="102" valign="top">
<p>
Dansa1
</p>
</td>
<td width="102" valign="top">
<p>
2015-01-01
</p>
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
444
</p>
</td>
<td width="102" valign="top">
<p>
Dansa2
</p>
</td>
<td width="102" valign="top">
<p>
2015-02-01
</p>
</td>
</tr>
</tbody>
</table>
I would like to merge into 1 row per employee where both Dansa1 and Dansa2 has a EndDate. Like this:
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="102" valign="top">
<p>
<strong>Emp.nr</strong>
</p>
</td>
<td width="102" valign="top">
<p>
<strong>EndDate</strong>
</p>
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
111
</p>
</td>
<td width="102" valign="top">
<p>
2015-02-01
</p>
</td>
</tr>
<tr>
<td width="102" valign="top">
<p>
444
</p>
</td>
<td width="102" valign="top">
<p>
2015-02-01
</p>
</td>
</tr>
</tbody>
</table>
I also use a string variable to select wich employees to include:
SELECT [Emp.nr], [Code]
FROM [Kompetens]
WHERE [Emp.nr] IN #strEmp.nr
You wish to show only rows that have both entries, dansa1 and dansa2.
You can do so with group by, count and having:
SELECT [Emp.nr], max([EndDate])
FROM [Kompetens]
GROUP BY [Emp.nr]
HAVING count(*) > 1
Note: Like this, you don't precisely check if both rows have "Dansa1" and "Dansa2". It would also work if they had "Dansa1" twice. with max(), you select only the latest date.
Edit:
If you have rows that e.g. have no value in the field Code, then you can exclude them with the where clause, like this:
SELECT [Emp.nr], max([EndDate])
FROM [Kompetens]
WHERE Code IS NOT NULL AND Code != ""
GROUP BY [Emp.nr]
HAVING count(*) > 1
Where narrows the basis the aggregate functions are working with. Having narrows the result set created by the aggregate functions.
You can use group by . The query will look like :
SELECT [Emp.nr], [EndDate]
FROM [Kompetens]
group by [Emp.nr], [EndDate]

selenium not finding correct link using xpath

I'm trying to delete click on link generated by a previous test (a delete link) but I'm having great difficulty with xpath
Here is the error I am receiving
Invalid response while accessing the Selenium Server at 'http://localhost:4444/s
elenium-server/driver/': ERROR: Element xpath=(//td[normalize-space() ='Test tit
le 2']/following-sibling::td[3]/descendant::a[.='delete']) not found
here is my test
public function testdeleteStationTestCase()
{
$this->open("/upd8r_new/");
$this->click("css=a > img");
$this->waitForPageToLoad("30000");
$this->type("name=username", "glass2");
$this->type("name=password", "glass2");
$this->click("name=submit");
sleep(1);
$this->click("xpath=(//td[normalize-space() ='Test title 2']/following-sibling::td[3]/a[.='delete'])");
//$this->click("xpath=(//td[normalize-space() ='Test title 2']/following-sibling::td[3]/descendant::a[.='delete'][1])");
sleep(1);
$this->assertTrue($this->isTextPresent("Station deleted!"),"Station Deleted");
}
as you can see my commented out line i have been trying all sorts of combinations to get the test to run-
here is the html page I am testing against- i have added a line of text where I am trying to click
<body>
<!-- social media header -->
<div class="main">
<div class="header">
Central Control Panel
</div>
<div class="logo">
<img src="http://localhost/upd8r_new/imgs/loyalty_connect2.png"/>
</div>
<div style="clear:both"></div>
<ul class="Menu" id="maintab">
<li class="selected" rel="home">HOME </li>
<li rel="retail">
RETAIL </li>
<li rel="stats"> STATS</li>
<li
rel="social_media_settings"> SETTINGS</li>
<li rel="logout">LOGOUT </li>
</ul>
<div style="clear:both"></div>
<div style="text-align:left;width:980px;height:40px;background-color:#0E477A;margin:auto;padding-top:0px;">
<div style="width:700px;text-align:left;padding-left:10px;float:left">
<div id="logout" class="submenustyle">
</div>
<div id="retail" class="submenustyle">
<ul class="sub_menu">
<li>USERS</li>
<li>COMPETITIONS</li>
</ul>
</div>
<div id="home" class="submenustyle">
<ul class="sub_menu">
<li>ADD LIKESTATION</li>
<li>ADD PICSTATION</li>
<li>ADD VIDSTATION</li>
</ul>
</div>
<div id="socialmedia_users" class="submenustyle">
</div>
<div id="stats" class="submenustyle">
<ul class="sub_menu">
<li>STATS HOME</li>
<li>FACEBOOK STATS</li>
</ul>
</div>
<div id="social_media_settings" class="submenustyle">
<ul class="sub_menu">
<li>SETTINGS HOME</li>
<li>NETWORKS TO USE</li>
<li>PRE REGISTRATION</li>
<li>
APP SETTINGS
</li>
</ul>
</div>
</div>
<div style="float:right;font-weight:bold;color:#fff;margin-top:12px;margin-right: 20px;">
Logged In As: glass2 </div>
</div>
<div style="clear:both"></div>
<div style="padding-top:30px;padding-left:10px">Station deleted! </div>
<div style="padding-left:10px">
<table width="700px" align="left" style="text-align:left;">
<tr>
<td style="font-weight:bold">Pre-Registration</td>
<td>http://localhost/upd8r_new/retail/register/80</td>
</tr>
</table>
<div style="clear:both"></div>
<table width="800px" align="left" style="text-align:left;">
<tr style="font-weight:bold;background-color:#f1f1f1">
<td colspan="6" STYLE="text-align:center;font-weight:bold">LIKESTATIONS</td>
</tr>
<tr style="font-weight:bold;background-color:#f1f1f1">
<td width="10%">STATION ID</td>
<td width="32%">STATION NAME</td>
<td width="25%">LINK TITLE</td>
<td width="10%">STATION STATS</td>
<td width="15%">LAST POST</td>
<td width="8%"></td>
</tr>
<tr>
<td>gla20311344 </td>
<td>http://localhost/upd8r_new/socialmedia/edit/gla20311344 </td>
<td>Webcast </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla2084629867 </td>
<td>http://localhost/upd8r_new/socialmedia/edit/gla2084629867 </td>
<td>tes this link title3 </td>
<td>STATS </td>
<td>4 weeks ago</td>
<td>delete</td>
</tr>
</table>
<div style="clear:both"></div>
<table width="620px" align="left" style="text-align:left;">
<tr style="font-weight:bold;background-color:#f1f1f1">
<td colspan="5" STYLE="text-align:center;font-weight:bold">FACEBOOK PIC STATIONS</td>
</tr>
<tr style="font-weight:bold;background-color:#f1f1f1">
<td width="15%">STATION ID</td>
<td width="50%">STATION TITLE</td>
<td width="10%">STATION STATS</td>
<td width="15%">LAST POST</td>
<td width="10%"></td>
</tr>
<tr>
<td>gla1079978359 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>**link I'm trying to click**delete</td>
</tr>
<tr>
<td>gla1229158969 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla1256364596 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla1529784490 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla159062284 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla175038477 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla1777127061 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla180142977 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla1950664292 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla1971709701 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla2028774169 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla2035285297 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla2072665757 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla2115042517 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla2141659529 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla4705592 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla565900575 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla608150382 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
<tr>
<td>gla979271929 </td>
<td>Test title 2 </td>
<td>STATS </td>
<td>0</td>
<td>delete</td>
</tr>
</table>
<div style="clear:both"></div>
<table width="520px" align="left" style="text-align:left;">
<tr style="font-weight:bold;background-color:#f1f1f1">
<td colspan="4" STYLE="text-align:center;font-weight:bold">FACEBOOK VIDEO STATIONS</td>
</tr>
<tr style="font-weight:bold;background-color:#f1f1f1">
<td width="20%">STATION ID</td>
<td width="60%">STATION TITLE</td>
<td width="60%">STATION STATS</td>
<td width="20%"></td>
</tr>
</table>
<div style="clear:both"></div>
</div>
</div>
<div class="footer">
<div style="float:left;padding-top:20px;padding-left:20px;font-size:10px;font-family:arial"></div>
<div style="padding-top:20px;float:right;padding-right:30px;"><img src="http://localhost/upd8r_new/imgs/excelerated.jpg"/></div>
</div>
</body>
</html>
Your problem is in sleep(1);
In this place instead of sleep(1); you should use this:
$this->waitForCondition("selenium.isElementPresent(\'css=table:contains(\'FACEBOOK PIC STATIONS\') a:contains(\'delete\')\')", "20000");
And by the way, while you use selenium RC you can reach your delete link with this css (with webdriver it will not work as :contains is not a part of css spec):
$this->click("css=table:contains('FACEBOOK PIC STATIONS') a:contains('delete')");
Also replace all sleep(1); with appropriate waitForCondition commands
Install "XPath Checker 4.4" add-ons in Firefox. So for that object you will get proper xpath using this add-ons..
So,
click xpath=xpath for that object