I would like to populate a select box with data fetched by ajax.
The initial HTML code looks like:
<select id="myid" name="myname">
</select>
I need to avoid innerHTML and other such workarounds. I tried using appendChild but it did not seem to work.
I am really new to prototype, so I really dont know how to go about it.
Assuming you wanted to add all members of a self-created object as key-value pairs to a select element, you could do that this way:
var data = {
a: 'Peter',
b: 'Paul',
c: 'Mary'
};
$('mySelect').update($H(data).map(function(o) {
return '<option value="' + o.key + '">' + o.value + '</option>';
}).join(''));
You find a jsFiddle of it here.
The basic idea behind the code is, that you create your option elements from the given data object, by transforming every one of them into a string. That is done by the map method.
The $H will transform the data object into a Prototype Hash object, which comes in handy here, as it will pass a { key, value } object to the first parameter of it's map invocation.
After transforming all elements to Strings, you just have to join them by an empty String (or whatever non-HTML code you like, \n would do as well) to be able to use them for the update method.
To be honest, Element#update uses innerHTML so that is actually not a workaround. It's just one way to do it.
Related
I am a real newbie - I was given a leg up to create something and it is using socket.io. I'm trying to fiddle around the edges, learning odd things as I go now. But have hit a wall in a really early stage of my project. It May well be too deep ... but just in the case asking here gives me an answer I can make sense of - here goes:
I have essentially three files working together. server.js, client.js, and index.ejs (which is my html file). I have a series of stuff happening in a "room" and now I want to display the values (next I will want to do more with them, but for now display) of an object in a html table.
server.js
... it creates the information of interest (uses a database call that currently works) and then:
io.to(roomId).emit('room-location-update', result.rows);
client.js
... receives data. My console.log has it all there. Then I assign a variable to hold it for use in the html:
socket.on("room-location-update", (data_information) => {
console.log(data_information);
//I think I need code in here?
var wp = data_information;
}
index.ejs
... fails to show anything. I have a table constructed to use the variable from client.js in a series of table cells essentially all constructed as:
<td id=wp.name><td id=wp.radius>
but nothing is displayed. the .name and .radius attributes are valid in the database when data_information is first created.
why nothing displayed? Google searches imply (to me) that this is basic stuff and should work. So clearly I am missing something basic (?) Any ideas what?
sorry, I don't actually know what you are talking about with edits. Apologies if I have done something wrong - I am a genuine newbie.
In the end I gave up on doing it in the ejs file and created a big string containing the html table codes and substituting in values where I wanted them in the client.js. And just popped that into the ejs file. No idea if this is efficient or not but it works, so hooray.
truncated code snippet of what worked for me (in client.js):
var $table = "<table border='1'>"
$table += "<thead><tr><th>Player</th><th>Location</th></tr></thead><tbody>"
for (var i = 0; i < display_information.length; i++) {
$table += '<tr><td>' + display_information[i].id + '</td>'
$table += '<td>' + display_information[i].name + '</td>'
}
$table += "</tr></tbody></table>"
$('#displayinfo').empty().append($table);
and then in my index.ejs is: <pre><span id="displayinfo"></span></pre>
I've used "Google AJAX Transliteration API" and it's going well with me.
http://code.google.com/apis/ajaxlanguage/documentation/referenceTransliteration.html
Currently I've a project that I need all input fields in every page (input & textarea tags) to be transliteratable, while these input fields differs from page to page (dynamic).
As I know, I've to call makeTransliteratable(elementIds, opt_options) method in the API call to define which input fields to make transliteratable, and in my case here I can't predefine those fields manually. Is there a way to achieve this?
Thanks in advance
Rephrasing what you are asking for: you would like to collect together all the inputs on the page which match a certain criteria, and then pass them into an api.
A quick look at the API reference says that makeTransliteratable will accept an array of id strings or an array of elements. Since we don't know the ids of the elements before hand, we shall pass an array of elements.
So, how to get the array of elements?
I'll show you two ways: a hard way and an easy way.
First, to get all of the text areas, we can do that using the document.getElementsByTagName API:
var textareas = document.getElementsByTagName("textarea");
Getting the list of inputs is slightly harder, since we don't want to include checkboxes, radio buttons etc. We can distinguish them by their type attribute, so lets write a quick function to make that distinction:
function selectElementsWithTypeAttribute(elements, type)
{
var results = [];
for (var i = 0; i < elements.length; i++)
{
if (elements[i].getAttribute("type") == type)
{
results.push(elements[i]);
}
}
return results;
}
Now we can use this function to get the inputs, like this:
var inputs = document.getElementsByTagName("input")
var textInputs = selectElementsWithTypeAttribute(textInputs, "text");
Now that we have references to all of the text boxes, we can concatenate them into one array, and pass that to the api:
var allTextBoxes = [].concat(textareas).concat(textInputs);
makeTransliteratable(allTextBoxes, /* options here */);
So, this should all work, but we can make it easier with judicious use of library methods. If you were to download jQuery (google it), then you could write this more compact code instead:
var allTextBoxes = $("input[type='text'], textarea").toArray();
makeTransliteratable(allTextBoxes, /* options here */);
This uses a CSS selector to find all of the inputs with a type attribute of "text", and all textareas. There is a handy toArray method which puts all of the inputs into an array, ready to pass to makeTransliteratable.
I hope this helped,
Douglas
I want to make an AJAX call to an HTML-returning page, extract part of the HTML (using jQuery selectors), and then use that part in my jQuery-based JavaScript.
The AJAX retrieval is pretty simple. This gives me the entire HTML document in the "data" parameter of the callback function.
What I don't understand is how to handle that data in a useful way. I'd like to wrap it in a new jQuery object and then use a selector (via find() I believe) to get just the part I want. Once I have that I'll be passing it off to another JavaScript object for insertion into my document. (This delegation is why I'm not using jQuery.load() in the first place).
The get() examples I see all seem to be variations on this:
$('.result').html(data);
...which, if I understand it correctly, inserts the entire returned document into the selected element. Not only is that suspicious (doesn't this insert the <head> etc?) but it's too coarse for what I want.
Suggestions on alternate ways to do this are most welcome.
You can use your standard selector syntax, and pass in the data as the context for the selector. The second parameter, data in this case, is our context.
$.post("getstuff.php", function(data){
var mainDiv = $("#mainDiv", data); // finds <div id='mainDiv'>...</div>
}, "html");
This is equivalent to doing:
$(data).find("#mainDiv");
Depending on how you're planning on using this, $.load() may be a better route to take, as it allows both a URL and a selector to filter the resulting data, which is passed directly into the element the method was called on:
$("#mylocaldiv").load("getstuff.php #mainDiv");
This would load the contents of <div id='mainDiv'>...</div> in getstuff.php into our local page element <div id='mylocaldiv'>...</div>.
You could create a div and then put the HTML in that, like this…
var div = $("<div>").html(data);
...and then filter the data like this…
var content = $("#content", div.get(0));
…and then use that.
This may look dangerous as you're creating an element and putting arbitrary HTML into it, but it's not: anything dangerous (like a script tag) will only be executed when it's inserted into the document. Here, we insert the data into an element, but that element is never put into the document; only if we insert content into the document would anything be inserted, and even then, only anything in content would be inserted.
You can use load on a new element, and pass that to a function:
function handle(element){
$(element).appendTo('body');
}
$(function(){
var div = $('<div/>');
div.load('/help a', function(){handle(div);});
});
Example: http://jsbin.com/ubeyu/2
You may want to look at the dataFilter() parameter of the $.ajax method. It lets you do operations on the results before they are passed out.
jQuery.ajax
You can do the thing this way
$.get(
url,
{
data : data
},
function (response) {
var page_content = $('.page-content',response).get(0);
console.log(page_content);
}
)
Here in the console.log you will see the inner HTML of the expected/desired portion from the response. Then you can use it as your wish
I am having a little bit of difficulty passing a variable into a selector in prototype. I would like to be able to pass a variable into the select string, so that one function can work for many of the same kind.
At the moment, this is what I would basically like to do:
function myFunct(var)
{
$(var + 'add_form').hide() //so inde the brackets would be ('#product1 #add_form') for example.
}
Be able to pass 'var' into the function that would pass it to the selector, so that I can hide a pattern that is the same for many on the page.
Any ideas for a path to follow would be greatly appreciated.
You're on the right track! Couple things:
var is a JavaScript keyword (source), don't use it to name a variable
if you're querying an element by id (such as #add_form) you don't need to add any container element as you're doing
If you're querying an element by class, you need to use the $$ function, not the $ function
You need to iterate over the wrapped set to call your method
whitespace is significant in css selectors, so make sure to include those in your selector construction to tell Prototype to search within your parent container:
function myFunct(parent) {
$$(parent + ' .add_form').invoke('hide')
}
myFunct('#someparent'); // hides .add_form inside #someparent
That should work... just rename var to something else.
function myFunct(yourVar)
{
$$('#' + yourVar + ' .add_form').each(function(s){ s.hide(); }); // yourVar being the id of the container element
}
I've put a '.' in front of add_form because you can't use multiple elements with same ID, make it a class.
I'm really new to using JSON to handle my Ajax Request and Response cycle. I've previously used just plain old parameters passed as POST data and I've rendered straight HTML in the response which was then placed into the DOM. As I've looked at various examples and read through various tutorials, it seems like a fairly common practice to simply build a string from the JSON object mixed with HTML that's been hard coded into the string and then assign the string as innerHTML to some element.
A common example looks something like this:
var jo = eval(req.responseText);
var strTxt = '<span>' + jo.f_name + ' ' + jo.l_name + '</span><br/>' + 'Your Age Is: ' + jo.age + '<br/>';
$('myDiv').innerHTML = strTxt;
Is there a more elegant (or correct) way of handling the JSON response so that I'm not hard coding HTML in the javascript? Or is this pretty much how people do it?
P.S. Links to tutorials or other sources are appreciated.
I steer away from writing a lot of HTML within JavaScript strings. I prefer separation of structure from data manipulation. The better alternative is to place that code in the page, load the values based off the ID's, and show/hide it if necessary:
<div id="codeBlock" style="visible=false;">
<span id="val1"></span>
<br/>
<span id="val2"></span>
<br/>
</div>
............
<script>
var jo = eval(req.responseText);
$('val1').innerHTML = jo.f_name + ' ' + jo.l_name;
$('val2').innerHTML = 'Your Age Is: ' + jo.age;
$('codeBlock').show();
</script>
That might not be exactly what you want to do but you get the idea.
You could create the elements in the DOM using javascript instead of just dropping them into the innerHtml of the DIV, something like the following (untested):
var mySpan = document.createElement("span");
var spanContent = document.createTextNode(jo.f_name + ' ' + jo.l_name);
mySpan.appendChild(spanContent);
var myBr = document.createElement("br");
mySpan.appendChild(myBr);
var otherSpanContent = document.createTextNode('Your Age Is: ' + jo.age);
mySpan.appendChild(otherSpanContent);
mySpan.appendChild(myBr);
$('myDiv').appendChild(mySpan);
You could check out a templating engine such as PURE - may be a bit hard to get into at first but it supports many major javascript frameworks (and DOMAssistant which is nice) and separates html from the data.
The objects created from JSON are standard Javascript objects, therefore you can easily use jQuery selectors to create or access DOM elements and insert content from your JSON objects.
eg.
// Create a new span element and set its text
var personSpan=$("<span>").text(jo.f_name + ' ' + jo.l_name);
// Append the span to the existing myDiv element
$("myDiv").append(personSpan);
// Create a new div element (better then br) and set its text
var personDiv=$("<div>").text("Your Age Is: " + jo.age);
// Append the new div to the existing myDiv element
$("myDiv").append(personDiv);