Develop Reference

Creating dynamic divs

Trying to make a dynamic div but i don't know how. Wrote a solidity smart contract that accepts an array of struct. In the smart contract i can use a get function to display the data inside. Data in the array is treated like a history, it consists of amount (making a crowdfund site), date, currency used, etc. Since the get function in the smart contract can only extract one part of the array, i thought of putting the get function into the while loop and extract the whole history array..
<div id=set>
<a>value1</a>
<a>value2</a>
</div>
I'm trying to dynamically create another div with the same amount of < a > in the div. If i had 10 sets of data to display in that div, i wish to create only 10 sets of that div. Can createElement() be used to do that? Couldn't find any solution that works. Totally have no idea on how to create it. Can someone please help.
Would it be rational to extract the data from the array using a while loop and putting it in a div to display or would it use too much gas for this to work?

I don't get why would you want to do this, but you can do like this:
$('#set a').each(function(){
$('#set').after( "<div></div>");
});
It selects all of the <a>...</a> inside the <div id="set">...</div> element, and for each one of those inserts a <div></div> element. It inserts the element right next to #set but you can change that to any other element you could select.
I'm supplying jQuery code since you tagged the question as jQuery.
Hope it helps,

You can get the number of anchor tags by using this function getElementsByTagName('a').length from the hosting div. Then use that number to create new divs. This solution is done using vanilla JS.
function createDynamicDivs(){
var newDiv = document.createElement("div");
var noOfAnchors = document.getElementById('set').getElementsByTagName('a').length;
for(var i=0;i<noOfAnchors;i++){
var newContent = document.createElement("a");
newContent.textContent= "Test ";
newDiv.appendChild(newContent);
}
document.getElementById('new').appendChild(newDiv);
}
<div id=set>
<a>value1</a>
<a>value2</a>
</div>
<div id="new"></div>
<button onclick="createDynamicDivs()">Generate</button>

Create a region on HTML with changing values

I am a beginner in HTML and I want to create a region on a HTML page where the values keep on changing. (For example, if the region showed "56" (integer) before, after pressing of some specific button on the page by the user, the value may change, say "60" (integer) ).
Please note that this integer is to be supplied by external JavaScript.
Efforts I have put:
I have discovered one way of doing this by using the <canvas> tag, defining a region, and then writing on the region. I learnt how to write text on canvas from http://diveintohtml5.info/canvas.html#text
To write again, clear the canvas, by using canvas.width=canvas.width and then write the text again.
My question is, Is there any other (easier) method of doing this apart from the one being mentioned here?
Thank You.

You can normally do it with a div. Here I use the button click function. You can do it with your action. I have use jquery for doing this.
$('.click').click(function() {
var tempText = your_random_value;
// replace the contents of the div with the above text
$('#content-container').html(tempText);
});

You can edit the DOM (Document Object Model) directly with JavaScript (without jQuery).
JavaScript:
var number = 1;
function IncrementNumber() {
document.getElementById('num').innerText = number;
number++;
}
HTML:
<span id="num">0</span>
<input type='button' onclick='IncrementNumber()' value='+'/>
Here is a jsfiddle with an example http://jsfiddle.net/G638z/

Insert JavaScript code using Text shortcodes without using php

I'm using some javascript code to show post dates and comment number in my blog, but my blog doesn't support using php codes.
My JavaScript code
if(showpostdate==true){document.write('<span class="post-date">'+daystr+'</span>')}
if(showpostcomment==true){document.write('<span class="post-comment">'+commento+'</span>')}
My HTML code to call the JavaScript code is
<script>showpostdate = true;var showpostcomment = true;</script>
I want to change this JavaScript code so if I write this text in my text box
[date][comment]
it can show the html code
<span class="post-date">'+daystr+'</span>
<span class="post-comments">'+commento+'</span>

If you use the jQuery library something like this would work to replace the shortcodes:
$('textarea').change(function() {
$this = $(this);
// to be more efficient I would employ a test here that a shortcode exists before applying the replace functions
var textInBox = $this.val();
textInBox = textInBox.replace('[date]', date); // where date is your date var
$this.val(textInBox.replace('[comment]', commentsCount)); // where commentsCount is your comments var
});
It won't create the span that you want to wrap each variable in because you cannot nest these inside a textarea. If you want to have the shortcode typed in a textarea and then nest the returned variables in something so that you can style them, you will need to employ some kind of html + css magic where you place a see-through textarea over a div and update the div contents whenever the textarea is updated. You can then put the span elements inside the div container, and style as you want.

jQuery doesn't see newly created object. How to refresh list of DOM objects?

In my app when user clicks on button, browser creates new object. For instance:
$("#div1 svg").append("<ellipse id='#obj0' class='svgobjects'>");
It works. It appears in Chrome development tools.
Then I want to set size of my ellipse using some data.
if (!$(ID).length > 0) {
console.log("Div doesn't exist");
} else {
console.log("I found it");
}
$(ID).attr("cx", data["startX"]).attr("cy", data["startY"]).attr("rx", this.rx).attr("ry", this.ry).attr("fill", data["color"]);
All of these variables are OK. All of them contains correct data. But in console appears: "Div doesn't exist".
The problem is: this div IS there and have the same id as "ID" variable ("#obj0"). But in spite of all jquery sais that div doesn't exist.

If you're selecting your ellipse element using its ID, make sure to set it correctly with a valid value.
With CSS (and therefore with jQuery too) you would use #obj0 to select the element having the ID obj0, but you don't have such element as what you have is an element with an ID defined to #obj0, which is an invalid value.
To solve your problem, replace the following:
$("#div1 svg").append("<ellipse id='#obj0' class='svgobjects'>");
With this:
$("#div1 svg").append("<ellipse id='obj0' class='svgobjects'>");
Edit:
In HTML5 the ID #obj0 is actually valid (see http://www.w3.org/TR/html-markup/global-attributes.html), but in this case you will have to select it using $("#\#obj0") instead of $("#obj0").

IF you are using HTML5
id="#obj0" is valid ,
then you have to select like $("#\#obj0")
if you are not using HTML5 you should obj0 instead of '#obj0'

i am trying to get value of particular hidden input text box using jquery it's not working

i tried before insert this
var req=$('#'+investor_id+'#requestId');
var requestId=document.getElementById(req).value;
alert(requestId);)
code it's it's working fine but after it's not working, here is code

You should change your code a bit: http://jsfiddle.net/rkw79/9fTPh/17/
That fiddle cleaned up your code slightly, but you should normally take this steps:
1) hit the 'tidyup' button, then look for missing });
2) don't use id's if they're not unique, just use class
3) you do not have to set an id on everything just to find it, all objects are relative to each other

Why don't you access element with its id instead of writing pipings. ID values are unique in document.
Try this code
alert($('#requestId').val());
//Check here for working demo http://jsfiddle.net/9fTPh/6/
Instead of
var req=$('#'+investor_id+'#requestId');
var requestId=document.getElementById(req).value;
alert(requestId);
And in the fiddle you have provided code us },) are not correctly given.(Check with JsLint)