i have two select boxes
one of them is dynmaic one of them static
the dynamic one is loading with javascript (get and fill facebook friends) like below
function (response) {
//console.log(response);
var xxx = '<select id="friend" class="msdropdown" name="friend">';
for (i = 0; i < response.length; i++) {
xxx = xxx + '<option value"' + response[i]['uid'] + '">' + response [i] ['name'] + '</option>';
}
xxx = xxx + '</select>';
friendslist.innerHTML = xxx;
});
i give class to both of the select boxes but the dynamic one is not working i think because of lateness
how could i solve this problem?
In your case the css file is loaded since the static select is being styled so I don't think it's a timing issue. If you inspect the dynamic select box in firebug does it have the same class / styles applied to it?
Related
This is in reference to dynamically change options in a list by another list. Unfortunately, it all works except if the project name has a " or a #. Eg. Project name: '10" Centerline #3 Pipe'
I am a newbie to this and I have been cut/paste (learning) as I go along. If someone can help, it will be great. I am seen some things about escaping and encoding URI stuff but not sure where to put it in. The other problem is just understanding what happens past the onchange event.
I can get the list of project names from a previous list and it shows up in my HTML page. However, when I select the choices that have a ( " ) or a ( # ), the next populated list breaks.
Thanks in advance. I really, really appreciate the time if someone puts in a response.
Here is the javascript portion:
project_name_select.onchange = function(){
project_name = project_name_select.value;
fetch('/sr/new/project/' + project_name).then(function(response){
response.json().then(function(data) {
var areaHTML = '<option value="See List">Select Area</option>';
for (var state of data.project_area) {
areaHTML += '<option value="' + state.project_area + '">' + state.project_area + '</option>'
}
project_area_select.innerHTML = areaHTML;
});
});
}
Here is the flask portion:
#surveys.route("/sr/new/project/<get_project_name>")
def project(get_project_name):
project_dict, dict_type = choice_project_dict(get_project_name)
project_areaArray = []
for proj in project_dict:
ownerObj = {}
ownerObj['id'] = proj['company_name']
ownerObj['owner_company'] = proj['company_name']
ownerArray.append(ownerObj)
return jsonify({'project_area': project_areaArray})
I've hit a roadblock I just can't get past after 5+ hours of fiddling. Basically what I'm trying to do is take responses from my API (a recipe search tool) and stick each individual recipe into its own card, having 2 cards side by side all the way down the page. The responses include various info about the recipe to be placed dynamically into each card, but everything I've tried working off the Doc's has just broken my page completely.
My JS (edited to remove a couple chars from my API key, sorry but it's a trial):
//On Index page this function takes search bar input and gives ten results for recipes
function createRecipe() {
var mealName = $("#recipeInput").val().trim();
$.ajax({
url: "https://api.edamam.com/search?q=" + mealName + "&app_id=70e00e26&app_key=6c683b56a399b435d00ee3100c0ca",
method: "GET"
}).then(function(response) {
for (i = 0; i < response.hits.length; i++) {
var newDiv = $("#recipeReveal");
newDiv.append("<div class='card col-lg-4 col-md-5 col-sm-10' style=''>")
.append("<div class='card-body'>")
.append("<h5>" + response.hits[i].recipe.label + "</h5>")
.append("<img class='card-img-top'src='" + response.hits[i].recipe.image + "' alt='Recipe Picture'></img>")
.append("<p class='card-text'>Full recipe instructions can be found at: <a href='" + response.hits[i].recipe.url + "'>" + response.hits[i].recipe.url + "</a></p>")
.append("</div>")
.append("<ul class='list-group list-group-flush'>");
for (j = 0; j < response.hits[i].recipe.ingredients.length; j++) {
newDiv.append("<li class='list-group-item'>" + response.hits[i].recipe.ingredients[j].text + "</li>");
}
newDiv.append("</ul>")
.append("<div class='card-body'>")
.append("<button id='result" + (i + 1) + "' onclick='saveRecipe(" + (i) + ")'>Save Recipe</button>")
.append("</div></div>");
}
queriedRecipe0 = (response.hits[0].recipe.uri);
queriedRecipe1 = (response.hits[1].recipe.uri);
queriedRecipe2 = (response.hits[2].recipe.uri);
queriedRecipe3 = (response.hits[3].recipe.uri);
queriedRecipe4 = (response.hits[4].recipe.uri);
queriedRecipe5 = (response.hits[5].recipe.uri);
queriedRecipe6 = (response.hits[6].recipe.uri);
queriedRecipe7 = (response.hits[7].recipe.uri);
queriedRecipe8 = (response.hits[8].recipe.uri);
queriedRecipe9 = (response.hits[9].recipe.uri);
})
}
This is posting into a div with the appropriate ID "recipeReveal", i thought I had it working but it turns out I just made one really long container with a tiny little card at the top that you can't even see. The ideal situation would be to have each recipe in its own card, along with img response, URL, ingredient list, button, etc. If I can get them into individual cards I definitely think I can knock out the CSS/ Grid system aspects easily. Just the JQuery that's getting me.
PS - Any resources/ easy to understand documentation on this subject is also appreciated if you don't have the time to really dive into this one! Thank you. `
I have a dependent drop down i.e. State -> city -> Pincode .
I am using json instead of fetching from the database .
The dropdown works fine on the local server .
But on the web-server it is relatively slow .
A part of code, is here -
for (var i = 0; i < pincodes['address'].length; i++) {
if (pincodes['address'][i]['regionname'] == city_key) {
$('#pincode').append('<option>' + pincodes['address'][i]['pincode'] + '</option>');
}
}
what are the ways , I can implement to make it load faster .
I recommend you concatenate your option HTML to a single string, so you can insert it all at once.
43,439 reasons to use append() correctly
var optionInsert = '';
for (var i = 0; i < pincodes['address'].length; i++) {
if (pincodes['address'][i]['regionname'] == city_key) {
optionInsert += '<option>' + pincodes['address'][i]['pincode'] + '</option>';
}
}
$('#pincode').append(optionInsert);
I am having some trouble using the chosen.js plugin on my dropdown.There are a few related questions on here that I have worked through but still no luck on my code.
I have 4 dynamically created and populated select elements.
var dropdownArray = [];
function initDropdown() {
var id = "list";
var classy= "chzn-select";
var html = "";
for ( var idcount = 0; idcount < 4; idcount++) {
var dropdownHTML = "<select class=\""+classy+"\" id=\"" + id
+ "\" onchange= selectfunc(this) >" +
"<option selected=\"selected\">Make Selection... </option>" +
"</select>";
dropdownArray.push(id);
html += dropdownHTML;
id += "0";
}
$("#dropdowns").html(html);
$(".chzn-select").chosen();
};
I have tried to use this line to apply Chosen.js to the elements by their class name chzn-select:
$(".chzn-select").chosen();
However I am getting the error :
Uncaught TypeError: Object #<Object> has no method 'chosen' .
Sorry about the messy code, I am new to this.
any help would be much appreciated.
From your comments, you were trying to create a single SELECT with 4 options using chosen.js. Check out JSFiddle 1 for result.
From your question, you were trying to create 4 SELECT dynamically using chosen.js. Check out JSFiddle 2. The reason for error is you missed to point the right id (dropHolder).
try this $("#list").trigger("chosen:updated");
got it from here
I'm working on creating a service that allows you to create team or user based challenges. Using HTML 5 specifications to design the page, I've run into a bit of an issue appending to a drop down list that resides in another page. The entirety of functionality lives within two pages, mainly by making AJAX calls to other pages. There's a little function that appends 2 properties of a team to a drop down list, but I can't seem to get it to work properly.
Code:
var teams = $.parseJSON(getAllTeams());
$('#multiPurpose').load('allTeams2.html #teamSelect');
for (i = 0; i < teams.length; i++) {
var team = $.parseJSON(getTeam(teams[i]));
if (team.ownerID === userID) {
$(
"<option value='" + team.teamID + "'>" + team.teamName
+ "</option>").appendTo('#teamSelection');
}
}
}
The #teamSelection is contained within the #teamSelect div. Any help would be great.
Adding a callback function within .load() will solve the problem. Basically, you're telling it to load everything within that div before running the for loop.
$('#multiPurpose').load(
'allTeams2.html #teamSelect',
function() {
for (i = 0; i < teams.length; i++) {
var team = $.parseJSON(getTeam(teams[i]));
if (team.ownerID === userID) {
$(
"<option value='" + team.teamID + "'>"
+ team.teamName + "</option>")
.appendTo('#teamSelection');
}
}
});