I am new to jquery. I am making a chrome extension which gets some DOM element from - say for example, any price of product from flipkart.
So, i want to make a list of each product's price user is viewing at the moment. I am able to get the price. But what i want to do, is make a closable list in my popup.html file, when i get the product price.
It's like, price should be dynamically displayed or added as a closable list when i get the price's data. I don't know how it can be achieved. I am confused here. Can you guide me please?
myfile.js
var ulcontainer = $('<ul></ul>');
$('body').append(ulcontainer);
$ ('ul').css('list-style','none');
for (var i = 0; i < 3; i++) {
dothis();
}
function dothis()
{
$('ul').append("<li></li>")
var imgdiv = $('<div></div>').text("this is imgdiv"); /// prod
var detaildiv = $('<div></div>').text("this is detailsdiv"); ///price of prod
var closebtndiv = $('<div></div>').text("this is closebtndiv");
$('li').append(imgdiv,detaildiv,closebtndiv,"<br>");
$('li').css({'padding':'20px'});
$('div').css({'display':'inline','padding':'20px'});
}
i tried to do this by making a function and run it in for loop..if it works fine then i can call the same function when the data arrives and make a list item.
But some how the o/p of this function is weird.
Related
I am working with a Google App Script web app that is going to be used to display student micro-credentials. The goal is to make it so I can use a dropdown to choose which classes are displayed. I have created the dropdown on the web app by copying from W3Schools, but it doesn't actually function. I need some help getting the dropdown to do what I need it today.
In the example screen you can see the view I have set up and the dropdown with three classes:
The data for this web app is stored on a Google Sheet, like this:
And the doGet looks like this:
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('WebApp');
var pictures = getPictures(classSelection);
var names = getNames(classSelection);
var cutBelts = getCutBelts(classSelection);
var measureBelts = getMeasureBelts(classSelection);
var bindBelts = getBindBelts(classSelection);
var classSize = 10;
if(pictures.length<10){
classSize=pictures.length;
}
htmlOutput.pictures = pictures;
htmlOutput.names = names;
htmlOutput.cutBelts = cutBelts;
htmlOutput.measureBelts = measureBelts;
htmlOutput.bindBelts = bindBelts;
htmlOutput.classSize = classSize;
return htmlOutput.evaluate();
}
Where the variable "classSelection" is equal to the name of the class (101, 201, or 202) and the five 'get' functions (getPictures, getNames) return the picture, names, etc for that class as an array.
Okay, so here is my specific issue I need help with.
How do I get the dropdown to send data (the class) back to the doGet so that the variable "classSelection" updates and displays only the selected class?
Again, for the code I used to create the dropdown (html, css, and script) see this link, I literally copy-pasted and only changed the drop down titles 😊
I have an MVC project in where I have two selectlists: one that is displayed to the user, and one that is hidden that contains my viewdata that the displayed one pulls from.
My Javascript function that triggers onchange for another selectlist is as follows:
function select()
{
document.getElementById("SelectedServer").innerHTML = document.getElementById("ServerSelect").value;
var services = document.getElementById("ServiceSelect");
services.options = serviceoptions.options;
console.log(services.options === serviceoptions.options)
var servers = document.getElementById("ServerSelect").selectedOptions;
for (i = 0; i < services.length; i++)
{
for (j = 0; j < servers.length; j++)
{
if (services.options[i].value == servers.item(j).value) { }
else (services.options[i] = null)
}
}
}
This function updates a text field with the selected servers, assigns my services selectlist with the options from the hidden data selectlist called "serviceoptions", and then sorts it so that the services are displayed only if they match the selected server (using value).
For some reason, when I do my options assignment (services.options = serviceoptions.options;), it runs without errors but clearly does not assign the options correctly.
The console output I put to test returns false, and chrome debugger shows that the length has not been updated.
I want to assign the options variable of serviceoptions to the options variable of services. Why can I not do this?
The issue I'm trying to solve with the hidden field is that before, my services would correctly disappear if they did not match, but I had no way to bring them back if the user selected another server.
I cannot use ajax to make another API call to retrieve the servers/services again.
Here is a drop down list in SmartClient: http://www.smartclient.com/#dropdownGrid.
I want to make a selection using JavaScript. Like, I run some JavaScript in console, and the drop list will select a specific item.
I did some research, found a code snap to do this (the code is in Java, but I think there should be similar functions in JavaScript):
Record rec = perdomainGrid.getRecordList().find("domaine_id", domaine_id);
perdomainGrid.selectSingleRecord(rec);
If I want to make selection, first I need to obtain perdomainGrid object. In my above giving link, the drop down list id in GWT is exampleForm (can be seen in dropDownGrid.js tab). I try to get the object by:
var form = isc.DynamicForm.getById("exampleForm");
form does exist, but there is no getRecordList() function on it, there is selectSingleRecord() function on it though.
I try to check form's class by form.className, its value is normal. I don't know what does that mean.
I'm kind of confused now. Could somebody help me on this?
isc_SelectItem_5 has a function called pickValue(), it takes one parameter SKU. This function can be used to select item.
var itemName = "Letter Tray Front Load Tenex 200 Class Blk #23001";
var data = isc_SelectItem_5.optionDataSource.cacheData;
var targetSKU = data.find(function(e) {
if (e.itemName == itemName) {
return e;
}
}).SKU;
isc_SelectItem_5.pickValue(targetSKU);
This is my first post so please be kind with me. :D
What i want is to select a person from a DropDownList (which is on table 1) and when i press a button, I want to move the selected person to another table (on table 2).
I will post some screens from my PC because i cant add code (i receive some error where say is too much code or something like that...)
Here is the link with Photos. I dont have 10 reputation so i cant post different URL with description...:D
http://postimg.org/gallery/13lmzz4kq/
I write description in every photo :D
Ty in advance !
In your plunker you have a method moveAudit. This method receives an item:
$scope.moveAudit = function (item) //Function for moving the unassigned audits
{
//var assignedAudit = $scope.assignedAudit; //--> you dont need this here
//var audit = $scope.unassignedAudit; //--> unused variable
//var auditId = $scope.unassignedAudit.IdUnassignedAudit; //--> unused variable
//TODO: here you need to add the selected 'expert' to item
// inspect/debug how your form POST passes this information to the controller
// ideally put it in a scoped var or pass it in the method: $scope.moveAudit = function (item, selectedExpert)
item.AssignedExpert = $scope.selectedExpert
//add to AssignedAudit
$scope.assignedAudit.push(item);
console.log("Row added: ", $scope.assignedAudit);
//TODO: probably you want to remove the item from $scope.assignmentExperts
};
I cannot debug the plunker since it is incomplete, but this should do the trick.
Upon further inspection of your code it looks like $scope.ddSelection is the selected expert.
I'm currently working on a Greasemonkey script, that allows to add users to an ignore list which will block their comments from being rendered.
I store their userID via "GM_setValue". Everything is working just fine but I have problems to render the "Manage your ban-list" part of my script to pardon a user.
The codeblock I have troubles with:
var banList = GM_listValues(); // Array of Usernames
var manageBans = $("#content_content"); //The <div> I want to render the Banlist in.
manageBans.append("<h4>Manage ignorelist</h4>");
for (var i=0; i < banList.length; i++) {
var currentUser = banList[i];
manageBans.append($('<b>'+currentUser+'</b><img src="/redaktion/style/delete.png" width="16" height="16" alt="unblock_user"></br>').click(function(){ unbanUser(currentUser)}));
}
var unbanUser = function(name) {
GM_deleteValue(name);
};
So basically this is working fine, all banned users are rendered in a list and I can click to unban. But once I click at any user to call "unbanUser", the last user in the list gets unbanned and not the one I clicked at.
I guess the variable "currentUser" is always the last name on the list, I kinda wanted it to be a fix link for each user after the for-loop is finished.
It's quite a trivial task but I don't find a proper solution.
Do you have a hint for me?
Greets
At the end of the loop, currentUser keeps getting overwritten on each iteration. Inside the click function, you're referring to currentUser, which equals the last definition of currentUser.
To fix it, make use of closures:
function doSomething(currentUser) {
manageBans.append($('<b>'+currentUser+'</b><img src="/redaktion/style/delete.png" width="16" height="16" alt="unblock_user"></br>').click(function(){
unbanUser(currentUser)
}));
}
for (var i=0; i < banList.length; i++) {
doSomething(banList[i]);
}