Chosen jquery plugin not updating with <optgroup> - javascript

strange situation happening here. I'm using the jquery plugin chosen.js. I'm updating a dropdown that is already on the page with an ajax call and jquery. here is a little bit of the sample code.
here is my dropdown as shown in the page.
<div id="singleDropDownBlock" style="display: none">
<select id="SingleDropDown" class="chzn-select" data-placeholder="Choose your start Location" onchange="GetFromNodeValue();">
<!--<option>select a strating locnation based on category.</option>-->
</select>
</div>
This is the code loading the values into the dropdown using jquery.
function GetResultsFromMultiCategory(data)
{
for (i = 0; i < data.d.categories.length; i++)
{
//console.log(data.d.categories[i].catNode);
if (data.d.categories[i].catNode == "0")
{
$('#SingleDropDown').append("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
console.log("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
//onOrOff = false; </optgroup>
}
else
{
$('#SingleDropDown').append("<option " + "value=" + data.d.categories[i].catNode+ ">" + data.d.categories[i].catLoc + "</option>");
console.log("<option " + "value='" + data.d.categories[i].catNode + "'>" + data.d.categories[i].catLoc + "</option>");
if (typeof(data.d.categories[i + 1]) != "undefined")
{
if (data.d.categories[i + 1].catNode == "0")
{
$('#SingleDropDown').append("</optgroup>");
console.log("</optgroup>");
}//end second if
}//end first if
}//end else
}
$('#SingleDropDown').append("</optgroup>");
console.log("</optgroup>");
$("#SingleDropDown").chosen({ placeholder_text_single: "Choose Map" });
$("#SingleDropDown").trigger("chosen:updated");
}
for some reason chosen does not update with the it only updates with the . Is there anything I'm missing? can someone please point me in the right direction.
I also can't get chosen to update the placeholder. All i get is the first item in list as the display.
thanks in advance for any help you can offer.

I have finally figured out my issue. I'll post the answer here so that it may help someone else someday.
The problem here is that appending one select at a time was being closed by the browser. Therefore here is the best way to do this.
function GetResultsFromMultiCategory(data)
{
$("#singleDropDownBlock").show();
$('#SingleDropDown').append("<option></option>");
var myOptions = '';
for (i = 0; i < data.d.categories.length; i++)
{
if (data.d.categories[i].catNode == "0")
{
myOptions += "<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">";
}
else
{
myOptions += "<option " + "value=" + data.d.categories[i].catNode + ">" + data.d.categories[i].catLoc + "</option>";
if (typeof(data.d.categories[i + 1]) != "undefined")
{
if (data.d.categories[i + 1].catNode == "0")
{
myOptions += "</optgroup>";
}
}
}
}
myOptions += "</optgroup>";
$('#SingleDropDown').append(myOptions);
$("#SingleDropDown").chosen({placeholder_text_single: "Choose Start Location" });
}
the take away here is that when using append instead of appending each line, build the string and then append it to the html element.

Related

why my for loop is infinite here

below is the js code for wikipedia search project. I am getting infinite for loop even though it had condition to stop repeating the loop. I am stuck in this problem.
$(document).ready(function() {
$('.enter').click(function() {
var srcv = $('#search').val(); //variable get the input value
//statement to check empty input
if (srcv == "") {
alert("enter something to search");
}
else {
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {
$('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");
/*for loop to display the content of the json object*/
for (i = 1; i < 20; i++) {
$('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");
}
});
}
});
});
You are appending to each and every one of <p> in page.
Since your for loop appends even more <p> (and you possibly have a high number of <p> elements in your page beforehand) you overflow your call stack.
You probably wanted to append to a specific <p>. Try giving an id to your selector.
from what i can see in the url you need to do the following:
loop over the terms found and select the link based on the index of the element, chose a single element .contentto append the data not a set of elements p, this will increase the number of duplicated results
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search='+srcv+'&format=json&limit=20&callback=?', function(json){
$.each(json[1],function(i,v){
$('.content').append("<p><a href ='"+json[2][i]+"'target='_blank'>"+json[0]+"</a>"+v+"</p>");
});
});
see demo: https://jsfiddle.net/x79zzp5a/
Try this
$(document).ready(function() {
$('.enter').click(function() {
var srcv = $('#search').val(); //variable get the input value
//statement to check empty input
if (srcv == "") {
alert("enter something to search");
}
else {
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {
$('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");
/*for loop to display the content of the json object*/
var i = 1;
for (i; i < 20; i++) {
$('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");
}
});
}
});
});

How to append value " select " to the Select dropdown?

I want add "All" option to the existing dropdown as a first option. Pls help me
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}
I want "All" to be the first option in select dropdown
Instead of empty() use .html() and pass the html of the All Option. This will clear the select first then will add all option and then will add other options, and will save you an unnecessary .empty() operation.
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.html('<option value="'+all+'">All</option>');
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
Try this: You can add ALL option just right after emptying the output variable as shown below -
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
output.append("<option value='ALL'></option");//add here
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}
Try this:
$('#mysampledropdown').empty();
$.each(response.d, function(key, value) {
$("#mysampledropdown").append($("<option></option>").val(value.ID).html(value.text));
});
$('<option>').val("").text('--ALL--').prependTo('#mysampledropdown');

