using jquery .html(), i cant pass an id through to a function - javascript

sorry if confusing.. but i am this code:
$(document).ready(function(){
$("button.yo1").click(function(){
$("div.class1").html("<h1> </h1><h1><br /><select id='multi2' style='width:193px;'></select><br /></h1><button>Pick Class</button>")
});
});
and 'multi2' can't be found .. do i have to pass a parameter or variable?. here is the function to get multi2
function childless() {
var s = document.getElementById('multi2');
var ar = [1,2,3];
for(var i=0; i<ar.length; i++) {
var option = document.createElement('option');
option.text = ar[i];
option.value = ar[i];
s.options[i] = option;
}
}
it works if i dont change the div, any ideas?

Well, the childless() function can't be called unless button.yo1 has been clicked

$(document).ready(function(){
$("button.yo1").click(function(){
$("div.class1").html("<h1> </h1><h1><br /><select id='multi2' style='width:193px;'></select><br /></h1><button>Pick Class</button>");
childless(); // <---call childless() after the HTML content has been added.
});
});
Although I'd wonder why you want to recreate the content with each click of div.class1.

Related

Update the select options with given dynamic data

Need to send dynamic (not hardcode) data to a select element.
This code works great in one of my sheets but doesn't work in the other sheet.
The "select" element doesn't get updated with the options I send..
I don't get an error message either.
I've spent a lot of time twitching it and trying to find why but still don't see what's wrong.
p.s. I used a dummy object to send the data for testing purpose.
The html (used MaterializeCss framework)
<select class="icons browser-default" id="selName" onChange ="getNameText();">
<option value="" disabled selected>Choose week</option>
<div id = "err"></div>
//select element initialization in framework
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var options = handlers()
var instances = M.FormSelect.init(elems);
});
function handlers() {
var success = google.script.run.withSuccessHandler(addOptions).getNamesForDropdown()
var failure = google.script.run.withFailureHandler(showError).getNamesForDropdown()
return;
}
function addOptions(names) {
var selectTag = document.getElementById("selName") //select tag
for (var k in names) {
var thisID = k;
var thisText = names[k];
var option = document.createElement("option"); //creating option
option.text = thisText
option.value = thisID;
selectTag.add(option);
}
}
function showError() {
var err = document.getElementById("err").innerHTML = "There was an error."
}
//get the text of selected option
function getNameText() {
var sel = document.getElementById("selName")
var nameText = sel.options[sel.selectedIndex].text;
return nameText;
}
Dummy object I send:
function getNamesForDropdown() {
var namesObj = {
one: "blah",
two: "blahblah"
}
return namesObj;
}
Here's the result what I get (on the screen you there's only hardcoded option):
I handled it. I added a class "browser-default" to the select and the options got updated. This class comes from MaterializeCss Framework.

fill a <select> with a function Javascript

I created a function which contains a string that I want to add to a in HTML. But when I test it, it won't show me the options declared in my table.
function test(){
// table already defined
var choices = "<option selected>Select...</option>";
for (var i=0; i<tableOptions.length; i++) {
choices += "<option>" + tableOptions[i][0] +"</option>";
}
document.getElementById("theOptions").innerHTML = choices;
}
and in my HTML I have
<select id="theOptions"></select>
What am I doing wrong?
By the way, my test() is automatically loaded after my page is displayed.
<body onload="test()">
See How to populate the options of a select element in javascript for detail on creating and appending options to an existing <select> element.
Using that method, this seems closest to what you're getting at:
var select = document.getElementById("theOptions");
opt = document.createElement("option");
opt.innerHTML = "Select...";
select.appendChild(opt);
for(var i = 0; i < tableOptions.length; i++)
{
var opt = document.createElement("option");
opt.innerHTML = tableOptions[i][0];
select.appendChild(opt);
}

Populating a <select> with data from ajax via javascript

although I found similar questions the solutions mentioned there wont seem to work for me.
What I'm trying to do:
Fetch all the table names of my database with Ajax
Fill the Table Names as options with respective values into a select field
How far I've come:
My fetch_devices php script echoes:
["test1","test2","test3"]
function FetchDevices(){
alert("Fetching");
$.ajax({
url: 'php/sql/fetch_devices.php',
success: function(devices) {
var elements = Object.keys(devices).length;
var select = document.getElementById("devices");
var option = document.createElement("option");
var i = 0;
while(i < elements)
{
option.text= devices[i];
option.value= devices[i];
select.appendChild(option);
i++;
}
},
cache: false
});
}
But in the end I only see the last option "test3".....
Why is that happening?
Thanks in advance!
Best Regards,
You are overriding the same option. Aslo make use of add(). Change it to
while(i < elements)
{
var option = document.createElement("option");
option.text= devices[i];
option.value= devices[i];
select.add(option);
i++;
}

Populate multiple fields with javascript

I am new to javascript and I can't populate many fields with one click.
<script>
function addTxt(txt, field)
{
var myTxt = txt;
var id = field;
document.getElementById(id).value = myTxt;
}
</script>
<input type="text" name="xx" id="info" autofocus="required">
<p>x</p>
I've got 3 more fields.
Thanks.
You can use
function addTxt(txt, ids)
{
for (var i=0, l=ids.length; i<l; ++i) {
document.getElementById(ids[i]).value = txt;
}
}
And call it like
addTxt('Some text', ['id1', 'id2', 'id3']);
You can populate multiple fields. I have shared a jsfiddle link. You can populate multiple fields using this code.
function addTxt(_val, _id,_no)
{
var _myTxt = _val;
var _id = _id;
for(var i=1;i<=_no;i++){
document.getElementById(_id+i).value = _myTxt;
}
}
Click here to see DEMO
I think you don't need a function to do this.
Just use
document.getElementById('id1').value
= document.getElementById('id2').value
= document.getElementById('id3').value
= 'Some text';
Or, if you think document.getElementById is too long, use a shortcut:
var get = document.getElementById;
/* ... */
get('id1').value = get('id2').value = get('id3').value = 'Some text';
Try getting the elements by tagName or by className instead of by id, then using a for loop to iterate through each one.

can't get the dynamic textfield value using Jquery

I can't get the dynamic textfield value. Please see the below my jquery code.
I added onclick event while creating the textfield for LandMark. Please see the below code.
I am always getting undefined. Please help me.
function dynamicEvent() {
alert("dynamic event");
$(document).ready(function(){
alert("inside ajax --> dynamic");
var table = document.getElementById("dataTable");
alert("table-->"+table);
var rowCount = table.rows.length;
alert("rowCount-->"+rowCount);
alert("value of rowCount"+rowCount);
var uniqueId;
for (var i=rowCount;rowCount>7;i++){
uniqueId = i;
alert("inside for loop");
alert("uniqueId-->"+uniqueId);
var element = document.createElement("input");
uniqueId=uniqueId-1;
element.id = "t02Travelfrom" +uniqueId;
var tfrom=element.id;
alert("tfrom id-->"+tfrom);
var t02Travelfrom=$("tfrom").val();
alert(tfrom+"--value-->" +t02Travelfrom);
}
});
}
You have incorrect selector:
var t02Travelfrom=$("tfrom").val();
change to:
var t02Travelfrom=$("#" + tfrom).val();
$("tfrom") returning elements with tag tfrom
You need $(tfrom). You don't need double quotas.

Categories

Resources