I am having trouble scraping a site to get some information. I am very green with ruby but trying to learn as much as I can. The data will be sent to a Dashing.io dashboard using a google maps widget ( https://github.com/andmcgregor/dashing-map ) to get the current location of our delivery driver. This will be on a screen in our sale office so the staff know exactly where our driver is at a glance.
I have the following code:
require 'mechanize'
require 'open-uri'
require 'restclient'
agent = Mechanize.new
agent.get('http://ilogix.capitaltransport.com.au/iLogixLogin.asp')
agent.page.forms[0]["txtUsername"] = "someusername"
agent.page.forms[0]["txtPassword"] = "somepassword"
agent.page.forms[0].submit
page = agent.get('http://ilogix.capitaltransport.com.au/Home/iLogix_AlertInformation.asp?DisplayType=Comms')
url = puts page.parser.xpath('//table/tr/td/script')
which gets me here
irb(main):014:0* url = puts page.parser.xpath('//table/tr/td/script')
<script type="text/javascript">
//Set Table Headers
var myHeaders = ["Fleet","ID", "Name","Type","Status
","Last Update","Location","Information"];
//Set Grid Object
var obj = new AW.UI.Grid;
obj.setId("myGrid"); // necessary for CSS rules
//Virtual mode
obj.setVirtualMode(true); // Enable virtual mode
//Set Header Text
obj.setHeaderText(myHeaders);
//Set Number of Columns and their width
//Set the Number of columns
obj.setColumnCount(8);
//Set Column Widths
obj.setColumnWidth(130, 0); // set width of the column-1 Vehicle Details
obj.setColumnWidth(45, 1); // set width of the column-3 Fleet
obj.setColumnWidth(100, 2); // set width of the column-4 ID
obj.setColumnWidth(100, 3); // set width of the column-5 DisplayName
obj.setColumnWidth(100, 4); // set width of the column-6 Status
obj.setColumnWidth(130, 5); // set width of the column-7 Last Comms
obj.setColumnWidth(220, 6); // set width of the column-8 Location
obj.setColumnWidth(250, 7); // set width of the column-9 Bad GPS
obj.setCellText("Clutch and Brake (WA)",0,0);
obj.setCellText("7518",1 ,0);
obj.setCellText("7518",2 ,0);
obj.setCellText("Tray (1 T)",3,0);
obj.setCellText("",4,0);
obj.setCellText("26 Jun 2015 15:51:46",5,0);
obj.setCellText("414-424 Beechboro Rd, Morley 6102",6,0);
obj.setCellText(":: since last Communication Activity",7,0);
//number of rows and Height
obj.setRowCount(1);
obj.setRowHeight(20);
//Write Object to the Screen
document.write(obj);
</script>
=> nil
irb(main):015:0>
What I would like is to pull just the location string. I just cant figure it out. After that I think I will need to find a way to convert that to lat and long for use with the widget but I think this http://www.rubygeocoder.com/ will do it.
Here is the html. If someone can help or point me in the right direction I would really appreciate it because I am truly stuck. Thanks.
<html class=" aw-all aw-quirks aw-vista aw-png2" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body class="Body">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="width:100%;height:100%">
<tbody>
<tr style="height:100%">
<td>
<script type="text/javascript"></script>
<span id="myGrid" class="aw-system-control aw-grid-control aw-selectors-hidden " onselectstart="return false" oncontextmenu="AW(this,event)" hidefocus="true" tabindex="-1">
<span id="myGrid-box" class="aw-grid-box " onactivate="AW(this,event)">
<textarea id="myGrid-box-focus" class="aw-control-focus " onpaste="AW(this,event)" oncopy="AW(this,event)" oncut="AW(this,event)" onbeforecopy="AW(this,event)" onselectstart="AW(this,event)" onbeforedeactivate="AW(this,event)" tabindex="0"></textarea>
<span id="myGrid-scroll" class="aw-scroll-bars aw-scrollbars-none " onmousewheel="AW(this,event)" onresize="AW(this,event)" style="visibility: inherit;">
<span id="myGrid-scroll-box" class="aw-bars-box " onscroll="AW(this,event)"></span>
<span id="myGrid-scroll-content" class="aw-bars-content " style="right: 17px; bottom: 17px;">
<span id="myGrid-view" class="aw-hpanel-template ">
<span id="myGrid-view-box" class="aw-hpanel-box ">
<span id="myGrid-view-box-top" class="aw-hpanel-top " style="height:20px;visibility:inherit;"></span>
<span id="myGrid-view-box-middle" class="aw-hpanel-middle " style="top:20px;bottom:0px;">
<span id="myGrid-rows" class="aw-templates-list aw-grid-view ">
<span id="myGrid-rows-start" class="aw-view-top " style="height:0px;"></span>
<span id="myGrid-row-0" class="aw-templates-list aw-text-normal aw-grid-row aw-row-0 aw-rows-normal aw-alternate-even ">
<span id="myGrid-row-0-start" class="aw-row-start " style="width:0px;"></span>
<span id="myGrid-cell-0-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-0 aw-cells-normal " title=""></span>
<span id="myGrid-cell-1-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-1 aw-cells-normal " title=""></span>
<span id="myGrid-cell-2-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-2 aw-cells-normal " title=""></span>
<span id="myGrid-cell-3-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-3 aw-cells-normal " title=""></span>
<span id="myGrid-cell-4-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-4 aw-cells-selected " title=""></span>
<span id="myGrid-cell-5-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-5 aw-cells-normal " title=""></span>
<span id="myGrid-cell-6-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-6 aw-cells-normal " title=""></span>
<span id="myGrid-cell-7-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-7 aw-cells-normal " title=""></span>
<span id="myGrid-cell-8-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-8 aw-cells-normal " title=""></span>
<span id="myGrid-row-0-end" class="aw-item-template aw-grid-cell aw-column-space "></span>
</span>
<span id="myGrid-rows-end" class="aw-item-template aw-row-selector aw-selector-space "></span>
</span>
</span>
<span id="myGrid-view-box-bottom" class="aw-hpanel-bottom " style="height:0px;display:none;"></span>
</span>
</span>
</span>
</span>
<span id="myGrid-box-sample" class="aw-row-sample aw-grid-row "></span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I can create multiple Partialviews in my view
Create.cshtml
#model Opto.Models.Recipe
....
<div id="Far" class="tab-pane active card-body">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row form-group">
<div class="col">
<div class="text-left" dir="ltr">
<partial name="RecipeFarSighted.cshtml" Model="Model.FarSighted" />
</div>
<hr />
<div class="text-center" dir="rtl">
<div id="FarSightedBillsSection">
#*FarSightedBills will be created here by javascript*#
</div>
<a onclick="AddBill('far')" style="cursor:pointer"><img src="~/images/Plus.png" width="25" height="25" /></a>
<br /><br />
#if (!Model.FarSighted.Share)
{
<div class="form-group row form-check">
<label class="form-check-label col">
<input asp-for="FarSighted.Share" type="checkbox"> عدم دریافت عینک
</label>
</div>
}
</div>
</div>
</div>
<br />
</div>
...
#section Scripts{
<script>
var farIndex = 0;
var farRealCount = 0;
function AddBill(type)
{
tag = "<div id='farSightedBill" + farIndex + "' ><a onclick=\"RemovePartial('far'," + farIndex + ")\" style='cursor: pointer'><img src='/images/Minus.png' width='25' height='25' /></a><h4><a onclick=\"$('#farSighted" + farIndex + "').collapse('toggle')\" style='cursor: pointer' data-target='#farSighted" + farIndex + "' id='farBillTitle" + farIndex + "' > عینک دائمی " + (farRealCount + 1) + "</a ></h4 > <br /><div class='collapse' id='farSighted" + farIndex + "'></div></div > ";
$.get('/Glasses/DisplayFarBill?index=' + farIndex +
'&packFactor=' + '#(Model.FarSighted?.PackFactor)' + '&lenseCover=' + '#(Model.FarSighted?.LenseCover)',
function (partial) {
$('#FarSightedBillsSection').append(tag);
$('#farSighted' + farIndex).append(partial);
$('#farSighted' + farIndex).collapse('show');
//aaa(farIndex);
farIndex++;
farRealCount++
});
}
</script>
}
when I click the Back button of the browser and then forward, all my partial views will be disappeared. how can I solve this?
and when I go to submit action method in the controller for validation and there are some errors in it, when it goes back to view there are no parts in it, what should I do?
Firstly,the Back and Forward button is used for navigating through visited Web pages.And it may uses BFCache,it will cache the whole page including jquery(Source code).And the partial view you added will not shown after Back,Forward click is because it is added by jquery.jquery will change the html code,but will not change the source code.When you click Back,Forward button,browser will reload the Source code,and render it to html code.If you want to show the partial view,you can only add them directly like this in your code:
<div class="text-left" dir="ltr">
<partial name="RecipeFarSighted.cshtml" Model="Model.FarSighted" />
</div>
I try to get France that's behind Location:
I wrote this XPath: //div[#class="vevent"]/div/div/span[text()="Location: "]. That's how far I came, but how to I get France that comes after.
<div class="vevent">
<div style="float:left; padding-right: 20px;"><img alt="I’M YOUR DJ New Year Edition / 5th Anniversary Celebration" src="https://res.cloudinary.com/latindancecalendar/image/fetch/w_350,h_350/https%3A%2F%2Fi1.wp.com%2Flatindancecalendar.com%2Fdancecal%2Fwp-content%2Fuploads%2F50015933_2182298412088647_1361353647551676416_o.jpg%3Fresize%3D350%252C350%26ssl%3D1" width="200" height="200" scale="0"></div>
<div style="float:left;"><span class="dtstart"><span class="value-title" title="2019-12-27"></span></span><span><b>Friday, 27 December 2019</b></span>
<div><span class="location">Château Lafitte Yvrac ( Bordeaux ) - SCEA Chateau LAFITTE 41 Chemin du Loup, 33370 Yvrac, Aquitaine, France</span></div>
<div>Hosted by <b>I’M YOUR DJ – New Year Edition – Bordeaux</b></div>
<div><span>Location: </span>France</div>
<div><span class="eventpostviews"><i class="fas fa-map-marker-alt" style="padding-right: 5px;"></i>Map | 175 Views | <a style="color:#8F8F8F;" href="https://latindancecalendar.com/report-a-listing/?listing-url=https%3A%2F%2Flatindancecalendar.com%2Ffestivals%2Fim-your-dj-new-year-edition-5th-anniversary-celebration-2019%2F" rel="nofollow"><i class="fas fa-times" style="padding-right: 3px;font-size: 11px;"></i>Report Problem</a></span></div>
<div style="padding-top: 20px;">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Flatindancecalendar.com%2Ffestivals%2Fim-your-dj-new-year-edition-5th-anniversary-celebration-2019%2F&width&layout=button_count&action=like&size=large&show_faces=false&share=false&height=35&appId=532405580227185" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowtransparency="true"></iframe>
</div>
</div>
</div>
This should work:
//div[#class="vevent"]/div/div[span = "Location: "]/text()
It selects the div that contains a span with the string value "Location: " and then retrieves the text node directly within that div.
Better give the html in script. Not picture.
And I guess you can use:
'''
following::text()
'''
As I know, when popup/modal opens it is on the top of page where I opened it from, so when try to fill value in it don't see where it need to do that.
Then tried to look inside modal with within. Tried other classes, but same Capybara::ElementNotFound: Unable to find visible css "modal183"
within('modal183') do
fill_in 'ctl00_ContentPlaceHolder1_tbId', :with => '10'
end
Tried also find with xpath, but also nothing
Capybara::ElementNotFound: Unable to find visible xpath "//input[#id='ctl00_ContentPlaceHolder1_tbId']"
<div class="modal183">
<div class="popup_Titlebar" id="PopupHeader">
<div class="TitlebarLeft">
<span id="ctl00_ContentPlaceHolder1_lblTitle">text</span>
</div>
</div>
<div class="popup_Body">
<div class="popup_TextNoTop">
<span id="ctl00_ContentPlaceHolder1_lbl1" class="label-left">text</span>
<input name="ctl00$ContentPlaceHolder1$tbId" type="text" id="ctl00_ContentPlaceHolder1_tbId" class="txtInputDec width100" onFocus="ClearTheTextbox(this, '')" onBlur="FillTheTextbox(this, '')" onkeypress="return onlyNumbers()" />
<span id="ctl00_ContentPlaceHolder1_cmrvIB" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text</span></a></span>
<span id="ctl00_ContentPlaceHolder1_revIB" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text
</span></a></span>
<span id="ctl00_ContentPlaceHolder1_rvTb" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text</span></a></span>
<br />
<span id="ctl00_ContentPlaceHolder1_lbl2" class="label-left">text</span>
<input name="ctl00$ContentPlaceHolder1$tb1Id" type="text" id="ctl00_ContentPlaceHolder1_tb1Id" class="txtInputDec width100 top5" onFocus="ClearTheTextbox(this, '')" onBlur="FillTheTextbox(this, '')" onkeypress="return onlyNumbers()" />
<span id="ctl00_ContentPlaceHolder1_rev1IB" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text
</span></a></span>
<span id="ctl00_ContentPlaceHolder1_rvTb1" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text</span></a></span>
</div>
</div>
<div class="popup_Buttons">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<a onclick="if (!window.event) {this.disabled=true; this.style.color='grey'; var but = document.getElementById('btnCancel'); but.disabled=true; but.style.color='grey';};" id="ctl00_ContentPlaceHolder1_btnOkay" class="cool-button width80 blue" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$btnOkay", "", true, "cons", "", false, true))">text</a>
</td>
<td align="right">
<a id="ctl00_ContentPlaceHolder1_btnCancel" class="cool-button width80 black" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$btnCancel','')">Atcelt</a>
</td>
</tr>
</table>
</div>
</div>
Updated: Attached part where it looks like be this popup which appear after I press on button. Inspect code shows on this code. I didn't wrote this code, but trying to build automated tests on them :)
<div id="popupparent" style="display: block; height: 1e+06px; left: 0px; top: 0px;">
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
var h = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
var w = "innerWidth" in window ? window.innerWidth : document.documentElement.offsetWidth;
var doc;
if (obj.contentDocument) {
doc = obj.contentDocument;
} else if (obj.contentWindow) {
doc = obj.contentWindow.document;
} else {
return;
}
var childHeight = doc.body.scrollHeight;
var childWidth = doc.body.scrollWidth;
obj.style.height = childHeight + 'px';
var ver = getInternetExplorerVersion();
var parent = document.getElementById('termsofuse');
if (ver > -1) {
parent.style.marginTop = ((h - childHeight) / 2) - 64 + 'px';
} else {
parent.style.top = ((h - childHeight) / 2) - 64 + 'px';
}
parent.style.left = ((w - childWidth) / 2) + 'px';
parent.style.display = "block";
parent.style.visibility = "visible";
}
<div id="termsofuse" style="left: 1081px; top: 246.5px; display: block; visibility: visible;">
<iframe id="frameeditexpanse" frameborder="0" src="PopDailyCons.aspx?e=c0lEPUMwMDEwMDA3MDQmYUlEPUEwMDQ3ODIxNzAmZGF5PTImY3VyRGF0ZT0yMDE4LjA0JmN1clVzZXI9MTYwJnNvdXJjZT1hdGs=" scrolling="no" marginheight="0" marginwidth="0" class="termsOfUseFrame" style="height: 185px;"> </iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOk" value="Done" type="button">
<input id="btnCancel" value="Cancel" type="button" onclick="hideusertermwindow()">
Your within call doesn't work because you need to pass it a CSS selector. You're passing modal183 which would look for a <modal183> element, when what you really want is .modal183 to look for an element with the class modal183.
From your description it's tough to tell exactly what you're doing but it sounds like maybe you're talking about a popup window (new browser window) opened on top of the current tab. If that is the case then you'd need to swap windows in order to interact with it, along the lines of
new_win = window_opened_by do
# whatever action in the original window causes the popup window to open
click_button 'blah'
end
within_window(new_win) do
fill_in 'ctl00_ContentPlaceHolder1_tbId', :with => '10'
end
This is my HTML file data:
<article class='course-box'>
<div class='row-fluid'>
<div class='span2'>
<div class='course-cover' style='width: 100%'>
<img alt='' src='https://d2d6mu5qcvgbk5.cloudfront.net/courses/cover_photos/c4f5fd2efb200e71d09014970cf0b8c86e1e7013.png?1375831955'>
</div>
</div>
<div class='span10'>
<h2 class='coursetitle'>
<a href='https://novoed.com/hc'>Hippocrates Challenge</a>
</h2>
<figure class='pricetag'>
Free
</figure>
<div class='timeline independent-text'>
<div class='timeline inline-block'>
Starting Spring 2014
</div>
</div>
By Jill Helms
<div class='university' style='margin-top:0px; font-style:normal;'>
Stanford University
</div>
</div>
</div>
<div class='hovered row-fluid' onclick="location.href='https://novoed.com/hc'">
<div class='span2'>
<div class='course-cover'>
<img alt='' src='https://d2d6mu5qcvgbk5.cloudfront.net/courses/cover_photos/c4f5fd2efb200e71d09014970cf0b8c86e1e7013.png?1375831955' style='width: 100%'>
</div>
</div>
<div class='span10'>
<h2 class='coursetitle' style='margin-top: 10px'>
<a href='https://novoed.com/hc'>
Hippocrates Challenge
</a>
</h2>
<p class='description' style='width: 70%'>
Hippocrates Challenge 2014 is a course designed for anyone with an interest in medicine. The course focuses on teaching anatomy in an interactive way, students will learn about diagnosis and treatment planning while...
</p>
<div style='margin-right: 10px'>
<a class='btn action-btn novoed-primary' href='https://novoed.com/users/sign_up?class=hc'>
Sign Up
</a>
</div>
</div>
</div>
from above the code i need to fetch the following tag class values.
coursetitle
coursetitle href link
pircetag
timeline inline-block
uinversity
description
instructor name
but coursetitle is available in two places but i need only once. same instructor name does not contain any specifi tag to fecth.
my xpath queries are:
novoedData = HtmlXPathSelector(response)
courseTitle = novoedData.xpath('//div[re:test(#class, "row-fluid")]/div[re:test(#class, "span10")]/h2[re:test(#class, "coursetitle")]/a/text()').extract()
courseDetailLink = novoedData.xpath('//div[re:test(#class, "row-fluid")]/div[re:test(#class, "span10")]/h2[re:test(#class, "coursetitle")]/a/#href').extract()
courseInstructorName = novoedData.xpath('//div[re:test(#class, "row-fluid")]/div[re:test(#class, "span10")]/text()').extract()
coursePriceType = novoedData.xpath('//div[re:test(#class, "row-fluid")]/div[re:test(#class, "span10")]/figure[re:test(#class, "pricetag")]/text()').extract()
courseShortSummary = novoedData.xpath('//div[re:test(#class, "hovered row-fluid")]/div[re:test(#class, "span10")]/p[re:test(#class, "description")]/text()').extract()
courseUniversity = novoedData.xpath('//div[re:test(#class, "row-fluid")]/div[re:test(#class, "span10")]/div[re:test(#class, "university")]/text()').extract()
but the number of values in each list variable is difference:
len(courseTitle) = 40 (two times because of repetition)
len(courseDetailLink) = 40 (two times because of repetition)
len(courseInstructorName) = 160 (some unwanted character is coming because no specific tag for this value)
len(coursePriceType) = 20 (correct count no repetition)
len(courseShortSummary)= 20 (correct count no repetition)
len(courseUniversity) = 20 (correct count no repetition)
kindly modify my xpath query to solve my problem. thanks in advance..
you dont need that re:test, simply do:
>>> s = sel.xpath('//div[#class="row-fluid"]/div[#class="span10"]')[0]
>>> len(s)
1
>>> s.xpath('h2[#class="coursetitle"]/a/#href').extract()
[u'https://novoed.com/hc']
also note that once s is set on the right place you can just continue from it.
I have 10 images that are displayed as a slideshow using the Jquery Cycle plugin.
At a time 4 images are displayed . When the user clicks the next button the next 4 images are displayed.
Under each image there is a dropdown. When I select an item in the dropdown I want to change the image to some other image depending on the item the user has selected in the dropdowm.
I also need to change the 'href' of the image when the user selects another item in the dropdown.
When the user selects an item in the dropdown I using the javascript code given below to change the image and other details
Javascript Code
document.getElementById('prodLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
document.getElementById('prodImageLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
document.getElementById('prodImage' + productId).src = "ProductImages/" + productImage;
document.getElementById('prodImage' + productId).className=document.getElementById('prodImage' + productId).className;
document.getElementById('prodNameLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
document.getElementById('productPrice' + productId).innerHTML = productPrice;
document.getElementById('prodAttribute' + productId).innerHTML = attributeValue;
The HTML Code
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="0"
data-cycle-slides="> ul" data-cycle-prev="div.pagers a.latest_prev" data-cycle-next=
"div.pagers a.latest_nxt">
<ul class="product_show">
<li class="column">
<div class="img">
<div class="hover_over">
<a class="link" href="#">link</a> <a class="cart" href="#">cart</a>
</div><a href="#"><img src="images/photos/4c_pic8.jpg" width="218" height="207"
alt="" /></a>
</div><a href="#" style="line-height:14px;">Product 1,<br />
1 Kg Pouch<br /></a> <span class="ourPrice">Our Price: $121.20</span><span class=
"saveText"><br /></span>
<div class="dropdowndiv">
<select name="search_category1" class="default" tabindex="1" style=
"color: #333333;">
<option value="">
Pack size
</option>
<option value="amazed">
Amazed
</option>
</select>
</div><br />
<br />
<label for="textfield">Qty</label> <input type="text" name="textfield" id=
"textfield" class="carttextbox" /> <img src="images/img/but_addtocart.png"
alt="" width="72" height="16" align="absmiddle" /><br />
<br />
</li>
</ul>
Here is the modified working javascript code that changes the image(and some other information) in a Jquery Cycle2 slideshow
I added $('.cycle-slideshow').cycle('destroy'); before changing any information
After that I change all the required information
Then I call $('.cycle-slideshow').cycle(); to recreate the slideshow
$('.cycle-slideshow').cycle('destroy');
document.getElementById('prodLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
document.getElementById('prodImageLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
document.getElementById('prodImage' + productId).src = "ProductImages/" + productImage;
document.getElementById('prodImage' + productId).className=document.getElementById('prodImage' + productId).className;
document.getElementById('prodNameLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
document.getElementById('productPrice' + productId).innerHTML = productPrice;
document.getElementById('prodAttribute' + productId).innerHTML = attributeValue;
$('.cycle-slideshow').cycle();