JS working in Chrome but not Firefox

This script stopped working in FireFox a couple of weeks ago, around the time I added an SSL certificate to the site. I've confirmed that SSL is being used everywhere, and I've tried disabling all recently installed plugins, to no avail.
I've looked at it with Web Console and don't see any errors there either - though I'm not very experienced with that.
I've also looked at other threads here about js working in Chrome but not FF, but none of the proposed solutions seem to apply to my script.
The problem is that the js is apparently not being called at all - it should show up between the introduction and the "share" graphic.
Any ideas?
This is the page where it should show up, between the text and the "share" graphic: Quiz
And this is the js file: Javascript
Here is the code:
$.each(questions, function (key, value) {
//console.log( key + ": " + value.question ); question = value.question;
qtype = value.qtype;
opts = value.opts;
answer = value.answer;
special = value.special; $('#quiz-form').append('<p> <br>' + parseInt(key + 1) + ") " + question + '</p>'); if (qtype == "radio")
{ opt_array = opts.split(','); for (i = 0; i < opt_array.length; i++)
{ $('#quiz-form').append('<p><input data-ftype="radio" type="radio" name="question_' + key + '" class="question_' + key + '" value="' + opt_array[i] + '"> ' + opt_array[i] + ' </p>'); }
} else if (qtype == "checkbox"}
else if (qtype == "checkbox")
{
opt_array = opts.split(',');
for (i = 0; i<opt_array.length;i++)
{
$('#quiz-form').append('<p><input data-ftype="checkbox" type="checkbox" name="question_' + key + '" class="question_' + key + '" value="'+ opt_array[i] + '"> ' + opt_array[i] + '</p>');
}
}
else if (qtype == "input")
{
$('#quiz-form').append('<p><input data-ftype="text" name="question_' + key + '" type="text" class="question_' + key + '" value="" style = "border:1px solid" ></p>');
} $('#quiz-form').append('<p><input name="answer_' + key + '" type="hidden" value="' + answer + '" class="answer_' + key + '" ></p>');
$('#quiz-form').append('<p class="special" id="special_' + key + '" ><strong>Correct answer(s): ' + answer + '</strong> » Explanation: ' + special + '</p>');
});
$('#quiz-form').append('<p>All done? Check your answers: <input name="submit" id="submit" type="button" value="Submit"></p>'); $('#quiz-form').append('<p>Want another chance? <input name="refresh" id="refresh" type="button" value="Start over"></p>'); $( "#quiz-form" ).on( "click", "#submit", function() {
quest_numb = questions.length;
user_answers = new Array();
real_answers = new Array();
for (i = 0; i <quest_numb;i++)
{
if ($("input[name ='question_" + i + "']").data('ftype')=='radio') { user_answers.push($(":input[type='radio'][name ='question_" + i + "']:checked").val()); } if ($("input[name ='question_" + i + "']").data('ftype')=='text') { user_answers.push($(":input[type='text'][name ='question_" + i + "']").val()); } if ($("input[name ='question_" + i + "']").data('ftype')=='checkbox') {
var chkArray = [];
$(".question_" + i + ":checked").each(function() {
chkArray.push($(this).val());
}); var selected = chkArray.join(',')
user_answers.push(selected); } real_answers.push($(":input[type='hidden'][name ='answer_" + i + "']").val()); // alert($(":input[type='text'][name ='question_"+i+"']").val());
}
points=0;
message='<div id="results">';
inc=1;
for(i=0;i<real_answers.length;i++) {
if (typeof user_answers[i]=='undefined' || user_answers[i]=='')
{ //message+='<p>'+parseInt(i+1) + ')' +' You didn't answer this question.</p>';
$('#special_'+i).text(i+inc+') '+'You didn\'t answer this question.');
$('#special_'+i).show();
$(":input[name ='question_"+i+"']").prop('disabled',true);
}
else if( user_answers[i].toLowerCase().trim()==real_answers[i])
{
points++;
//message+='<p>' +parseInt(i+1) + ')' +' Très bien !</p>';
$('#special_'+i).text(i+inc+') '+'Très bien !');
$('#special_'+i).addClass('correct');
$('#special_'+i).show();
} else
{
$('#special_'+i).text($('#special_'+i).text().replace(i+inc+') '+' ',''));
$('#special_'+i).prepend(i+inc+') '+' ');
$('#special_'+i).show();
}
}
message+='<p> Your score: ' + points + '/' + real_answers.length + '</p>';percent=points*100/real_answers.length;if(percent>=90)
{
message+='<p> Chapeau !</p>';
}
if(percent>=80 && percent<90)
{
message+='<p> Très bien !</p>';
}if(percent>=60 && percent<80)
{
message+='<p> Pas mal.</p>';
}if(percent>=40 && percent<60)
{
message+='<p> Houp ! Il faut étudier un peu plus.</p>';
}
if(percent<40)
{
message+='<p> Oh là là - il faut étudier !</p>';
}message+='</div>';
$('#quiz-form #results').remove();
$('#quiz-form').prepend(message);
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$( "#quiz-form" ).on( "click", "#refresh", function() {
location.reload();
window.scrollTo(0,0);
});
});function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable){return pair[1];}
}
return(false);
}
There are numerous JS errors occurring throughout your code. First and foremost, you need to fix the insecure file references, since you are using SSL, so files like this will not load - either change it to relative paths or replace http with https:
<script src="http://www.feedblitz.com/js/tinybox2/tinybox.js" type="text/javascript">
If you are unsure how to view these errors in your browser, please refer to any of these articles:
https://developer.chrome.com/devtools
https://developer.mozilla.org/en/docs/Tools/Web_Console

