I have this block as UI :
<textbox id="style-search" flex="1" type="search" timeout="250" dir="reverse"/>
and this is the onload function:
var listbox = document.getElementById("style-listbox");
var searchbox = document.getElementById("style-search");
var styles = Zotero.Styles.getVisible();
var index = 0;
var nStyles = styles.length;
var selectIndex = null;
var searchValue = searchbox.value;
if (searchValue) {
for (var i = 0; i < nStyles; i++) {
if (styles[i].title.match(searchValue)) {
var itemNode = document.createElement("listitem");
itemNode.setAttribute("value", styles[i].styleID);
itemNode.setAttribute("label", styles[i].title);
itemNode.setAttribute("id", styles[i].title);
if (i % 2 === 0) {
itemNode.setAttribute("class", "backG");
} else {
itemNode.setAttribute("class", "backY");
}
listbox.appendChild(itemNode);
if (styles[i].styleID == _io.style) {
selectIndex = index;
}
index++;
}
}
}
i need this: when i type some string in search box i want to filter all my style base on my style list with that string. i try above code but it doesn't work.
Related
The code below is for listing blogger posts within a Label Name, if the post has the specific Label Name it will be shown in this list. I would like to be able to change the appearance of how everything is displayed by changing where the post image would look, and where the title would look, change background color, add borders, shadows change the font etc ...(I know how to change the appearance with css, but I do not know how to integrate the code below with css and html) At the moment the code shows the title and the right of the title the image.
var startIndex = 1;
var maxResults = 5;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "https://levon-ltr.blogspot.com//feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url ;
} else {
var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
}
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
var postImage = document.createElement("img");
a1E.href = url;
a1E.textContent = title;
postImage.src = imageThumb;
liE.appendChild(a1E);
liE.appendChild(postImage);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
<div>
<ul id="postList12"></ul>
</div>
This creates stuff you can style with CSS. For example:
#postList12 li {
border: 1px solid blue;
}
Use the inspector in your browser to see what it makes. If you want to change the order of elements or add new ones you’ll have to edit the script to do that.
I have a select tag to choose categories, each option contain the category number as value.
The category number is in the URL string.
I'm trying to write a JS to check if the option value is the same as the category number in the URL and if so make the option selected. so far the script dosnot work.
What am I doing wrong?
here is the code:
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] === VarSearch){
return KeyValuePair[1];
}
}
}
function compareValue(){
var x = document.getElementById("selectcategory").length;
for (var i = 0; i < x; i++){
var categNo = document.getElementById("selectcategory").options[i];
var UrlValue1 = GetUrlValue('icid');
if (categNo === UrlValue) {
document.getElementById("selectcategory").options[i].selected = true;
}
alert(UrlValue1);
}
}
if needed, I will send a link to the work.
if doing that with jquery is easier, i will be happey to learn.
thanx.
The problem is that categNo should be the value of the corresponding option tag. Also it's better to cache select element and not requery DOM in the loop:
function compareValue() {
var select = document.getElementById("selectcategory");
var x = select.options.length;
for (var i = 0; i < x; i++) {
var categNo = document.getElementById("selectcategory").options[i].value;
var UrlValue = GetUrlValue('icid');
if (categNo === UrlValue) {
select.options[i].selected = true;
}
}
}
Demo: http://jsfiddle.net/dj7c6sdL/
How to add index and value to a object, below is my code, I tried to add index and value in loop, but it shows error undefined is not an object ($data.file_list_image.i.sequence), why and how to solve it ?
tried to get json data and send to server side
desire data
$data = {file_list_image: {0: {sequence: 1, intro: }, 1: {sequence: 1, intro: }, }}
js
var $el = $content_list.find('.content-list-gallery-file-list');
var file_length = $el.length;
var file_image_length = 0;
var file_embed_youtube_length = 0;
for (var i = 0; i < file_length; i++) {
if ($el.eq(i).attr('data-type') == 0) { // console.log('img');
file_image_length++;
} else if ($el.eq(i).attr('data-type') == 1) { // console.log('video');
file_embed_youtube_length++;
}
}
var $data = {};
for (var i = 0; i < file_image_length; i++) {
var $file_list = $el.filter(function () {
return $(this).attr('data-type') == 0 && $(this).attr('data-tmp-id') == i;
});
var sequence = $file_list.attr('data-sequence');
var intro = $file_list.find('.intro textarea').val();
$data.file_list_image.i.sequence = sequence;
$data.file_list_image.i.intro = intro;
}
console.log($data);
HTML
<div class="content_list">
<div class="content-list-gallery-file-list" data-type="0" data-tmp-id="1" data-sequence="0">
<div class="intro"><textarea></textarea></div>
</div>
<div class="content-list-gallery-file-list" data-type="0" data-tmp-id="0" data-sequence="1">
<div class="intro"><textarea></textarea></div>
</div>
<div class="content-list-gallery-file-list" data-type="1" data-tmp-id="2" data-sequence="2">
<div class="intro"><textarea></textarea></div>
</div>
</div>
Example of how it can be done by initializing object properties at correct time:
Fiddle example
var $data = {};
$data.file_list_image = {};
for (var i = 0; i < 5; i++)
{
$data.file_list_image[i] = {};
$data.file_list_image[i]["sequence"] = "seq" + i;
$data.file_list_image[i]["intro"] = "in" + i;
}
console.log($data);
By the way, $data.file_list_image[i]["sequence"] (same with intro) can also be $data.file_list_image[i].sequence
Fiddle example with original HTML.
I have dynamic html table and every cell have one checkbox. I want to get the selected checkbox if the user select from multiple checkbox from different row.
function GetAllChecked() {
var chkedshid = new Array();
var rows = new Array();
rows = document.getElementById("Tbl_Id").getElementsByTagName("tr");
trcount = rows.length;
for (var i = 0; i < rows.length; i++) {
trid = rows[i].id;
chkedshid = chkedshid + chkedshid
if (inputList = document.getElementById(trid).getElementsByTagName("input")) {
for (var n = 0; n < inputList.length; n++) {
if (inputList[n].type == "checkbox") {
if (inputList[n].checked == true) {
chkedshid[n] = inputList[n].id;
}
}
}
}
}
document.getElementById('Hidden_CellSelected').value = chkedshid.join();
document.getElementById("BtnSav2Cart").click();
}
why why this function return just last selected checkbox for last row in loop????
i need the all selected checkbox for all rows!!!!!!!
Assuming you are using jQuery.
Then you can simply do -
$("#myTableId input:checked")
If your checkbox have specific class then you can also do -
$("#myTableId .specificCheckboxClass:checked")
On some Button click try to execute this code
var checkedTransactions = $("input:[name='idofcheckboxe']:checked").map(function () {
return $(this).val();
}).get();
var will return all id of check boxes which are selected
thanks all i solve the problem:
function GetAllChecked() {
var chkedshid = new Array();
var rows = new Array();
rows = document.getElementById("Tbl_Id").getElementsByTagName("tr");
trcount = rows.length;
var totlchk = new Array();
for (var i = 0; i < rows.length; i++) {
trid = rows[i].id;
if (inputList = document.getElementById(trid).getElementsByTagName("input")) {
for (var n = 0; n < inputList.length; n++) {
if (inputList[n].type == "checkbox") {
if (inputList[n].checked == true) {
chkedshid[n] = inputList[n].id;
}
}
}
totlchk = totlchk.concat(chkedshid.join());
}
}
document.getElementById('myHiddenfield').value = totlchk.join();
document.getElementById("BtnSav2Cart").click();
}
var table = document.getElementById("mytable");
checkbox = table.getElementsByTagName("input");
for(var indexCheckbox = 1; indexCheckbox<checkbox.length; indexCheckbox++){
if(checkbox[indexCheckbox].checked){
//do something
}
}
I've a drop down list that contains all the ontacts on mobile. I want to select more than one contact at a time.
When I was working on regular html & JS pages I used this code:
function loopSelected()
{
var txtSelectedValuesObj = document.getElementById('txtContactsName');
var selectedArray = new Array();
var selObj = document.getElementById('AllContacts');
var i;
var count = 0;
for (i=0; i<selObj.options.length; i++)
{
if (selObj.options[i].selected) {
selectedArray[count] = selObj.options[i].value;
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
But when I use it on Android, then if statement is skipped & it just stops,this statement:
"selObj.options[i].selected"
seems strange for the mobile!
This worked:
function ChooseContact(data)
{
var txtSelectedValuesObj = document.getElementById('txtContactsName');
var selectedArray = new Array();
var selObj = document.getElementById('contacts');
var i;
var count = 0;
for(i=0;i<selObj.options.length;i++)
{
if(selObj.options[i].selected==true)
{
selectedArray[count] = selObj.options[i].value;
alert(selObj.options[i].value);
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
I just modified this:
if (selObj.options[i].selected)
to this:
if(selObj.options[i].selected==true)