I don't know why this code doesn't work:
$("body").append("<select>");
for (j in boxes[i].ex_options ){
$("body").append("<option>"+boxes[i].ex_options[j]+"</option>");
}
$("body").append("</select>");
<select> items are not correctly displayed.
They're asking for this, just in case:
var Box = function (ex_solution, ex_img, ex_options) {
this.ex_solution = ex_solution;
this.ex_img = ex_img;
this.ex_options = ex_options;
}
var boxes = [];
boxes.push(new Box ("solution1","images/caja1>",["solution 1.1", "option 1.2", "option 1.3"]));
Thank you
append(), as #ArunPJohny points out, doesn’t concatenate strings; it appends DOM elements. When you add your first <select>, it creates a <select> element, then adds a bunch of <option>s outside of it. What you can do is create an element and pass an array of <option>s to append(), like this:
$("body").append(
$("<select>").append(
$.map(boxes[i].ex_options, function(option) {
return $("<option>").text(option);
})
)
);
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css">
<script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js"> </script>
<script type="text/javascript" language="javascript">
$(function() {
$('.datepick').datepick({
dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});
});
$(document).ready(function(){
var Box = function (ex_solution, ex_img, ex_options) {
this.ex_solution = ex_solution;
this.ex_img = ex_img;
this.ex_options = ex_options;
}
var boxes = [];
boxes.push(new Box ("solution1","images/caja1>",["solution 1.1", "option 1.2", "option 1.3"]));
$("body").append("<select></select>");
$.each(boxes[0].ex_options, function(index, value){
console.debug(value);
$("body select").append("<option>"+value+"</option>");
});
});
</script>
<body></body>
Related
This is my full code:
<input id="storecipient">
<div class="hidbdsp">
<div class="hidname">tomato</div>
<div class="hidname">orange</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#storecipient").on('input', function() {
var thisFstchar = $(this).val();
var name = $(this).siblings(".hidbdsp").children(".hidname").html();
if (thisFstchar.charAt(0) == name.charAt(0)) {
alert(name);
}
});
});
</script>
What my js code does is alerts the full word that contains the first letter of the word typed on the input. So when the letter "t" is typed, the word "tomato" shows up, but when "o" is typed on the input, "orange" does not show up. Even though both "orange" and "tomato" have the same class ".hidname", the $(this) selector only will select tomato but skips over orange. Why is this?
Try this
$(document).ready(function() {
$("#storecipient").on('input', function() {
var thisFstchar = $(this).val();
$(this).siblings(".hidbdsp").children(".hidname").each(function() {
var name = $(this).html();
if (thisFstchar.charAt(0) == name.charAt(0)) {
alert(name);
}
});
});
});
<input id="storecipient">
<div class="hidbdsp">
<div class="hidname">tomato</div>
<div class="hidname">orange</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
As #misner3456 stated, jQuery.html() returns the HTML of the first matched element only. To get the HTML for all of the matched elements, try something like looping over all of the classes and appending each element's HTML to a string. For example:
let html;
$(".hidname").each(function() {
html += $(this).html();
});
You can refactor to directly iterate $(".hidbdsp .hidname").each() rather than finding the sibling.
$(document).ready(function() {
$("#storecipient").on('keyup', function() {
var thisFstchar = $(this).val();
$(".hidbdsp .hidname").each(function() {
var name = $(this).html();
if (thisFstchar.charAt(0) == name.charAt(0)) {
alert(name);
}
});
});
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input id="storecipient">
<div class="hidbdsp">
<div class="hidname">tomato</div>
<div class="hidname">orange</div>
</div>
To get all children and descendant:
$('.hidbdsp *')
To get only direct children:
$('.hidbdsp > *')
.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input id="storecipient">
<div class="hidbdsp">
<div class="hidname">tomato</div>
<div class="hidname">orange</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#storecipient").on('input', function() {
var thisFstchar = $(this).val();
$('.hidbdsp *').each(function() {
var name = $(this).html();
if (thisFstchar.charAt(0) == name.charAt(0)) {
alert(name);
}
});
});
});
</script>
</body>
</html>
I am using jquery chosen and calling ajax on change drop down but records are not displaying. This code which I am using after changing drop down.
$.ajax({
type: "POST",
url: "MY URL",
data: {
sno: $(this).val()
},
success: function (resp) {
var resp = jQuery.parseJSON(resp);
if (resp.length == 0) {
$("#site").html('<option value="0" selected>Select Site</option>');
} else {
$.each(resp, function (i, item) {
$('#site').append($('<option>', {
value: item.siteNameID + '-' + item.siteName,
text: item.siteName
}));
});
}
},
error: function (resp) {
console.log('error');
}
});
One thing I have noticed jquery chosen applying on my select box but data which I am fetching from server side is not adding in that select box
You will need to call the chosen update trigger after you add items to your select list dynamically in order for them to show up. Use the following line after you have appended items and they should be displayed in your list.
$('#site').trigger("chosen:updated");
I think my code is not the answer for your question, but this mimics adding options to select... just click the add button...
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="add()">Add</button>
<select id="select"></select>
<script>
var json = [{title:"lorem",value:1},
{title:"john doe",value:2},
{title:"foo",value:3},
];
function add(){
$("#select").empty();
for(var x = 0; x<json.length; x++){
var option = '<option value="'+json[x].value+'"> '+json[x].value+'-'+json[x].title+'</option>';
$("#select").append($(option));
}
}
</script>
</body>
</html>
I am trying to bind a function to the select field when something is pasted into it (it looks like an input field after allowing multiple style and select2:matcher/tokenize) but in IE it always truncates any pasted text which contains a new line character.
<form method="POST" action="/run" class="ui-widget" onsubmit=" return confirmSubmit(this, 'run',true) ">
Editor:
<select name="editor" id="editor" multiple style="width: 200px">
<option>ALL</option>
</select>
<input type="submit" value="Submit">
</form>
bind('paste') does not seem to work on an <select> object so I had to use bind('change')
var unitIds = ["Red","Yellow","Green"];
$.each(unitIds, function(i, f) {
$('select[name="editor"]').append($('<option>').text(f));
});
$('#pastefromclip').select2({
matcher: function(term, text) {
return text.toUpperCase().indexOf(term.toUpperCase()) === 0;
},
tokenizer: function(input, selection, callback) {
if (input.indexOf(" ") < 0) return;
var parts = input.split(" ");
for (var i = 0; i < parts.length; i++) {
var part = parts[i];
if(part.length > 0){
if (unitIds.indexOf(part) == -1) {
alert('Invalid fields: ' + part);
} else {
callback({
id: part,
text: part
});
}
}
}
}
});
$('#editor').bind('change', function (e) {
var clipped = window.clipboardData.getData('Text');
clipped = clipped.replace(/(\r\n|\n|\r)/gm, " "); //replace newlines with spaces
//$(this).val(clipped); // this doesn't seem to work
var element = document.getElementById('editor');
element.value = clipped; // doesn't seem to work either
return false; //cancel the pasting event
});
Copy and paste the following into the select field:
Red
Yellow
It pastes only 'Red' and shows the matched object. It does not recognise the change function until I select that matched object and it is being tokenized.
After it recognises that change, it runs through the clipboardData and sees both Red and Yellow but it cannot assign the select field with that data.
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.jqgrid.showhidecolumnmenu.js"></script>
<script type="text/javascript" src="javascript/jqGrid/jquery-1.8.3.js"></script>
<script type="text/javascript" src="javascript/jqGrid/jquery-ui-1.9.2.js"></script>
<script type="text/javascript" src="javascript/toastr.min.js"></script>
<script type="text/javascript" src="javascript/adminConsole.js"></script>
<script type="text/javascript" src="javascript/select2.min.js"></script>
<script type="text/javascript" src="javascript/moment.min.js"></script>
<script type="text/javascript" src="javascript/jqGrid/ui.multiselect.js"></script>
<script type="text/javascript" src="javascript/jqGrid/grid.locale-en.js"></script>
<script type="text/javascript" src="javascript/jqGrid/jquery.jqGrid.min.js"></script>
use TokenSeparators for multiple inputs
See it Action
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
})
Please refer the section Automatic tokenization in Select2 Tokenization
Also when Copy paste the options (Red Green ) don't forget to append "," at last
I want to create checkboxes dynamically. I am doing that, however I am failing with setting the name of the label. I tried setting the inner html to a value, though it didn't work. What is the correct way to do it ?
source:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" >
<fieldset data-role="controlgroup" id="exampleGroup">
</fieldset>
</div><!-- /page -->
</body>
<script>
var someId = "Something";
for (var i = 0; i < 5; i++) {
var checkBox = $('<input>', {
type: "checkbox",
class: "custom",
id: someId + i.toString()
});
var checkBoxLabel = $('<label>', {
for : someId + i.toString(),
});
checkBoxLabel.innerHTML = "Hello world!"; // didn't work
checkBox.appendTo("#exampleGroup");
checkBoxLabel.appendTo("#exampleGroup");
}
</script>
</html>
Using text() you can set the text inside label
try this:
checkBoxLabel.text("Hello world!");
Use text() or html() to set the contents of a DOM node. The difference between them is how they handle HTML tags.
checkBoxLabel.html('<foo>');
// <label><foo></label>
checkBoxLabel.text('<foo>');
// <label><foo></label>
You should prefer text() when you do not need HTML.
Try this
JSFIDDLE
var someId = "Something";
for (var i = 0; i < 5; i++) {
var checkBox = $('<input>', {
type: "checkbox",
class: "custom",
id: someId + i.toString()
});
var checkBoxLabel = $('<label>', {
for: someId + i.toString(),
});
checkBoxLabel.text(someId + i.toString());
checkBox.appendTo("#exampleGroup");
checkBoxLabel.appendTo("#exampleGroup");
}
Following is the area you want to look at
checkBoxLabel.text(someId + i.toString());
I used jquery text to change the label text
http://api.jquery.com/text/
I want to add a select list to my website using a button.
I need to use nodes because i need to be able to access it within the DOM so i can retrieve its value later on so I cant use innerHTML.
My problem is that createTextNode seems to surround my list in quotation marks and so it will not display. Can anyone help me out
<!doctype html>
<html>
<head>
<title> Pop Up </title>
<script>
function change()
{
var theDiv = document.getElementById("dropDownList");
var content = document.createTextNode("<select name='scrapbookID' id='scrapbookID'><option value='15'>one</option><option value='18'>two</option><option value='20'>three</option><option value='21'>four</option></select>");
theDiv.appendChild(content);
}
</script>
<style type = "text/css">
</style>
</head>
<body>
<div id = "signout">
Your are Currently signed in.<br />
Sign Out
<div id = "dropDownList">
<button onclick="change()">Add List</button>
</div>
</div>
</body>
What you need to have is .createElement() it creates a given element, where as createTextNode creates text node with given content.
function change()
{
var theDiv = document.getElementById("dropDownList");
var select = document.createElement('select');
select.name = 'scrapbookID';
select.id = 'scrapbookID';
select.innerHTML = "<option value='15'>one</option><option value='18'>two</option><option value='20'>three</option><option value='21'>four</option>"
theDiv.appendChild(select);
}
Demo: Fiddle
When you’re creating a text node, it’s treated as exactly that: text, not HTML. But it’s cleaner to just build the DOM properly!
function change() {
var theDiv = document.getElementById("dropDownList");
var selectBox = document.createElement("select");
selectBox.id = "scrapbookID";
selectBox.name = "scrapbookID";
var options = {
"15": "one",
"18": "two",
"20": "three",
"21": "four"
};
for(var x in options) {
if(options.hasOwnProperty(x)) {
var option = document.createElement("option");
option.value = x;
option.appendChild(document.createTextNode(options[x]));
selectBox.appendChild(option);
}
}
theDiv.appendChild(selectBox);
}