I am trying get request to fake jsonplaceholder api site. Also, I got the result and list placeholder/todos datas as its title on my HTML page. I want to click selected todo item and it will redirect another html page to list item details as id,userId,title,completed properties. But, I can redirect only id property, I can't redirect other properties.
success: function (e) {
let items=e;
for (let i = 0; i < items.length; i++) {
//console.log(jsonitem[i]);
$('#todos').append('<a class="todo-item" onclick="onItemClick(' +items[i].title
+ ')">' + items[i].title + '</a>')
console.log(items[i]);
}
},
function onItemClick(jsonitem){
window.document.location='./index3.html'+'?item='+jsonitem;
}
//another html page
$(document).ready(function(){
let items = document.location.search.replace(/^.*?\=/,'');
$("#txtDetail").html(items);
console.log(items);
})
Related
I am using Framework7 to build a mobile app. Using the popup and request features, I am dynamically building an html table with JSON data as follows:
//Do something when popup is opened
$$(document).on('popup:opened', '.popup-airconSearch', function (e) {
//Show preloader
app.preloader.show();
//Request json data from URL
app.request.json('my-URL', function (data) {
var tableHtml = '';
for(var i = 0; i < data.length; i+=1){
tableHtml+= '<tr><td class="numeric-only">' +data[i].brand+ '</td> <td class="numeric- only">' +data[i].model+ '</td></tr>';
}
//Add rows to HTML table
$$('.data-table #airconDatabase').html(tableHtml);
app.preloader.hide();
})
})
The JSON URL also includes an ID field and I am trying to log the ID of each entry when a table row is clicked. I have updated the above function with:
$$('.data-table #airconDatabase tr').on('click', e => {
var id = data[i].regnumber;
console.log (id);
})
However the console logs ID as underfined. If I change it to
var id = data[0].regnumber;
Then the first JSON entry regnumber field is logged to console no matter which table row is clicked. If I change it to
var id = data[1].regnumber;
Then the second JSON entry regnumber field is logged and so on.
Where am I going wrong?
My solution:
Firstly build the dynamic HTML table with a row ID from the JSON data:
tableHtml+= '<tr id="' +data[i].am_5_regnumber+ '"><td class..
Then get the row ID when a table row is clicked:
$$('.data-table #airconDatabaseTable tbody tr').on('click', function (e) {
var zaf = $$(this).closest('tr').attr('id');
console.log (zaf);
})
In addition to the above, I had to add an ID to the HTML table and not just the table body.
I am generating items in list from the below code. In order for it to display correctly I need to create an html string. Each item in this list is supposed to become a hyperlink where you click on it and it reloads the page with new data, so I need to save the ID on each item in order to retrieve the correct data for that item
What is the best way for me to do what I am trying to accomplish?
$(r.campuses).each(function(index, item) {
if (item.campusID != 55) {
var HTMLcontent = '<div class="ml-32 mt-16 mb"><a class="other-school"><label class="other-schools-list">' +
item.campusName + '</label></a><br /></div>';
$('.group').append(HTMLcontent);
}
});
I'm not sure this is what you need but looks like you want to put the item.campusID in the href attribute of your a element.
UPDATE
Adding click listener to the code to handle user clicking on the link.
you can do it like this:
$(r.campuses).each(function(index, item) {
if (item.campusID != 55) {
var HTMLcontent = '<div class="ml-32 mt-16 mb"><label class="other-schools-list">' + item.campusName + '</label><br /></div>';
$(HTMLcontent).on('click', function() {
window.location.href = window.location.href + "?id=" + item.campusID;
});
$('.group').append(HTMLcontent);
}
});
Just change path/to/your/ to your correct path.
I am working on a project using Google Apps Script coupled with HTML and JS. I am fairly new to programming, so bear with me if this is a simple question.
Basically, in my JS file I have a function that calls a function contained in the Google Apps Script (from now on, GAS) file using this method; the GAS function populates an array with values retrieved from a Google Sheets and returns the array. This array is then used by the JS file to populate a drop down list in the HTML file.
The issue is that the dropdown list is not populated at all; if I reload the page with the Google Chrome console on, I see that the array is empty; however, if I click on the empty array, the values are shown, as if it is not populated on page load. See the picture below to have a better understanding of what I mean:
Google Chrome Console screenshot
Below you'll find the relevant snippets of code that handle the differente functions:
JS:
$(function() {
var cities = [];
function onSuccess(elem, array) {
var i = 0;
for (item in elem) {
array.push(elem[i])
i++;
};
return array
};
google.script.run.withSuccessHandler(onSuccess).withUserObject(cities).populate();
//Create the dropdown menu for the cities
for (city in cities) {
var element = $("#city1").append("<option value=" + cities[city].toLowerCase() + ">" + cities[city] + "</option>");
console.log(city);
};
[...]
});
HTML:
<select id="city1" name="city" placeholder="City"><option id="citydummy">City</option></select>
Google Apps Script:
function populate() {
var db = SpreadsheetApp.openById('SHEETID');
var check = true;
var array = [];
for (var i = 2; i < db.getLastRow(); i++) {
db.getActiveSheet().getRange(i, "1").getValue()
array.push(db.getActiveSheet().getRange(i, "1").getValue())
}
return array;
}
Many thanks in advance for anyone who will contribute!
How about the following modification for JS? HTML and GAS are not modified. Data obtained at populate() is directly sent to onSuccess(), and imported the data to the list.
JS :
$(function() {
google.script.run.withSuccessHandler(onSuccess).populate();
});
function onSuccess(cities) {
for (city in cities) {
var element = $("#city1").append("<option value=" + cities[city].toLowerCase() + ">" + cities[city] + "</option>");
console.log(city);
};
};
If I misunderstand your situation, I'm sorry.
I am currently working on a combo offer on NopCommerce. So I need to add multiple product to cart at a single click. The built in NopCommerce format is for adding single product into cart is
AjaxCart.addproducttocart_catalog('/addproducttocart/catalog/' + productId + '/1/1'
and
AjaxCart.addproducttocart_details('/addproducttocart/details/' +productId + '/1', '#product-details-form')
Both of them work fine for adding single product. But when I want to add multiple product then the it just add single product to the cart. Mention that I am sending a string with a coma separative value which is list of products and inside Javascript it is parsing as a single prodcut Id. However, it is adding only single product in the cart. Which Product Id is the the lowest that product is adding to the cart.
Here is my piece of javascript code
function addComboProductToCart(ids) {
var arrayOfStrings = ids.split(',');
for (var i = 0; i < arrayOfStrings.length; i++) {
AjaxCart.addproducttocart_catalog('/addproducttocart/catalog/' + arrayOfStrings[i] + '/1/1');
}
}
But it is not showing a single error too. So where is the problem?
At the first you need to change in public.ajaxcart.js as below as there is an ajax call on every Add to Cart we need to set it async:false for this you have to add a parameter called async for more clear take a look at below code
//add a parameter async
addproducttocart_catalog: function (urladd,async) {
if (this.loadWaiting != false) {
return;
}
this.setLoadWaiting(true);
$.ajax({
cache: false,
async:async,
url: urladd,
type: 'post',
success: this.success_process,
complete: this.resetLoadWaiting,
error: this.ajaxFailure
});
},
Now i have modified your function by addding just a parameter false
function addComboProductToCart(ids) {
var arrayOfStrings = ids.split(',');
for (var i = 0; i < arrayOfStrings.length; i++) {
AjaxCart.addproducttocart_catalog('/addproducttocart/catalog/' + arrayOfStrings[i] + '/1/1',false);
}
}
To know what async:false is doing kindly find this answer as well for more clarification
Let me know if you need any further assistance.
I'm trying to fill RSS feed with add to fav utility using jQuery and HTML5 localStorage. What I'm trying to achieve is when a user clicks on glyphicon-star-empty available on title of post, it changes to glyphicon-star (which is done) but it should store the selected/favorited item in localStorage and on refresh instead of showing glyphicon-star-empty, it should fetch data from localStorage regarding which item is favorited and show glyphicon-star instead.
The problem i'm facing is in the last part. I can store fav items in localStorage but I don't seem to find the correct way to replace glyphicon-star-empty with glyphicon-star on the fly for favorited items when the page is refreshed.
the other problem is that when user clicks on glyphicon-bookmark (available near the heading -RSS) it should show all the favorited items and should also remove items from localStorage and current page on deselection (i.e clicking glyphicon-star)
here is the complete code fiddle.
and here is the jquery function i'm working on:
function blogRSS(url, container) {
var content = $('.data-content'); //console.log(content);
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
console.log(data.responseData.feed);
$.each(data.responseData.feed.entries, function(key, value) {
var thehtml = '<h4>' + value.title + '</h4>';
$("body").append(itemLayout);
$('.panel-heading').last().html(thehtml);
$('.data-content').last().html(value.content);
$('.data-title').last().next().slideToggle(0);
//console.log($('.panel-heading').last().html(value.title));
//console.log($('.panel-heading').closest('.data-title').text());
if(localStorage.favorite != null){
arr = JSON.parse(localStorage.favorite);
for(var i = 0; i < arr.length; i++){
// console.log($('.panel-heading').last().text() == arr[i].title);
if($('.panel-heading').text() == arr[i].title){
console.log('match');
$('.bkmark_icon').removeClass('glyphicon-star-empty');
$('.bkmark_icon').addClass('glyphicon-star');
//console.log('match');
}
}
}
}); $('.data-title').find('h4').addClass('panel-title');
Add a change like this inside the for loop,Basically you need to loop over each list element as well as for loop over the array to set it.
$( ".panel-heading" ).each( function( index, element ){
if($(this).text() == arr[i].title.trim()){
$(this).next().removeClass('glyphicon-star-empty');
$(this).next().addClass('glyphicon-star');
}
});
Here is a modified JSfiddle
https://jsfiddle.net/ehqefk6j/2/