Develop Reference

Passing parameter to javascript onclick without using HTML

I can't figure this out. I'm trying to create an onclick handler purely in Javascript.
What I plan to do here is inside this DIV, have a collection of items that I can click on. For now, these items will be numbers from 0 to 9 inclusive. When a number is clicked on, a system message consisting solely of that number should pop-up on the screen. I narrowed my problem down to just the onclick handler definition.
If I use this format:
item[n].onclick=function(n){
handler(n);
}
The handler will fire only when click a number which is correct, but the message that appears is something about mouse event.
If I use this format:
item[n].onclick=function(){
handler(n);
}
The handler will pass a value of -1 which in turn is printed as a message. I think it means "false".
How do I modify this:
item[n].onclick=function(){
handler(n);
}
so that 'n' being used as the handler parameter is the same as the number I click on the screen?
My code is the following:
<div ID="Itemset"></div>
function handler(n){
alert(n);
}
collections=document.getElementById('Itemset');
for(n=0;n<10;n++){
item[n]=document.createElement('DIV');
item[n].innerHTML=n;
collections.appendChild(item[n]);
item[n].onclick=function(n){
handler(n);
}
}
What I'm effectively trying to do if you want to understand it HTML wise is this:
<div ID="Itemset">
<div onclick="handler(0);">0</div>
<div onclick="handler(1);">1</div>
<div onclick="handler(2);">2</div>
<div onclick="handler(3);">3</div>
<div onclick="handler(4);">4</div>
<div onclick="handler(5);">5</div>
<div onclick="handler(6);">6</div>
<div onclick="handler(7);">7</div>
<div onclick="handler(8);">8</div>
<div onclick="handler(9);">9</div>
</div>
Except that I don't want to write out onclick="handler(n);" a million times.
Any advice? and feel free to point to another resource that has the answer I need if there is one.
UPDATE
I'm looking for something compatible with older browsers as well. I'm going to have to not go for the bind function because according to mozilla docs, it works for IE 9+. I'm looking for something that works for IE 7+ as well as other browsers. I might have to go for event listeners if there is no other alternative.

You have a closure issue here (see JavaScript closure inside loops – simple practical example), a simple solution is to use bind to use the current value of n to be a parameter of the handler function
item[n].onclick=handler.bind(item[n],n);

U can use addEventListener and ID for find clicked element...
document.getElementById("Itemset").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
var value_data = parseInt(e.target.textContent);
if(e.target && value_data > -1) {
alert("Malai test:: "+value_data);
//handler(value_data);
}
});
https://jsfiddle.net/malai/tydfx0az/

I found my answer here: https://bytes.com/topic/javascript/answers/652914-how-pass-parameter-using-dom-onclick-function-event
Instead of:
item[n].onclick=function(n){
handler(n);
}
I have to do:
item[n].onclick=new Function('handler('+n+')');
Funny thing is, the word function needs to be capitalized when making a new instance. It's awkward I have to go this route but it works in IE 7+

One alternative is :
function handler(){
alert(this.id);
}
function myFunction() {
var item=[];
collections=document.getElementById('Itemset');
for(n=0;n<10;n++){
item[n]=document.createElement('DIV');
item[n].innerHTML=n;
item[n].setAttribute("id","itemset"+n);
collections.appendChild(item[n]);
item[n].onclick=handler;
}
}
Insert dynamic ids to the elements and when you click on any element retrieve its id using this.id and do whatever you want to do with that value.
That's all.
Hope this helps.

having an issue to call Javascript function from jquery

I have a Datepicker for Bootstrap and I am having an issue to run a function called "listCampaignsFiltered(search, type, from, 'dataTable')" that filters the results once I click on any date from the calendar. Here is the code:
Html
<div id="showfrom">
<label for="from" class="filter">From:
<input type="text" class="filter" value="01/01/2014" id="from"/>
</label>
</div>
Js
$(document).ready(function(){
$('#showbrand input').val(01/01/2014).click(listCampaignsFiltered);
});

The proper form would be:
$('#showbrand input').val('01/01/2014').on('click', function() {
listCampaignsFiltered(...params....)
});

The call val(01/01/2014) would set the value to 1 divided by 1 divided by 2014. You are missing quotes.
Are you sure you always want to set the date back to 01/01/2014? If so use the commented out line instead of the line bellow it.
Next listCampaignsFiltered has be be defined and without error. I am assuming it works and you've tested it independently of the listner.
Next, to pass the values into it, you need wrap the function in an lambda/anonymous function.
I am also assuming that the values for function are all in inputs with the ids matching the parameters you gave in your post.
Here is what you end up with, with those changes:
$(document).ready(function()
{
/*$('#showbrand input').val('01/01/2014').click(function()*/
$('#showbrand input').click(function()
{
listCampaignsFiltered
(
$('#search').val(),
$('#type').val(),
$('#from').val(),
'dateTable'
);
});
});

