i have an arrow image, which i want to turn according to a degree value I get in javascript (g_drivers[i].heading) .
<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">
This is working fine. I get a degree value every 3 seconds or so and the image rotates by that value.
I would now like a smooth transition when the degree changes every 3 seconds or so.
The CSS must look something like this...
.dir_img {
transition: transform 2s;
}
For some reason the .dir_img class is not catching that transition.
I am adding elements in the following manner:
I am creating the HTML out of JavaScript variables:
var html = '<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">'
and then I append this like this:
document.getElementById('sidebar-scroll').innerHTML = html;
And this for some reason isn't working.
Here is the function, where I added Kosh Very's code, but it is still not working:
function displayDriversInSidebar() {
var countM = 0; //Moving
var countS = 0; //Standing
var countI = 0; //Inaktiv (no_signal = 1)
var countO = 0; //Offline (online = 0)
var activeCSS = '';
var status_img;
var dir_img;
var movingDrivers = '<tbody class="sidebar_header"><tr><td>In Bewegung<span id="moving_counter">0</span></td></tr></tbody><tbody>';
var standingDrivers = '<tbody class="sidebar_header"><tr><td>Steht <span id="standing_counter">0</span></td></tr></tbody><tbody>';
var inactiveDrivers = '<tbody class="sidebar_header"><tr><td>Inaktiv <span id="inactive_counter">0</span></td></tr></tbody><tbody>';
var offlineDrivers = '<tbody class="sidebar_header"><tr><td>Offline <span id="offline_counter">0</span></td></tr></tbody><tbody>';
for (var i = 0; i < g_drivers.length; i++) {
if (g_drivers[i].updated == 'yes') {
status_img = 'images/sidebar/signal3.png';
} else if (g_drivers[i].updated == 'waiting') {
status_img = 'images/sidebar/signal2.png';
} else if (g_drivers[i].updated == 'NA') {
status_img = 'images/sidebar/signal1.png';
} else {
status_img = 'images/sidebar/signal0.png';
}
if (g_drivers[i].heading === 0 || isNaN(g_drivers[i].heading) === true || g_drivers[i].headingOldCounter >= 30) {
dir_img = 'images/sidebar/no_dir.png';
} else {
dir_img = 'images/sidebar/arrow.png';
}
if (g_activeID == g_drivers[i].uuid) {
activeCSS = ' active';
} else {
activeCSS = '';
}
if (g_drivers[i].online === true) {
if (g_drivers[i].headingOldCounter >= 30 && g_drivers[i].no_signal == 0){
g_drivers[i].heading = 0;
countS += 1;
standingDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div id="driver_info" class="driver_info"><img class="signal_img" src="' + status_img + '"></div>' +
//'<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg);" src="' + dir_img + '">' +
'<img id="img_' + g_drivers[i].uuid + '" class="dir_img" src="' + dir_img + '">' +
'</div>' +
'</td></tr>';
} else if (g_drivers[i].no_signal == 1) {
countI += 1;
inactiveDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div id="driver_info" class="driver_info"></div>' +
'' +
'</div>' +
'</td></tr>';
} else {
countM += 1;
movingDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div id="driver_info" class="driver_info"><img class="signal_img" src="' + status_img + '"></div>' + //<p class="img__description">' + timeConverter(g_drivers[i].signal_time) + '</p>
//'<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg);" src="' + dir_img + '">' +
'<img id="img_' + g_drivers[i].uuid + '" style="transition: transform 2s;" src="' + dir_img + '">' +
'</div>' +
'</td></tr>';
}
} else if (g_drivers[i].online === false) {
countO += 1;
offlineDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div class="driver_info"> </div>' +
'</div>' +
'</td></tr>';
} else {
console.log('Hier darf eigentlich nix passieren');
}
}
movingDrivers += '</tbody>';
inactiveDrivers += '</tbody>';
standingDrivers += '</tbody>';
offlineDrivers += '</tbody>';
document.getElementById('sidebar-scroll').innerHTML = '<table class="sidebar_table">' + movingDrivers + standingDrivers + inactiveDrivers + offlineDrivers + '</table>';
document.getElementById('moving_counter').innerHTML = countM;
document.getElementById('standing_counter').innerHTML = countS;
document.getElementById('inactive_counter').innerHTML = countI;
document.getElementById('offline_counter').innerHTML = countO;
for (var j = 0; j < g_drivers.length; j++) {
if (g_drivers[j].online === true && g_drivers[j].no_signal === 0 && g_drivers[j].headingOldCounter < 30) {
//added the following line, to get better data-values
g_drivers[j].heading = Math.random()*360;
document.getElementById('img_' + g_drivers[j].uuid).style.transform = 'rotate(' + g_drivers[j].heading + 'deg)';
}
}
}
CSS transitions allows you to change property values smoothly (from
one value to another), over a given duration.
But, you're not changing the property (transform) in your code. You're replacing img so it has no start and end values for the transition.
Like this:
var dir_img = 'https://image.freepik.com/iconos-gratis/flecha-hacia-arriba_318-74795.jpg';
setInterval(function() { // emulating the data changes continuously
var g_drivers = [
{id:1, heading: ~~(Math.random()*360)},
{id:2, heading: ~~(Math.random()*360)}
];
var html = '';
for (var i in g_drivers)
html += '<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">';
document.getElementById('sidebar-scroll').innerHTML = html;
}, 500);
.dir_img {
width:70px; margin:20px;
transition: transform 2s;
}
<div id="sidebar-scroll"></div>
But if you need the transitions to be applied you have to keep the images and change their transform property like this:
var dir_img = 'https://image.freepik.com/iconos-gratis/flecha-hacia-arriba_318-74795.jpg';
var sidebar = document.getElementById('sidebar-scroll');
// setting up the drivers (initially empty):
var drivers = {};
// emulating the data changes continuously
setInterval(function() {
var drivers_data = {
'driver_1': {heading: ~~(Math.random()*360)},
'driver_2': {heading: ~~(Math.random()*360)}
};
for (var i in drivers_data) {
if (!drivers[i]) { // it's a new driver, lets add it:
drivers[i] = Object.assign({}, drivers_data[i]);
sidebar.innerHTML += '<img id="' + i + '" class="dir_img" src="' + dir_img + '">';
}
// now change driver's property:
document.getElementById(i).style.transform = 'rotate(' + drivers_data[i].heading + 'deg)';
}
}, 1000);
.dir_img {
width:70px; margin:20px;
transition: transform .7s;
}
<div id="sidebar-scroll"></div>
Use CSS transitions. This will let you ease between the transforms. Couple that with the setInterval that you should be using to get the amount you need to transform each iteration.
For example, the below snippet will have the transform ease between whatever the current transform is and the target transform over the course of 200ms (milliseconds).
const img = document.getElementById("image"),
input = document.getElementById("amount");
let curr = 0;
setInterval(() => {
curr += (parseInt(input.value, 10) || 0);
img.style.transform = `rotate(${curr}deg)`;
}, 1000);
.rotater {
transition: transform 200ms ease;
}
<div><label for="amount">How much to rotate by</label> <input type="number" id="amount" value="10" step="10" min="10" max="90"></div>
<div>
<img id="image" class="rotater" src="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be">
</div>
Related
I have the following JS code for which I am calculating the insurance cost based on input provided by the user:
function AddQuote() {
if (ValidateInputs()) {
var json = {};
$(":input").each(function () {
json[$(this).attr("id")] = $(this).val();
});
var nextId = Number(localStorage.getItem('nextId'));
if (!nextId) {
nextId = 1;
}
localStorage.setItem("quote-" + nextId, JSON.stringify(json));
localStorage.setItem("nextId", String(nextId + 1));
$(location).prop('href', 'viewQuote.html?' + nextId);
}
}
function LoadQuoteData(id) {
var json = JSON.parse(localStorage.getItem("quote-" + id));
$(":input").each(function () {
$(this).val(json[$(this).attr("id")]);
});
var driverAge = Number(json['age']);
var driverExperience = Number(json['experience']);
var driverAccidents = Number(json['accidents']);
var subQuote;
var insuranceQuote = Number(json['finalQuote']);
if (driverExperience === 0) {
subQuote = 4000;
}
else if (driverExperience >= 1 && driverExperience <= 9) {
subQuote = 2500;
}
else {
subQuote = 1800;
}
if (driverAge >= 30 && driverExperience >= 2) {
insuranceQuote = subQuote * 0.75;
}
else {
insuranceQuote = subQuote;
}
//console.log(insuranceQuote);
console.log(json);
$("#finalQuote").val("$" + insuranceQuote);
}
I am using this in my HTML code as follows:
<script>
$(document).ready(function () {
var localStorageItems = Object.entries(localStorage);
var htmlCode = "";
$(localStorageItems).each(function () {
if ($(this)[0].startsWith("quote")) {
console.log($(this)[0]);
console.log($(this)[1]);
var quoteData = JSON.parse($(this)[1]);
var quoteAmount = "$" + quoteData['finalQuote'];
htmlCode +=
"<div class='container'>" +
"<div class='row pb-4 pt-4' style='border-bottom: 1px solid rgba(0,0,0,.125);'>" +
"<div class='col-md-6 '>" +
"<div class='card-header' style='margin-left: -1rem; margin-right: -1rem;'>Customer Information</div>" +
"<span class='d-block'><strong>First Name:</strong> " + quoteData['firstName'] + "</span>" +
"<span class='d-block'><strong>Last Name:</strong> " + quoteData['lastName'] + "</span>" +
"<span class='d-block'><strong>Address:</strong> " + quoteData['address'] + "</span>" +
"<span class='d-block'><strong>City:</strong> " + quoteData['city'] + "</span>" +
"<span class='d-block'><strong>Province:</strong> " + quoteData['province'] + "</span>" +
"<span class='d-block'><strong>Postal Code:</strong> " + quoteData['postalCode'] + "</span>" +
"<span class='d-block'><strong>Phone Number:</strong> " + quoteData['phone'] + "</span>" +
"<span class='d-block'><strong>Email:</strong> " + quoteData['email'] + "</span>" +
"</div>" +
"<div class='col-md-6'>" +
"<div class='card-header' style='margin-left: -1rem; margin-right: -1rem;'>Driving Information</div>" +
"<span class='d-block'><strong>Accidents:</strong> " + quoteData['accidents'] + "</span>" +
"<span class='d-block'><strong>Age:</strong> " + quoteData['age'] + "</span>" +
"<span class='d-block'><strong>Driving Experience:</strong> " + quoteData['experience'] + "</span>" +
"<span class='d-block'><strong>Insurance Quote:</strong> " + quoteAmount + "</span>" +
"<span class='d-block'><strong>" +
"</span>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
};
});
$("#quotesList").html(htmlCode);
});
</script>
But the problem is that the calculated finalQuote is not showing up on this HTML page (but all other fields are). Any ideas on what I'm missing / not doing correctly?
I have created some dynamic products. What I want is that if the product quantity decrease to for example 3 then turn into orange or if it´s only one left then turn into red.
Here is the javascript of the dynamical products for the admin view:
function showProductAdmin() {
lblProductList.innerHTML = "";
for ( var i = 0; i < ajProductDataFromServer.length; i++ ) {
var lblProduct = '<div class="lblProduct">' + '<img src="' + ajProductDataFromServer[i].image + '"width="85%" alt="product" class="lblProductImage" data-productImage="' + ajProductDataFromServer[i].image + '">' + '<h3 class ="lblProductName" data-productName="' + ajProductDataFromServer[i].name + '" >' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice" data-productPrice="' + ajProductDataFromServer[i].price + '">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity" data-productQuantity="' + ajProductDataFromServer[i].quantity + '">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button id="btnEditProductBody" class="btnShowPage btnEditProduct" data-showThisPage="pageUpdateProduct" data-productId="' + ajProductDataFromServer[i].id + '">' + 'EDIT PRODUCT' + '</button>' + '<button class="btnDeleteProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'DELETE PRODUCT' + '</button>' + '<h3 class="lblErrorMessage" id="lblDeleteProductErrorMessage">' + '</h3>' + '</div>';
lblProductList.insertAdjacentHTML( 'beforeend', lblProduct );
showPages();
}
}
and then for the user view:
function showProduct() {
lblProductList.innerHTML = "";
for ( var i = 0; i < ajProductDataFromServer.length; i++ ) {
var lblProduct = '<div class ="lblProduct">' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" alt="product">' + '<h3 class ="lblProductName">' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'BUY PRODUCT' + '</button>' + '</div>';
lblProductList.insertAdjacentHTML( 'beforeend', lblProduct );
}
}
also here the btnBuyProduct click event:
// BUY product for user
document.addEventListener( "click", function(e) {
if ( e.target.classList.contains( "btnBuyProduct" ) ) {
sProductId = e.target.getAttribute( "data-productId" );
console.log( sProductId );
var sUrl = "api_buy_product.php?id=" + sProductId;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if ( this.readyState == 4 && this.status == 200 ) {
ajProductDataFromServer = JSON.parse( this.responseText );
console.log( "Response:" + ajProductDataFromServer );
if ( ajProductDataFromServer.buy == "ok" ) {
if ( !window.Notification ) {
alert( "Sorry, Notification Not supported in this Browser!" );
} else {
if ( Notification.permission === 'granted' ) {
notify = new Notification( 'SHOPAHOLIC.com', {
body: 'The product has been added to your shopping cart!"', // the name of the pruduct
icon: 'img_webshop/Fashion-Logo-6.png' // I could show the respective product image
});
}
}
playSound();
getajProductData();
//console.log( ajProductDataFromServer.quantity );
console.log( "PRODUCT QUANTITY DECREASED IN THE DATABASE" );
} else {
console.log( "PRODUCT QUANTITY DID NOT DECREASE IN THE DATABASE" );
lblDeleteProductErrorMessage.innerHTML = "";
var sDeleteProductErrorMessage = "Deleting Product Failed - Try again";
lblDeleteProductErrorMessage.insertAdjacentHTML( 'beforeend', sDeleteProductErrorMessage );
}
}
}
request.open( "GET", "api_buy_product.php?id=" + sProductId, true );
request.send();
}
});
What would be the simpliest way to update this color change for both admin and user view?
When displaying products amount, wrap the number into the <span> element, and based on the ajProductDataFromServer[i].quantity, add matching classes to the wrapping <span>:
CSS:
span.orange { color: orange; }
span.red { color: red; }
span.green { color: green }
In your showProduct():
1) Before the var lblProduct = ..., add:
var className = '';
if(ajProductDataFromServer[i].quantity > 3) {
className = 'green';
} else if(ajProductDataFromServer[i].quantity <= 1) {
className = 'red';
} else {
className = 'orange';
}
or shorter version:
var q = ajProductDataFromServer[i].quantity;
var className = q > 3 ? 'green' : q <= 1 ? 'red' : 'orange';
and then, replace this part:
'<h3 class ="lblProductQuantity">' +
'Quantity:' + ' ' + ajProductDataFromServer[i].quantity +
'</h3>'
with this:
'<h3 class ="lblProductQuantity">' +
'Quantity:' +
' ' +
'<span class=' + className + '>' +
ajProductDataFromServer[i].quantity +
'</span>' +
'</h3>'
I have this json data
somehow i displayed this part of data in html
and want to display this part of data
into div in html but i am unable to display it using for loop and don't to how to start each function from index 1 as index 0 in personal details data.
here is my code
var url = "http://localhost/ReadExchange/api.php";
$.getJSON(url, function(data) {
if (data) {
alert("hey got the data" + JSON.stringify(data));
var arr = data.length;
//$.each(data, function(i,element) {
var element = data[0];
$("#postjson").append(
'<div id="' + element.id + '">' + '<p>' + 'FirstName:' + element.FirstName + '<br/>'
+ 'MiddleName:' + element.MiddleName + '<br/>' + 'LastName:' + element.LastName + '<br/>' + 'Gender:' + element.Gender + '<br/>' + 'Location:' + element.Location + '<br/>' + 'Email:' + element.Email + '<br/>' + 'Mobile:' + element.Mobile + '<br/>' + '</p>' + '</div>'
);
for (var i = 1; i < arr; i++) {
$("#postjson").append(
'<div id="">' + '<p>' + 'BookTitle:' + data[i].data.BookTitle + '<br/>' + 'BookGenre:' + data[i].data.BookGenre + '<br/>' + 'BookWriter:' + data[i].data.BookWriter + '<br/>' + 'Gender:' + data[i].data.BookDescription + '<br/>'
+ '</p>' + '</div>'
);
}
} else {
return;
}
You can use Array.prototype.splice()
data.splice(0, 1);
then iterate data array at for loop, with i set to 0
var data = [{abc:123}, {def:456}];
data.splice(0, 1);
for (var i = 0; i < data.length; i++) {
alert(JSON.stringify(data))
}
I am building a conference website with some concurrent sessions in the schedule.
As you can see in the screenshot the seminar 3 is supposed to be concurrent with seminar 1 & 2 but they are separated. Below kindly find the relevant code. Could anyone tell what the reason might be?
Screenshot of Event Schedule in my Website
_addNewContent = function (msg) {
var lastBlock = false;
var lastConcurrent = false;
if (_page == 1) {
_wrapper.html('');
}
$.each(msg.sessions, function (i) {
if (lastBlock) {
var lastTime = lastBlock.find('.schedule__time').text();
lastTime = lastTime.split('-');
if ($.trim(lastTime[0]) == this.time) {
if (!lastConcurrent) {
lastConcurrent = $('<div class="schedule__concurrent"></div>').appendTo(_wrapper);
}
lastConcurrent.append(lastBlock);
} else {
if (lastConcurrent) {
lastConcurrent.append(lastBlock);
lastConcurrent = false;
} else {
_wrapper.append(lastBlock);
}
}
}
var newBlockString = '<div class="schedule__item ' + _dropdown + ' more-content__item">' +
'<time class="schedule__time" datetime="' + this.time + '">' + this.time + ' - ' + this.end_time + '</time>' +
'<h2 class="schedule__event">' + this.post_title + '</h2>' +
'<div class="schedule__details">';
if (_dropdown) {
newBlockString += ' <a class="schedule__close" href="#"><i class="fa fa-times"></i></a>';
}
newBlockString += '<i class="fa fa-location-arrow"></i> ' + this.location + '' +
'<div class="schedule__layout">' +
'<div class="schedule__speakers-group">'; // schedule__speakers-group
$.each(this.speakers, function () {
var speaker_image = '';
if (typeof (this.post_image[0]) !== 'undefined') {
speaker_image = 'background-image: url(' + this.post_image[0] + ')';
}
var favourite = this.featured ? 'speakers-favorite speakers-favorite_small' : '';
newBlockString += '<a href="' + this.url + '" class="schedule__speaker">' + // schedule__speaker
'<div class="schedule__speaker-pic ' + favourite + '" style="' + speaker_image + '">' +
'<span class="schedule__speaker-hover">' + msg.strings.view_profile + '</span>' +
'</div>' +
'<h3 class="schedule__speaker-name">' + this.post_title + '</h3>' +
'</a>'; // /schedule__speaker
});
newBlockString += '</div>' + // /schedule__speakers-group
'<div class="schedule__info">' +
'<div class="schedule__text">' + this.post_excerpt + '</div>' +
'<div class="schedule__labels">';
$.each(this.tracks, function () {
newBlockString += '<span class="label" style="background-color:' + this.color + ';">' +
this.name +
'</span> ';
});
newBlockString += '</div>' +
'' + msg.strings.more_info + '' +
'</div>' + // /schedule__info
'</div>' + // /schedule__layout
'</div>' + // /schedule__details
'</div>'; // /schedule__item
var newBlock = $(newBlockString);
if (msg.sessions.length == 1 || msg.sessions.length == i + 1) {
_wrapper.append(newBlock);
}
lastBlock = newBlock;
});
var newItems = _wrapper.find('.hidden');
setTimeout(function () {
$.each($('.schedule__items'), function () {
new ScheduleOpen($(this));
});
}, 10);
setTimeout(function () {
_heightAnimation(msg.has_items, newItems);
}, 50);
},
I guess your website first read an array of conference sessions before running this whole function.
And I found this part
if (msg.sessions.length == 1 || msg.sessions.length == i + 1) {
_wrapper.append(newBlock);
}
may prevents some of the conference sessions becoming concurrent to the last conference session, especially the last array item.
You can change it to
if (msg.sessions.length == 1) {
_wrapper.append(newBlock);
}
if (msg.sessions.length == i + 1) {
if (lastConcurrent) {
lastConcurrent.append(newBlock);
} else {
_wrapper.append(newBlock);
}
}
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
I have the following function from where i want to return the htm value however i am getting an undefined. I get a return value as i have checked that already.
function loadData(uid) {
$.ajax({
type: "POST",
url: '<%= page.resolveURL("~")%>Haggler.asmx/getLovedProductsSellerStoreByFbId',
//url: '<%= Page.ResolveUrl("~")%>Haggler.asmx/GetFacebookFriends',
data: '{FacebookId:' + uid + ',pageIndex:' + JSON.stringify(pageIndex) + '}',
contentType: "application/json; charset=utf-8",
dataType: 'json',
async: true,
// Page parameter to make sure we load new data
success: function (data) {
var myObject = eval('(' + data.d + ')');
//alert('getProductDescription' + JSON.stringify(myObject));
var html = '';
pageIndex++;
var htmlCategoryList = '';
var i = 0, length = myObject.length;
var _productLink = '';
var _productFullLink = '';
if (length > 0) {
pageCount = myObject[0].PageCount;
if (length > 0) {
for (; i < length; i++) {
if (myObject[i].ShippingQuantity > 0) {
_productLink = myObject[i].SellReqID + '/product/' + myObject[i].CurrentNodeName;
_productFullLink = "http://www.xarato.com/" + myObject[i].SellReqID + "/product/" + myObject[i].CurrentNodeName;
if (myObject[i].Discount == 0) {
/**
if (parts[parts.length-1] == 'loves') {
html += '<li class="polaroid"><div class="prodoptionbg prodseller"><span>Listed by ' + myObject[i].FirstName + ' ' + myObject[i].LastName + '</span></div><a href="/' + _productLink + '"><div style="position:relative;"><img alt="' + myObject[i].NodeName + '" src="/' + myObject[i].
html += '<li class="polaroid"><div style="position:relative;"><img alt="' + myObject[i].RequestTitle + '" src="/' + myObject[i].Image1 + '"_thumb.jpg" width="200" height="' + myObject[i].ThumbHeight1 + '"><div class="options"><span class="favs" id="span' + myObject[i].SellReqID + '">' + myObject[i].Likes + '</span><span class="fav" onclick="calculateLike(event,' + myObject[i].SellReqID + ')">like it!</span></div></div><div class="prod"><span>' + myObject[i].RequestTitle + '</span></div><div class="prodprice1"><span style="font-weight:700;">Rs. ' + Math.round(parseFloat(myObject[i].MRPrice) + parseFloat(myObject[i].ShippingPrice)) + '</span></div></li>';
}else{ **/
//alt="' + myObject[i].RequestTitle + '"
html += '<img alt="' + myObject[i].RequestTitle + '" src="/' + myObject[i].Image1 + '_thumb.jpg" width="200" height="' + myObject[i].ThumbHeight1 + '">';
//}
}
else {
/**if (parts[parts.length-1] == 'loves') {
var _finalPrice = parseFloat(myObject[i].MRPrice) - (parseFloat(myObject[i].Discount) * parseFloat(myObject[i].MRPrice))/100
html += '<li class="polaroid"><div class="prodoptionbg prodseller"><span>Listed by ' + myObject[i].FirstName + ' ' + myObject[i].LastName + '</span></div><div style="position:relative;"><img alt="' + myObject[i].NodeName + '" src="/' + myObject[i].Preview + '_thumb.jpg" width="200" height="' + myObject[i].Height + '"><div class="options"><span class="favs" id="span' + myObject[i].NodeId + '">' + myObject[i].Likes + '</span><span class="fav" onclick="calculateLike(event,' + myObject[i].NodeId + ')">like it!</span></div><div class="kjss"><span>' + myObject[i].Discount + '% Off</span></div></div><div class="prod"><span>' + myObject[i].NodeName + '</span></div><div class="prodprice1"><span style="color:#777777; text-decoration:line-through">Rs. ' + myObject[i].MRPrice + '</span> <span style="font-weight:700;">Rs. ' + Math.round(_finalPrice + parseFloat(myObject[i].ShippingPrice)) + '</span></div></li>';
}else{**/
//alt="' + myObject[i].RequestTitle + '"
html += '<img alt="' + myObject[i].RequestTitle + '" src="/' + myObject[i].Image1 + '_thumb.jpg" width="200" height="' + myObject[i].ThumbHeight1 + '">';
//}
}
}
}
if (clearHtml) {
// $('.bxslider').html('');
//htm = '<li>"' + html + '"</li>';
}
// var htmli = '<li>"' + html + '"</li>';
// $('.bxslider').append(htmli);
htm = '<li>' + html + '</li>';
alert(htm);
return htm;
clearHtml = false;
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 17, // Optional, the distance between grid items
itemWidth: 225 // Optional, the width of a grid item
};
}
else {
return;
}
}
else {
return;
}
},
failure: function (data) {
alert('failture');
},
error: function (data) {
alert(data.responseText);
}
});
}
This is how i am taking the data but i get an undefined value.
HtmlM += loadData(myObject.data[i].uid);
Please help me out.
Change your loadData to
function loadData(uid, delegate) {
///In ajax instead of return use
delegate(htm);
}
then call like that
loadData(myObject.data[i].uid, function(html){ HtmlM += html ;});
Ajax is asynchronous so you cant just return (yes you can do it synchronous but its not right way)