A button is clicked to trigger LoadImages method to load a series of pictures into the web page. I want to add an onclick event for each picture so when user click it, the picture name is displayed. How to use Dojo to achieve this?
LoadImages(PictureNames){
var resultUl = new Builder('<ul />');
for (i = 0; i < PictureNames.length; i++){
resultUl.append('<li><img id=' + PictureNames[i] + ' src="./images/' + PictureNames[i] + '.jpg" height="200" width="250" class="photo"/></li>');
}
dom.byId('Pictures').innerHTML = resultUl;
}
DisplayPictureName(picturename)
{
dom.byId('PictureName').value = picturename;
}
<label id="PictureName">here displays picture name</label>
<div id="Pictures"></div>
Make the elements using dojo/dom-construct and attach events using dojo/on.
var resultUl = domConstruct.create('ul');
for (i = 0; i < PictureNames.length; i++){
var image= domConstruct.create('img', {
id: PictureNames[i]',
src: "./images/"+ PictureNames[i],
style: {"height: 200px; width: 250px"},
class: "photo"});
var li= domConstruct.create('li');
domConstruct.place(li, resultUl);
domConstruct.place(image, li);
dojo.on(image, 'click', this.DisplayPictureName());
}
dom.byId('Pictures').innerHTML = resultUl;
Related
I've written a function that should produce a random image from an array in Javascript.
I'm wanting to execute the function with an html button. I've written the code but it doesn't work. The image should be directed to a flex box div.
Code
var myImages=
["https://picsum.photos/536/354","Images/IMG_4830.jpeg","Images/IMG_4338.jpeg",
"Images/IMG_4096.JPG"];
function randomImages(){
var rnd = Math.floor(Math.random()*myImages.length);
if(rnd == 0){
rnd = 1;
}
var image = document.createElement("img");
var div=document.getElementById("flex-box-create").src = myImages[rnd]
div.appendChild(image)
}
button = <div><button class="btn btn-primary" id="image-Generator"
onclick="randomImages()">Click</button></div>
thanks
The source should be set on the image not the div, try this:
var image = document.createElement("img");
image.src = myImages[rnd];
var div = document.getElementById("flex-box-create");
div.appendChild(image);
I try to convert this simple google apps script code below to HTML services code.
The code below is written with the deprecated google apps script UI services!
Can anyone help me with HTML services example code in this usecase?
// Script with deprecated UI-services
// How to create this app with HTML-services?!!!?
//This script runs in a google website.
//It has one textobject and 1 button.
//when the button is pressed the value entered is stored in the spreadsheet
ssKey = 'sheetkey....';
function doGet(){
var app = UiApp.createApplication().setTitle('myApp');
//Create panels en grid
var MainPanel = app.createVerticalPanel();
var Vpanel1 = app.createVerticalPanel().setId('Vpanel2');
var grid = app.createGrid(4, 2).setId('myGrid');
//Vpanel1 widgets
var nameLabel = app.createLabel('Name');
var nameTextBox = app.createTextBox().setWidth('400px').setName('name').setId('name');
var submitButton = app.createButton('Verstuur').setId('submitButton');
grid.setWidget(0, 0, nameLabel)
.setWidget(0, 1, nameTextBox)
.setWidget(1, 1, submitButton);
//Set handlers en callbackelement
var handler = app.createServerClickHandler('InsertInSS');
handler.addCallbackElement(Vpanel1);
submitButton.addClickHandler(handler);
// build screen
Vpanel1.add(grid);
app.add(Vpanel1);
return app;
}
function InsertInSS(e){
var app =UiApp.getActiveApplication();
var collectedData = [new Date(), e.parameter.name] ;
var SS = SpreadsheetApp.openById(ssKey);
var Sheet = SS.getSheetByName('Contacts');
Sheet.getRange(Sheet.getLastRow()+1, 1, 1, collectedData.length).setValues([collectedData]);
app.getElementById('submitButton').setVisible(false);
//Reset fields on screen
app.getElementById('name').setText("");
return app;
}
Your Ui output looks like this:
Create an HTML file, and enter this code:
testForm.html
<div>
<div>
Name: <input id='idNameField' type='text'/>
</div>
<br/>
<input type='button' value='Verstuur' onmouseup='runGoogleScript()'/>
</div>
<script>
function onSuccess(argReturnValue) {
alert('was successful ' + argReturnValue);
//Reset fields on screen
Document.getElementById('idNameField').value = "";
}
function runGoogleScript() {
console.log('runGoogleScript ran!');
var inputValue = document.getElementById('idNameField').value;
google.script.run.withSuccessHandler(onSuccess)
.InsertInSS(inputValue);
};
</script>
Copy the follow code into:
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('testForm')
.evaluate() // evaluate MUST come before setting the NATIVE mode
.setTitle('The Name of Your Page')
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
};
In a seperate .gs file add this code:
function InsertInSS(argPassedInName){
var ssKey = 'sheetkey....';
var SS = SpreadsheetApp.openById(ssKey);
var Sheet = SS.getSheetByName('Contacts');
Sheet.getRange(Sheet.getLastRow()+1, 1, 1, argPassedInName.length).setValue(argPassedInName);
}
In my JQM 1.4 + Phonegap 3.6 app, I am using a listview as in the following code.
HTML:
<div id="boardselection">
<ul id="modelsListview" data-role="listview" data-icon="false">
</ul>
</div>
JS:
function resetModelsListView(prodata, firsttime, funfeatureOn, specificBrand, specificPro) {
console.log("on passe dans resetModelsListView");
// funfeatureOn = 0;
//debug timer
var time = [];
var dummy;
var i;
var listviewdeferred = $.Deferred();
var optionspro = '';
var optionsbrand = '';
var optionsmodel = '';
var countpros = 0;
var countbrands = 0;
var countmodels = 0;
var chosenmodelListViewHandle = $('#modelsListview');
var chosenbrandSelect = $('#chosenbrand');
optionsmodel += '';
var alreadyusedbrands = [];
prodata.sort(SortByName);
// get previously selected model to reselect it later
//var previouslySelectedModelId =parseInt(chosenmodelSelect.find('li:selected').val());
if (!funfeatureOn) {
prodata.sort(SortByModel);
} else {
prodata.sort(SortByFUN);
}
//populate model list
//~ if (firsttime){
//~ var perfIsChecked = true;
//~ var smallwaveIsChecked = true;
//~ var stepupIsChecked = true;
//~ }else {
var perfIsChecked = $('#checkboxperf').is(":checked");
var smallwaveIsChecked = $('#checkboxsmallwave').is(":checked");
var stepupIsChecked = $('#checkboxstepup').is(":checked");
//~ }
console.log("perfIsChecked, smallwaveIsChecked, stepupIsChecked =");
console.log(perfIsChecked);
console.log(smallwaveIsChecked);
console.log(stepupIsChecked);
//if none checked then no filter
if (!perfIsChecked && !smallwaveIsChecked && !stepupIsChecked) {
perfIsChecked = true;
smallwaveIsChecked = true;
stepupIsChecked = true;
}
for (i = 1; i < prodata.length; ++i) {
if (specificBrand && prodata[i]['brand'] != specificBrand) {
} else if (specificPro && prodata[i]['name'] != specificPro) {
} else {
if (prodata[i]['fun'] == 0 && perfIsChecked) {
optionsmodel += '<li><a class="optionfuninit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
} else if (prodata[i]['fun'] == 1 && smallwaveIsChecked) {
optionsmodel += '<li><a class="optionfuninit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
} else if (prodata[i]['fun'] == 2 && stepupIsChecked) {
optionsmodel += '<li><a class="optionstepupinit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
} else if (prodata[i]['fun'] == 3 && smallwaveIsChecked) {
optionsmodel += '<li><a class="optionkidsinit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
}
if (prodata[i]['model'] !== prodata[i - 1]['model']) { //eliminate name duplicates if prodata sorted by model
countmodels = countmodels + 1;
}
}
}
chosenmodelListViewHandle.html(optionsmodel);
if (chosenmodelListViewHandle.listview("option", "disabled")) {
chosenmodelListViewHandle.listview("option", "disabled", false);
}
//~ if (resetModelsOnly) {
//~ if ( !isNaN(previouslySelectedModelId) ) {
//~ chosenmodelListViewHandle.find('li[href="' + previouslySelectedModelId + '"]').attr("selected", "selected").siblings('li').removeAttr('selected');
//~ }
//~ }
//~ highlightFunModels(funfeatureOn, 1);
//~ highlightStepupModels(funfeatureOn, 0);
chosenmodelListViewHandle.listview("refresh", true);
$("#chosenmodel-button").addClass("ui-icon-carat-d ui-btn-icon-right");
if (!funfeatureOn) {
} else {
$('ul#chosenmodel-menu').find("a.ui-btn:contains(SMALL-WAVE)").addClass("optionfun");
$('ul#chosenmodel-menu').find("a.ui-btn:contains(STEP-UP)").addClass("optionstepup");
}
prodata.sort(SortById); //we need this otherwise prodata is not usable by the $('#chosenpro').trigger
$("#chosenmodel-button span").attr({ 'data-i18n': 'select.3' });
$("#boardselection").i18n();
listviewdeferred.resolve();
return listviewdeferred;
}
This dynamically displays a long list of images and text, depending on wether filters (checkboxes) are checked or not, and this list is quite long to generate and particularly difficult to scroll in iOS.... The performance is bad.
Can you help me figure out a way to improve the performance.
The accepted answer is not correct. Your code is slow, but not because of jQuery Mobile. Take a look at the loop in your jsFiddle: jsfiddle.net/L3gr46s8/4
for (i = 0; i <= 50; i++) {
$('ul[data-role="listview"]').append('<li>' + 'list item ' + i + '</li>');
$('ul[data-role="listview"]').listview('refresh');
}
There are a couple very significant problems in those four lines of code.
First, your code executes two DOM traversals to locate the ul on the page. You could execute $('ul[data-role="listview"]') before the loop and store the result in a variable:
var listView = $('ul[data-role="listview"]');
Second, your code inserts the list item directly to the DOM and you instruct jQuery Mobile to immediately apply markup enhancement with .listview('refresh');. This is extraordinarily expensive! Especially on under-powered mobile devices. Depending upon the browser and page layout, those two lines could trigger a full page re-draw with every iteration of the loop.
You should render the content as a DocumentFragment (in memory), insert it all to the DOM in one action and tell JQM to enhance the markup once at the end. Even simply moving $('ul[data-role="listview"]').listview('refresh'); out of the loop would be a dramatic improvement.
Here is some additional reading on the importance of rendering your content first in memory before inserting it into the DOM:
How expensive is it to dynamically insert DIVs using JavaScript?
John Resig - DOM DocumentFragments
To put it short, jQuery Mobile is simply slow.
I have a dynamic listview in my app and also had performance issues when using jQuery Mobile. I came to a conclusion that the issue was in rendering and was caused by jQuery Mobile. I implemented my own styling and the rendering time came down from 170ms to 25ms.
Here's some backup to my point (3 articles): http://apachecordova.blogspot.fi/search/label/jQuery%20Mobile
EDIT:
As an answer to your question in the comments, I don't think it would help if I posted my code here. The whole point is that you only write the code YOU need. My listview probably is totally different than yours.
To prove my point (again), I made two listviews. The first one is a basic jQM listview. The other one is styled with custom CSS and it's pretty close to what I use in my app. There's a button in both which renders the listview. What is happening under the hood is very different:
jQM: As you can see, there's a lot of stuff (that you may not need) going on
Custom CSS: attached an event listener to all the elements to make the comparison more fair
These profiles have been recorded with Chrome Developer Tools and the difference is obvious: 173ms vs 12ms. This custom CSS took me about 5min to write:
#custom-listview {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#custom-listview li {
display: block;
position: relative;
overflow: visible;
}
#custom-listview a {
display: block;
position: relative;
text-overflow: ellipsis;
text-decoration: none;
color: white;
padding: .7em 1em;
font-size: 16px;
background-color: #333;
border: solid 1px #1f1f1f;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
}
I had to add some code here, because SO won't let me link to Fiddle without:
jQM
Custom CSS
I'm not saying jQuery Mobile is all bad. It's good for many things. But if you have complex structure and/or a lot of data, the performance may become an issue especially in PhoneGap apps. That's the conclusion I have come to with my little experience.
* problem solved please ignore *
I'm trying to remove and add images with D3.js, and I cannot figure out how to add. Grateful for an idea where I'm going wrong. Here is the jsfiddle and code below:
html
<h3>Click on the images - they should be replaced by new ones</h1>
<div id="image_gallery">
<img class="image_gallery" src="http://imgs.xkcd.com/comics/weather.png" width="200" height="300"/>
<img class="image_gallery" src="http://imgs.xkcd.com/comics/rejection.png" width="200" height="300"/>
</div>
javascript
var data = [
["http://imgs.xkcd.com/comics/protocol.png", "http://imgs.xkcd.com/comics/walmart.png"],
["http://imgs.xkcd.com/comics/theft.png", "http://imgs.xkcd.com/comics/questions_for_god.png"]
];
var image_gallery = d3.select("#image_gallery").on("mousedown", function () { transition();});
var index = 0;
function transition() {
image_gallery.remove();
for (var i = 0; i < data[index].length; i++) {
image_gallery.append("img").attr("class", "image_gallery").attr("src", data[index][i])
.attr("width", 200).attr("height", 300);
}
index++;
d3.select("body").append("h3").text("but they aren't");
}
OK figured it out. image_gallery.remove() needs to be image_gallery.selectAll("img").remove()...
I am able to render a tree using YAHOO.widget.TreeView yui 2.9.
Using pre made tags
<ul> <li> Products </li> </ul>
I am able to get the label i.e Products using node.label
YAHOO.util.Event.on('allProductSaveButton','click',function() {
var hiLit = rightProductTree.getNodesByProperty('highlightState',1);
if (YAHOO.lang.isNull(hiLit)) {
YAHOO.log("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(hiLit[i].label); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
}
});
I want to insert id of the Products in the html and get the id of label as well. so where should I place id attribute inside or where?
I am not sure you can set your own id on the markup. TreeView is one of the oldest widgets in YUI 2 and it uses a particularly funny markup because the supported CSS styles in those days were quite pathetic, thus, what part of that funny markup are you going to apply that id to?
If what you want is to give a tree-node an identifier that you can later use to retrieve it, then use custom properties. Then, calling getNodesByProperty will allow you to retrieve the node by the value of that extra property.
I got a solution. I inserted the label element inside the span element that was inside the li element i.e
<ul>
<li> <span> <label id="444" > Product </label> </span>
</li>
</ul>
then using YAHOO.util.Dom I traversed and got the id attribute of label element.
YAHOO.util.Event.on('GroupsProductSaveButton', 'click', function() {
var hiLit = rightProductTree2.getNodesByProperty('highlightState', 1);
if (YAHOO.lang.isNull(hiLit)) {
alert("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(YAHOO.util.Dom.get(hiLit[i].contentElId).getElementsByTagName('label')[0].getAttribute("value")); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
ProductGroupDWR.displaySelectedNodes(labels, function(data) {
});
}
});