may be this is what you intended
$(document).ready(function(){
$('#showbrand input').val('01/01/2014').on('click', function()
listCampaignsFiltered(param1,param2,param3,param4);
});
});

jsfiddle.net/JixunMoe/29wBy/
Not sure if that's what you want, but the callback works as expected (for me).

Inserting HTML character entities with JQuery

I'm trying to create a tool that allows me to insert different Spanish characters into a text box such as the inverted question mark. I've currently got the following, but this returns:
function (e){var n,r,i,o=this[0];{if(arguments.length)return i=x.isFunction(e),this.each(function(n){var o;1===this.nodeType&&(o=i?e.call(this,n,x(this).val()):e,null==o?o="":"number"==typeof o?o+="":x.isArray(o)&&(o=x.map(o,function(e){return null==e?"":e+""})),r=x.valHooks[this.type]||x.valHooks[this.nodeName.toLowerCase()],r&&"set"in r&&r.set(this,o,"value")!==t||(this.value=o))});if(o)return r=x.valHooks[o.type]||x.valHooks[o.nodeName.toLowerCase()],r&&"get"in r&&(n=r.get(o,"value"))!==t?n:(n=o.value,"string"==typeof n?n.replace(V,""):null==n?"":n)}}¿
HTML
<div class="container">
<textarea id="text"></textarea>
<div id="one">¿</div>
JS
$('document').ready(function() {
$('#one').click(function() {
$('#text').val($('#text').val + '¿');
});
});
Any ideas on why I'm receiving this output? Also do HTML entities work within textboxes, if not how would I do so? No errors appear in the console.
JSFiddle

$("#text").val is a function, which you are supposed to call.
That said, jQuery is massive overkill for such a trivial task:
document.getElementById('one').onclick = function() {
document.getElementById('text').value += "\u00bf";
}
Note that \u00bf is the appropriate JavaScript escape sequence for ¿ - bf being 191 in hexadecimal.
EDIT: Alternatively, just hold Alt and type 0191 on your keypad. This will produce ¿ directly where you are typing, instead of at the end of the input which is what your JS does.

Try this one. Worked in your fiddle.
$(function() {
$('#one').on('click', function() {
$('#text').val($('#text').val() + "¿");
});
});
Update: I posted spanish sign of question instead of its ASCII, changed $(document).ready to a shorter way $(function(), and added brackets after val().

String manipulation using jQuery

I am wondering how I would remove the vowels from a word on a button click?
Here is what I am trying to do - http://www.marcia.bnmla.com/~marcia/project0.html
I need to use jQuery to remove the vowels in the second box so it displays only consonants when you click the button. I have it where it displays "MRC" as text when the button is clicked and I need to redo it using string manipulation so I can change the word to anything in my code and it will remove the vowels in that word. I am obviously new at this. Please help me!
Here is my code:
<div id="marcia_box">
<p id="marciatext">marcia</p>
<div id="marcia_boxBtn"><button id="marciaBtn">Marcia</button></div>
</div>
$("#marciaBtn").click(function() {
$("#marcia_box").css("background-color","#999");
$("#marciatext").html('mrc');
});

Do you really need jQuery? What about plain old JavaScript?
"abcdef".replace(/[aeiou]/gi, "") // => "bcdf"
How's that?

jQuery allows you to pass a function to .html, which should return a new HTML string. jQuery will pass the old HTML, so you can do something like this:
$("#marciatext").html(function(i, current) {
return current.replace(/[aeiou]/g, "");
});

demo
This one will help you now and in the future for other transformations
specially for toggling between two array keys
var c=0, text=['marcia', 'mrc'];
$("#marciaBtn").click(function() {
$("#marciatext").html( text[ ++c%2 ] );
});

As shown by Jarrett Meyer, removing the vowels has nothing with the jQuery part. But just to show you how to put it together with jQuery (since you said you is really new in it), here is a sample:
$("#marciatext").text($("#marciatext").text().replace(/[aeiou]/gi, ""));

Cant get Bootstrap javascript to work?

I am new to rails.
I have this simple code:
<h1>Pages#home</h1>
<p>Find <a id="t" rel="tooltip" title="Click me!">me</a> in app/views/pages/home.html.erb</p>
And the pages.js.coffee file:
jQuery ->
$('a#t').tooltip(placement: 'bottom');
The tooltip still pops up at the top of the word.
What am I doing wrong?

Your HTML markup contains an error, look at your links title, it has '>' character which has to be escaped in HTML, use > instead.

The problem is with how you are using options.
Try this instead. Hope it works
$('a#t').tooltip('placement': 'bottom');

Two things:
That should be an object literal in the tooltip() method call.
If you've already activated the tooltip on the element, calling the tooltip() method again will fail to update the options.
Given that, try something like:
if ($('a#t').data('tooltip')) { // check for tooltip data first
$('a#t').data('tooltip').options.placement = 'bottom';
} else {
$('a#t').tooltip({placement: 'bottom'});
}
Disclaimer: I know neither Rails nor CoffeeScript, but I do know the above code works in JS.