Here is the original Fiddle:
https://jsfiddle.net/404h0u20/
I am trying to use the JS to render the HTML to obey the principle of DRY. Here:
https://jsfiddle.net/404h0u20/2/
The relevant code is this:
$(document).ready(function() {
$(bars).append("<ol>")
for (i = 0; i < 9; i++) {
$(bars).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
}
$(bars).append("</ol>")
$(shopping).append("<ol>")
for (i = 0; i < 3; i++) {
$(shopping).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
}
$(shopping).append("</ol>")
$(restaurants).append("<ol>")
for (i = 0; i < 3; i++) {
$(restaurants).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
}
$(restaurants).append("</ol>")
$(placesOfInterest).append("<ol>")
for (i = 0; i < 2; i++) {
$(placesOfInterest).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
}
$(placesOfInterest).append("</ol>")
});
But it doesn't create an ordered list, and it creates the wrong data from the second tab onwards?!
Any help will be greatly appreciated!
Try some DRY with each() and attribute selector
$(document).ready(function() {
$('.lists').append('<ol>')
$.each(amenities,function(i,v){
$('[data-amenity='+v[4]+']').next().find('ol').append("<li><a>" + String(v[0]) + "</a></li>");
});
});
https://jsfiddle.net/vobefn04/1/
Related
Please help, I can't implement this javascript to my Blogger...
(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
})();
You can see this Javascript work fine here : http://jsfiddle.net/tovic/AbpRD/1/
If you are seeing that following type of error when you try to add this JavaScript snippet in your theme code -
Error parsing XML: The content of elements must consist of well-formed character data or markup.
Then to resolve this error, use any of the following methods -
1. Wrap the code within a CDATA directive in the script tag. The code will look like -
<script>
//<![CDATA[
(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
})();
//]]>
</script>
The only downside of this approach being that Blogger XML parser will ignore any data layout tags (like for example <data:blog.homepageUrl/>) within the CDATA directive. Rather than replacing them with their actual values, it will not interpret them and show them as is.
2. Escape the following characters in your code -
" is replaced with "
& is replaced with &
< is replaced with <
> is replaced with >
After escaping, the code should look like -
<script>
(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i & lt; pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j & lt; num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
})();
</script>
The data layout tags will remain functional when following this method. Remember to not escape <> surrounding the data layout tag (aka <data:blog.homepageUrl/> will work but not <data:blog.homepageUrl/>)
3. If no data layout tags have to be included in the JavaScript. Then you can add it in an HTML/JavaScript gadget via the Layout tab instead of directly including it in the theme code.
I wanna create such a field with JS and Jquery.
This will enable you make id for every field. Thus you will be able to reference each field by id:
function drawSpace(x) {
for ( var j = 0; j< x; j++) {
for ( var i=0; i< x; i++) {
$('#spacediv').append('<img src="Weltall_Feld.jpg" alt="WeltallFeld" id="field' + i + '_' + j + '"/>');
}
$('#spacediv').append('<br />');
}
}
<div id="spacediv"></div>
http://jsfiddle.net/tovic/AbpRD/
Fiddle has JavaScript, HTML, CSS
When code is placed in web page and rendered it does not
behave as the fiddle does (i.e. no line numbers)
(function () {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
})();
so abit of back story - I am creating a personal note keep 'thing' and I have ran into this problem:
when using:
for (i = 0; i < note_title.length; i++) {
document.getElementById("current_titles").innerHTML = (note_title[i] + "<br />");
};
for (i = 0; i < note_content.length; i++) {
document.getElementById("current_contents").innerHTML = (note_content[i] + "<br />");
};
the code will only print out the last values, rather than the whole list. Why might this be?
Thanks in advance.
You always reset the innerHTML property thus overwriting the old values.
The solution is to store the generated HTML in a variable (a string) and set that as the innerHTML value after the loop.
Do not use innerHTML += "". This dramatically affects your site's preformance.
var currentTitlesStr = "";
for (i = 0; i < note_title.length; i++) {
currentTitlesStr += note_title[i] + "<br />";
}
document.getElementById("current_titles").innerHTML = currentTitlesStr;
var noteContentsStr = "";
for (i = 0; i < note_content.length; i++) {
noteContentsStr += note_content[i] + "<br />";
}
document.getElementById("current_contents").innerHTML = nodeContentsStr;
Add += instead of =
for (i = 0; i < note_title.length; i++) {
document.getElementById("current_titles").innerHTML += (note_title[i] + "<br />");
};
for (i = 0; i < note_content.length; i++) {
document.getElementById("current_contents").innerHTML += (note_content[i] + "<br />");
};
Through javascript how can I add more options to a dropdown selectmenu?
Currently trying the following with no luck:
for (i = 0; i < json.powerDropDownItems.length; i++) {
//$('#powerSelect').append($("<option></option>").attr("value", json.powerDropDownItems[i]).text(json.powerDropDownItems[i]));
$('#powerSelect').selectmenu("value", "nice name");
//$('#powerSelect').appendTo("<option>" + json.powerDropDownItems[i] + "</option>");
}
$('#powerSelect').selectmenu("refresh");
UPDATE
Thanks to naveen, I got it working (also added code to clear the list). Here is my following code:
service.getPowerDropDowns(productEC, $('#mountSelect').val(), function (response) {
var json = $.parseJSON(response.value);
var options = [];
// Clear the options first
$("#powerSelect option").each(function(index, option) {
$(option).remove();
});
options.push("<option value=''>Choose</option>");
for (i = 0; i < json.powerDropDownItems.length; i ++)
{
options.push("<option value='" + json.powerDropDownItems[i] + "'>" + json.powerDropDownItems[i] + "</option>");
}
$('#powerSelect').append(options.join("")).selectmenu();
$('#powerSelect').selectmenu('enable');
});
This will work
$(function() {
var options = [];
for (i = 0; i < json.powerDropDownItems.length; i++) {
options.push("<option value='" + json.powerDropDownItems[i] + "'>" + json.powerDropDownItems[i] + "</option>");
}
//append after populating all options
$('#powerSelect')
.append(options.join(""))
.selectmenu();
});
Demo: http://jsfiddle.net/codovations/p863Q/
Depends on the version.
https://github.com/jquery/jquery-ui/tree/selectmenu uses refresh method
https://github.com/fnagel/jquery-ui/tree/selectmenu uses selectmenu() like naveen described.