jQuery adding pages

I have made an really ugly code, but i was going to fix it when i was done with it.. But i didn't come that far >_<
i post my code here and some information under it.
$(document).on('click', '.cogwheel', function() {
var link = $(this).data('pageid');
$(".pages").not(".page" + link).hide();
$(".links").not("#link-" + link).show();
$("#link-" + link).toggle();
$(".page" + link).toggle();
});
$(document).on('click', '.deletecross', function() {
$(".deleteClass" + $(this).data('pageid')).remove();
var total = parseFloat($(".hiddenCounter").val()) - 1;
$(".hiddenCounter").val(total);
var this_val = $(".pagae" + $(this).data('pageid')).val();
this_val.replace($(".pagae" + $(this).data('pageid')).val(), "");
$(".pagae" + total).val(this_val);
});
$(document).on('keyup', '.pages', function() {
var pageID = $(this).data('pageid');
var pages = $(".pagae").val();
$(".pagae" + pageID).val($(this).val());
$(".pagetest" + pageID).html($(this).val());
$(".pagae").val(pages + $(this).val());
$("#link-" + pageID).html($(this).val());
});
message = new Array();
jQuery.fn.update_textarea = function(test) {
//for (i=0;i<test;++i) {
if (message[test]) { $(".MenuLinks").append('<tr><td width="150">Sida ' + test + '</td><td align="right"><span class="glyphicon glyphicon-cog"></span></td></tr>');$("#articles_textarea").append('<h2>askda</h2><textarea id="editor-1"></textarea>'); }
else {
message[test] = '';
var TDRow1 = '<tr class="deleteClass' + test + '"><td width="150">Sida ' + test + '<input type="text" name="pages[]" value="Sida ' + test + '" class="pages page' + test + '" data-pageid="' + test + '"></td>';
var TDRow2 = '<td align="right" width="20"><span class="glyphicon glyphicon-cog cogwheel" data-pageid="' + test + '" style="cursor:pointer;" title="Redigera"></span></td></tr>';
var TDRowRemove = '<td align="right" width="10"><span class="glyphicon glyphicon-remove deletecross" data-pageid="' + test + '" style="cursor:pointer;color: #ff0000;" title="Radera"></span></td>';
var TDFake = '<td></td>';
if (test != 1) {
var TRRow = TDRow1 + TDRowRemove + TDRow2;
}
else {
var TRRow = TDRow1 + TDFake + TDRow2;
}
$(".MenuLinks").append(TRRow); $("#articles_textarea").append('<div id="Sida' + test + '" class="tab-pane"><input type="hidden" class="pagae' + test + '" name="pagae[]" value="Sida ' + test + '"> <h2 class="pagetest' + test + '">Sida ' + test + '</h2><textarea name="editor[]" id="editor-' + test + '" class="editor" data-pageid="' + test + '"></textarea></div>');
$("#editor-" + test).wysibb({lang: "en"});
}
//}
}
/* If no textareas available add a new one */
if (message.length == 0) {
$(this).update_textarea(1);
$("#Sida1").addClass("active");
}
});
This code you can add a page with, delete a page and write a new name for the page, and im using bootstrap so they all got there own "tab"
I was going to use this script to make an article system, and when you post it should insert pages into an own table like pages. And content to another.
But my problem here is, when im trying to remove a "link/page" it removes the page from the menu and everything.
But i dont have a freaking clue how to change the hidden input that has all the names of the pages in it.. So when i post the hidden input i got all pages i have on the page and those i removed..
I know this is some slabby code and i know you could make it better then me..
If you got any ideas or any thing that i can make smaller let me know..

Javascript can't set colour

The function is called via:
myChart.gChangeBarColour(1, "#000000");
This works:
// Changes bars colour
this.gChangeBarColour = function(gBarID, gBarColour) {
if (gBarID <= this.gData.length && gBarID >= 0) {
document.getElementById("gBar" + gBarID).style.backgroundColor = '#000000';
}
}
But this doesn't work:
// Changes bars colour
this.gChangeBarColour = function(gBarID, gBarColour) {
if (gBarID <= this.gData.length && gBarID >= 0) {
document.getElementById("gBar" + gBarID).style.backgroundColor = '" + gBarColour + "';
}
}
No errors in the console at all! Any ideas?
Your '" + gBarColour + "' is a string , delimited by single quotes ' that contains " + gBarColour + ", that value is then used as the color.
You need to leave out all the quotes and plus signs:
// assign the value of gBarColour to the backgroundColor property
document.getElementById("gBar" + gBarID).style.backgroundColor = gBarColour;
'" + gBarColour + "'
should be
gBarColour or ''+gBarColour

Categories