I have a list which looks like the following:
<ul id="offers">
<li class="unique-id-here">
<span class="country">US</span>
<span class="clicks">192</span>
<span class="ctr">9%</span>
</li>
</ul>
And i am trying to update the .clicks with new values every 5 seconds.
So my though was, select each li -> get the unique-id-here -> save the id to a variable -> to a $.get request to request the clicks for that given id -> replace the current clicks with the new ones.
Problem is that i cannot seem to select the .clicks properly... this is what my jQuery code looks like:
var refreshId = setInterval(function() {
$("#offers li").each(function(){
var a = $(this).attr('class');
if(a) {
$.get("ajax.php", { opt: "stats", oid: a }, function(r) {
var j = eval('(' + r + ')');
$(this).find('.clicks').text('<strong>'+j.message.clicks+'%</strong>');
});
}
});
}, 5000);
Any ideas on how i can replace the .clicks value of each li field properly?
Help is much appreciated :)
Try:
var refreshId = setInterval(function() {
$("#offers li").each(function(){
var $li = $(this),
a = $li.attr('class');
if(a) {
$.get("ajax.php", { opt: "stats", oid: a }, function(r) {
var j = eval('(' + r + ')');
$li.find('.clicks').html('<strong>'+j.message.clicks+'%</strong>');
});
}
});
}, 5000);
You are using $(this) inside the $.get, which would refer to another object. Also, why are you using eval? Why not return a JSON object to the request?
In addition, you are using text(), however the string you pass to the parameter contains HTML (<strong>). Thus, I switched text() with html().
You could do:
var refreshId = setInterval(function() {
$("#offers li").each(function(){
var clicks = $(this).find('.clicks');
var a = $(this).attr('class');
if(a) {
$.get("ajax.php", { opt: "stats", oid: a }, function(r) {
var j = eval('(' + r + ')');
clicks.text('<strong>'+j.message.clicks+'%</strong>');
});
}
});
}, 5000);
i think that your problem is that $(this) inside the success function of tha AJAX call has not the scope you think. another thing you could do is:
var refreshId = setInterval(function() {
$("#offers li").each(function(){
var $that = $(this);
var a = $(this).attr('class');
if(a) {
$.get("ajax.php", { opt: "stats", oid: a }, function(r) {
var j = eval('(' + r + ')');
$that.find('.clicks').text('<strong>'+j.message.clicks+'%</strong>');
});
}
});
}, 5000);
Related
I have an html table on a page with raws that have 'urls', I'm trying to fetch one url at a time from a random row, however my code returns url as http://www.test.com/products/product-namehttp://www.test.com/products/product-name.json, as you can see it returns url twice, one without json and other with json data, hence I'm getting 404.
I just need the .json URL, not the first part.
How do I get rid of the first url which is not json?
Here's the code.
$(document).ready(function() {
$(document).on('click', '#closepopup', function() {
$("#popup").removeClass('popupslidein')
});
var tablelink = "https://test.com/pages/product-listing-for-popups.json"; //products url for json data
$.getJSON(tablelink, function(data) {
var table = data.page.body_html;
$('#popuptable').append(table);
startthepopups()
});
var suburbink = "https://test.com/pages/product-listing-suburbs-for-popups"; //suburb names in table rows
$.getJSON(suburbink, function(data) {
var suburb = data.page.body_html;
$('#popupsuburb').append(suburb)
});
var namelink = "https://test.com/pages/product-listing-names-for-popups"; //names in table rows
$.getJSON(namelink, function(data) {
var name = data.page.body_html;
$('#popupname').append(name)
});
function startthepopups() {
var popupstay = 10000;
var popuptrigger = 100000;
function triggerpopup() {
var getrandomtd = Math.floor((Math.random() * $('#popuptable tr').length) + 1);
var link = $('#popuptable tr:nth-child(' + getrandomtd + ')').text();
console.log(link);
var productname = '';
var getrandomsuburbtd = Math.floor((Math.random() * $('#popupsuburb tr').length) + 1);
var suburblink = $('#popupsuburb tr:nth-child(' + getrandomsuburbtd + ')').text();
var getrandomnametd = Math.floor((Math.random() * $('#popupname tr').length) + 1);
var randomname = $('#popupname tr:nth-child(' + getrandomnametd + ')').text();
$.getJSON(link + '.json', function(data) {
productname = data.product.title;
imagelink = data.product.images[0].src;
if (!$("#popup").hasClass("popupslidein")) {
$('#popupsomeone span.name').empty().append(randomname);
$('#popupsomeone span.location').empty().append(suburblink);
$('#popupimage').css('background-image', 'url(' + imagelink.split('.jpg')[0] + '_small.jpg)');
$('#popupproduct a').attr('href', link).empty().append(productname);
$("#popupagotext").empty().append(Math.round(Math.random() * 15 + 10));
$("#popup").addClass('popupslidein');
setTimeout(function() {
$("#popup").removeClass('popupslidein')
}, popupstay);
}
});
}(function loop() {
var random = Math.round(Math.random() * 10) * 100000 + popuptrigger;
setTimeout(function() {
triggerpopup();
loop()
}, 60000)
}());
}
});
$.getJSON() has a tendency to append your current url to the path you pass it if it thinks it's relative. To make this work, you could try to use $.getJSON() like so. Keep in mind, the protocol used will be the current page this code lives on.
$.getJSON('//test.com/pages/product-listing-for-popups.json')
I also noticed that nowhere in your code do you have a url for http://www.test.com/products/product-name.json, are you sure you're sharing the correct snippet of code?
Working Demo
The following two ways of using $.getJSON() with a fully qualified url work perfectly fine:
$(document).ready(function() {
var url = "https://jsonplaceholder.typicode.com/todos/1";
// Example 1
$.getJSON(url)
.done(function( data ) {
console.log(data);
});
// Example 2
$.getJSON(url, function(data) {
console.log(data)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It's my second day on this project :\
I'm trying to create is : creating a new <a> element with a new href and id attributes in for loop so that I can get each output of the API as a link.
This is my JS Code
var one;
var two;
var hoba;
$(document).ready(function() {
$("#inp").keyup(function() {
hoba = $(this).val();
});
$("#but").on("click", function() {
var app = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&list=search&titles=Main+Page&rvprop=content&origin=*&srsearch=" + hoba;
$.getJSON(app, function(data) {
for (i = 0; i < data.query.search.length; i++) {
console.log(app);
one = $("<a></a>").text(data.query.search[i].title);
//var _href = $("a").attr("href");
$("a").attr("href", 'https://www.wikipedia.org/wiki/' + data.query.search[i].title);
$("a").attr("id", data.query.search[i].title);
two = document.createElement("p");
two.innerHTML = data.query.search[i].snippet;
$("body").append(one, two);
}
});
});
});
Use same object to set attributes
one = $("<a></a>");
one.text(data.query.search[i].title);
one.attr("href", 'https://www.wikipedia.org/wiki/' + data.query.search[i].title);
one.attr("id", data.query.search[i].title);
Use jQuery( html, attributes ) to create HTML element.
var anchor = $("<a></a>", {
"text": data.query.search[i].title,
"href": 'https://www.wikipedia.org/wiki/' + data.query.search[i].title,
"id": data.query.search[i].title
});
$("body").append(anchor);
$(document).ready(function() {
$("#inp").keyup(function() {
hoba = $(this).val();
});
$("#but").on("click", function() {
var app = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&list=search&titles=Main+Page&rvprop=content&origin=*&srsearch=" + hoba;
$.getJSON(app, function(data) {
for (i = 0; i < data.query.search.length; i++) {
var anchor = $("<a></a>", {
"text": data.query.search[i].title,
"href": 'https://www.wikipedia.org/wiki/' + data.query.search[i].title,
"id": data.query.search[i].title
});
var p = $("<p></p>", {
"html": data.query.search[i].snippet
});
$("body").append(anchor);
$("body").append(p);
}
});
});
});
You should to do minor changes in your code as below.
Change code are in between
// Changes Code Start and // Changes Code End
var one;
var two;
var hoba;
$(document).ready(function(){
$("#inp").keyup(function(){
hoba = $(this).val();
});
$("#but").on("click",function(){
var app = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&list=search&titles=Main+Page&rvprop=content&origin=*&srsearch="+hoba;
// Changes Code Start
$.getJSON(app,function(data){
for(i=0; i<data.query.search.length; i++){
console.log(app);
var dataAppend;
var title = data.query.search[i].title;
var href = 'https://www.wikipedia.org/wiki/' + data.query.search[i].title;
var id = data.query.search[i].title;
dataAppend = "<a href='"+href+"' id='"+id+"'>"+title+"</a>";
dataAppend += "<p>"+data.query.search[i].snippet+"</p>";
// \"
$("body").append(dataAppend);
}
});
// Changes Code End
});
});
I've been working on a chat application and now I need to scroll automatically when a message appears.
I've tried different things but they do not work unfortunately.
So this is my main.js code:
var lastTimeID = 0;
$(document).ready(function() {
$('#btnSend').click( function() {
sendChatText();
$('#chatInput').val("");
});
startChat();
});
function startChat(){
setInterval( function() { getChatText(); }, 2000);
}
function getChatText() {
$.ajax({
type: "GET",
url: "/refresh.php?lastTimeID=" + lastTimeID
}).done( function( data )
{
var jsonData = JSON.parse(data);
var jsonLength = jsonData.results.length;
var html = "";
var message = $('#view_ajax');
for (var i = 0; i < jsonLength; i++) {
var result = jsonData.results[i];
html += '<div>(' + result.chattime + ') <b>' + result.usrname +'</b>: ' + result.chattext + '</div>';
lastTimeID = result.id;
}
$('#view_ajax').append(html);
message.html(data);
message.scrollTop(message[0].scrollHeight);
});
}
function sendChatText(){
var chatInput = $('#chatInput').val();
if(chatInput != ""){
$.ajax({
type: "GET",
url: "/submit.php?chattext=" + encodeURIComponent( chatInput )
});
}
}
I've used
var message = $('#view_ajax');
message.html(data);
message.scrollTop(message[0].scrollHeight);
I really have no clue how jQuery works. I've tried a couple of things before this but it didn't work also.
Do you have any suggestion? Any advice?
Do you need any more information? Feel free to ask!
Give each message an ID, as follows:
<div id="msg-1234">
Then you can scroll to this element using this jQuery:
$('html, body').animate({ scrollTop: $('#msg-1234').offset().top }, 'slow');
Alternatively, put a div at the bottom of your chat:
<div id="chat-end"></div>
And scroll to this ID instead.
JSFiddle Demo
I'm trying to when I press button (Get Value) to set the size of checkboxes to text. I make the variable (numAll) global, and convert toString, but still not working. any idea to solve the solution?
Demo
Jquery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', {
"type": "text",
"class": "ctb"
}).appendTo($div);
$('<input/>', {
"type": "text",
"class": "date"
}).appendTo($div);
$('<input/>', {
"type": "text",
"class": "Cbox"
}).appendTo($div);
var cnt = 0,
$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id", "div" + cnt);
$newDiv.data('checkboxes', []);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
$("#Getbtn").on("click", function () {
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val());
var Cboxval = numAll;
var st = console.toString(Cboxval);
$currentTarget.find(".Cbox").val(st);
$currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes')); /* Copy checkbox data to card */
//$('#modalDialog').dialog("close");
});
var numAll;
function updateProgress() {
var numAll = $('input[type="checkbox"]').length;
var numChecked = $('input[type="checkbox"]:checked').length;
if (numAll > 0) {
var perc = (numChecked / numAll) * 100;
$("#progressbar").progressbar("value", perc)
.children('.ui-progressbar-value')
.html(perc.toPrecision(3) + '%')
.css("display", "block");
}
}
You should use .toString() method on a Number Object:
var st = Cboxval.toString();
Otherwise I can't find where are you defining the numAll variable, so I had to replace
var Cboxval = numAll;
with:
var Cboxval = numAll === undefined ? 0 : numAll;
in order to be able to perform mys tests.
Here you have an updated version of your JS fiddle.
I have quickly coded up a sort of product display thing that gets half of its input from the page, and the other half from an AJAX query.
Here is the code...
function productDisplay() {
products = [];
this.index = 0;
setupProductDisplay();
processListItems();
showProduct();
function setupProductDisplay() {
var productInfoBoxHtml = '<div id="product-info"><h3 class="hide-me"></h3><span id="dimensions" class="hide-me"></span><div id="product-gallery"><img alt="" src="" /></div><ul id="product-options" class="hide-me"><li id="spex-sheet">Download full spex sheet</li><li id="enlarge-image">Enlarge image</li></ul><div id="product-description" class="hide-me"></div><span id="top"></span><span id="bottom"></span><span id="side"></span><span class="loading"></span></div>';
$('#products').after(productInfoBoxHtml);
}
function processListItems() {
$('#products > li')
.append('<span class="product-view">View</span>')
.filter(':even')
.addClass('even')
.end()
.each(function() {
products.push({
id: $(this).find('h3').html(),
title: $(this).find('h3').html(),
dimensions: $(this).find('.dimensions').html(),
description: $(this).find('.product-description').html()
});
})
.find('.product-view')
.click(function() {
var $thisListItem = $(this).parents('ul li');
var index = $('#products > li').index($thisListItem);
this.index = index;
showProduct();
});
};
function showProduct() {
var index = this.index;
console.log('INDEX = ' + index);
// hide current data
$('#product-info')
.show()
.find('.hide-me, #product-gallery')
.hide()
.parent()
.find('.loading')
.show();
// get data contained in the page
$('#product-info')
.find('h3')
.html(products[index].title)
.parent()
.find('#dimensions')
.html(products[index].dimensions)
.parent()
.find('#product-description')
.html(products[index].description)
// get id & then product extra info
var id = $('#products > li').eq(index).attr('id').replace(/id-/, '');
var downloadPath = PATH_BASE + 'downloads/';
var imagePath = PATH_BASE + 'images/products/'
$.getJSON(PATH_BASE + 'products/get/' + id + '/',
function(data){
var file = '';
var images = [];
file = data.file;
images = data.images;
// show file list item if there is a file
if (file) {
$('#spex-sheet').show().find('a').attr( { href: downloadPath + file } );
} else {
$('#spex-sheet').hide();
}
// image gallery
if (images.length != 0) {
$('#product-gallery').show();
// preload image thumbnails
$.each(images, function(i, image){
var img = new Image();
img.src = imagePath + 'thumb-' + image;
img = null;
});
// set first image thumbail and enlarge link
if (images[0]) {
$('#enlarge-image').show().find('a').attr({ href: imagePath + images[0] });
$('#product-gallery img').attr ( { src: imagePath + 'thumb-' + images[0]} )
}
console.log(images);
// setup gallery
var currentImage = 0;
clearInterval(cycle);
console.log(cycle);
var cycle = setInterval(function() {
console.log(currentImage + ' = ' + index);
if (currentImage == images.length - 1) {
currentImage = 0;
} else {
currentImage ++;
};
var obj = $('#product-gallery');
var imageSource = imagePath + 'thumb-' + images[currentImage];
obj.css('backgroundImage','url(' + imageSource +')');
obj.find('img').show().fadeOut(500, function() { $(this).attr({src: imageSource}) });
$('#enlarge-image a').attr({ href: imagePath + images[currentImage] });
}, 5000);
// setup lightbox
$("#enlarge-image a").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
} else {
// no images
$('#enlarge-image').hide();
$('#product-gallery').hide();
};
// show the product info
$('#product-info')
.find('.hide-me')
.remove('#product-gallery, #spex-sheet')
.show()
.parent()
.find('.loading')
.hide();
});
};
};
The important function is showProduct(). Now generally I don't write JS like this, but I decided to give it a go. My problem is, that when a user clicks a 'more' button, and it displays the prouduct, it doesn't reset the simple slideshow (the images var is reset, I think it has to do with the setInterval() maybe, or it seems it's making a new instance of showProduct() everytime).
Does anyone know what I'm doing wrong?
I had to reformat your code to really understand what was going on. Anyway, I found the problem with the code.
As you guessed correctly, problem is with the scope but not with the variable 'images' but with variable 'cycle'. Why?
This line
var cycle = setInterval(function() {
Always creates a new local cycle variable (notice the 'var') which is not accessible when showProduct gets called the second time. This means that this line
clearInterval(cycle);
is essentially useless as it always passes null to the clearInterval function and doesn't clear anything. This means that as you keep clicking on 'more', you are creating more and more setInterval function calls, never clearing the old ones.
Anyway, I have refactored your code a little bit, I think this should work as expected. The changes I did are:
Removed this.index variable. It's better to pass 'index' to showProduct instead of setting this.index before showProduct method call and making showProduct use that variable. Also, why did you prefix the variable with 'this'?
Declared cycler variable outside the scope of showProduct, local to the productDisplay method. This insures that you can access cycler during different showProduct calls.
Created smaller functions named showFile, showGallery, showProductInfo to make it easier to understand/maintain code.
Let me know if you have any questions OR if the code still doesn't work.
function productDisplay() {
//Instead of keeping this.index variable, it's better to make showProduct function
//take index variable.
products = [];
setupProductDisplay();
processListItems();
//We have to define cycler outside the showProduct function so that it's maintained
//in between showProduct calls.
var cycler = null;
showProduct(0);
function setupProductDisplay()
{
var productInfoBoxHtml = '<div id="product-info"><h3 class="hide-me"></h3><span id="dimensions" class="hide-me"></span><div id="product-gallery"><img alt="" src="" /></div><ul id="product-options" class="hide-me"><li id="spex-sheet">Download full spex sheet</li><li id="enlarge-image">Enlarge image</li></ul><div id="product-description" class="hide-me"></div><span id="top"></span><span id="bottom"></span><span id="side"></span><span class="loading"></span></div>';
$('#products').after(productInfoBoxHtml);
}
function processListItems()
{
$('#products > li')
.append('<span class="product-view">View</span>')
.filter(':even')
.addClass('even')
.end()
.each(
function()
{
products.push({
id: $(this).find('h3').html(),
title: $(this).find('h3').html(),
dimensions: $(this).find('.dimensions').html(),
description: $(this).find('.product-description').html()
});
})
.find('.product-view')
.click( function()
{
var $thisListItem = $(this).parents('ul li');
showProduct($('#products > li').index($thisListItem));
}
);
};
function showFile(file)
{
if (file)
{
$('#spex-sheet').show().find('a').attr( { href: downloadPath + file } );
}
else
{
$('#spex-sheet').hide();
}
}
function showGallery(images)
{
if(! images || !images.length || images.length == 0)
{
$('#enlarge-image').hide();
$('#product-gallery').hide();
return;
}
$('#product-gallery').show();
$.each(images,
function(i, image)
{
var img = new Image();
img.src = imagePath + 'thumb-' + image;
img = null;
});
// set first image thumbail and enlarge link
if (images[0])
{
$('#enlarge-image').show().find('a').attr({ href: imagePath + images[0] });
$('#product-gallery img').attr ( { src: imagePath + 'thumb-' + images[0]} )
}
var currentImage = 0;
clearInterval(cycler);
cycler = setInterval(
function()
{
currentImage = currentImage == images.length - 1 ? 0 : currentImage++;
var obj = $('#product-gallery');
var imageSource = imagePath + 'thumb-' + images[currentImage];
obj.css('backgroundImage','url(' + imageSource +')');
obj.find('img').show().fadeOut(500, function() { $(this).attr({src: imageSource}) });
$('#enlarge-image a').attr({ href: imagePath + images[currentImage] });
}, 5000);
$("#enlarge-image a").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
};
function showProductInfo()
{
$('#product-info')
.find('.hide-me')
.remove('#product-gallery, #spex-sheet')
.show()
.parent()
.find('.loading')
.hide();
}
function showProduct(index)
{
$('#product-info')
.show()
.find('.hide-me, #product-gallery')
.hide()
.parent()
.find('.loading')
.show();
// get data contained in the page
$('#product-info')
.find('h3')
.html(products[index].title)
.parent()
.find('#dimensions')
.html(products[index].dimensions)
.parent()
.find('#product-description')
.html(products[index].description)
// get id & then product extra info
var id = $('#products > li').eq(index).attr('id').replace(/id-/, '');
var downloadPath = PATH_BASE + 'downloads/';
var imagePath = PATH_BASE + 'images/products/'
$.getJSON(PATH_BASE + 'products/get/' + id + '/',
function(data)
{
showFile(data.file);
showGallery(data.image);
showProductInfo();
});
};
};
If you don't define your variables with var (e.g. var images = ...;) then they will be considered global variables (members of the window object).
If you define them with var then they are visible to the whole function (even before the variable is declared) they are declared in.
I can't immediately see what the problem is, but I would recommend minimizing the scope of your variables - if they don't need to be global then make sure they aren't global.