We Keep Coding

Why can't I use a script function to affect variables in html written out by a JSON file?

Hopefully a quick question.
I'm using a JSON file to write out some html and populate with variables from the JSON and append it to part of my html file. This works and is fine. However, I now want to use a different script to apply show and hide filters based on class attributes to the html that has been printed. For some reason, this isn't working. If I just copy and paste the html with variables back into the original document after its been printed out, then the script works though. Is this an issues of synchronicity?
Here's the second script I'm looking to execute if it helps:
$(document).ready(function(){
var targets = $('.filter'),
buttons = $('.filter-button');
buttons.click(function(){
var value = $(this).data('filter');
if(value == "all")
{
buttons.removeClass('checked');
targets.show();
}
else
{
if($(this).hasClass('checked'))
{
$(this).removeClass('checked');
var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');});
if(checkedClasses.length == 0)
{
buttons.removeClass('checked');
targets.show();
}
else
{
checkedClasses = $.grep(checkedClasses, function(n, i){ return n != value }),
selector = '.' + checkedClasses.join('.'),
show = targets.filter(selector);
targets.not(show).hide();
show.show();
}
}
else
{
$(this).addClass('checked');
var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');}),
selector = '.' + checkedClasses.join('.'),
show = targets.filter(selector);
targets.not(show).hide();
show.show();
}
}
});
});

Using a variable inside a input check in JS

The input named alternativa-*** will have the *** changed in the PHP that comes before. I'm not using a form on PHP only a onClick statement calling the respondeQuestao function. But this code seems to not work. Someone have any suggestion.
$(document).ready(function() {
function respondeQuestao(qid,resposta) {
var alternativa = document.getElementsByName('input[name = "aternativa-"' + qid ']:checked').value;
document.getElementById("demo").innerHTML = 5 + 6;
if(alternativa==resposta) {
$("#botao-questao"+qid).hide();
};
if(alternativa!=resposta) {
};
};
})

Defining a function within the jQuery Ready statement limits the accessibility - define it outside of the jQuery Ready statement but call it when you need it.
function respondeQuestao(qid, resposta) {
var alternativa = $("INPUT[name^='alternativa-']:checked").val();
$("#demo").html(5+6);
if (alternativa == resposta) {
$("#botao-questro" + qid).hide()
} else {
//
}
}
Call the function inside jQuery:
$(function() {
respondeQuestao("id", 11);
});
I hope this helps.

jQuery plugin method to get object properties

I´m building a jQuery extension plugin with the following standard:
(function ($) {
var version = "1.1.0";
var active = false;
$.fn.inputPicker = function (options) {
return this.each(function () {
if ($(this)[0].tagName !== 'DIV')
throw new ReferenceError('mz.ui.dialog.dateTimePicker: Method works only on DIV types.');
/// Label
var labelObj = $("<label class='small'>Data Hora Inicial</label>");
$(this).append(labelObj);
/// Input
var inputObj = $("<input type='datetime-local' class='form-control input-sm'></input>");
$(this).append(inputObj);
})
});
};
}(jQuery));
And here is how I call it:
<div id='test'></div>
$('#test').inputPicker();
Later in code I wanna get the data that was entered in the input field, something like:
$('test').inputPicker().getInputData();
What´s the best way to accomplish that ? I´ve tried something like:
this.getInputData = function () {
return $(inputObj).val();
}
But got errors when calling the function.
Can someone help me with this ? Thanks in advance...

You could just make another method to get the input data like this using the DOM structure and class names that you added:
$.fn.getInputData = function() {
return this.eq(0).find("input.input-sm").val();
}
This would operate only on the first DOM element in the jQuery object (since it's returning only a single value).
So, after setting it up like you did:
$("#test").inputPicker();
You'd then retrieve the data like this:
var data = $("#test").getInputData();

Get value of asp.net CheckBox via jquery

I'm trying to load up a hidden field with a list of values from all checkboxes that are checked. Everything works fine except that the is(':checked') always returns false. Any ideas?
$('.invCheckBox').click(function () {
var cb = '';
var i = 0;
debugger;
$(".invCheckBox").each(function (index, element) {
debugger;
if ($(element).is(':checked')) {
alert($(element).attr('invNbr'));
if (i == 0) {
cb = $(element).attr('invNbr')
}
else {
cb = cb + ',' + $(element).attr('invNbr');
};
i = i + 1;
};
});
$('MainContent_txtHiddenField').text(cb);
});

Here is a fiddle for you might help :) http://jsfiddle.net/sAyfw/
$('.invCheckBox').change(function () {
$('.invCheckBox').each(function()
{
alert($(this).is(':checked'));
});
});

For whatever reason creating a CheckBox control server-side wraps the input tag in a span tag. Weird. So, I changed the code to create an HtmlInputCheckBox instead and now the jQuery works beautifully.
Dim divCheckBox As New HtmlGenericControl("div")
divCheckBox.Attributes.Add("style", "width: 95px; float: left;")
Dim chkCheckBox As New HtmlInputCheckBox
chkCheckBox.Attributes.Add("class", "invCheckBox")
chkCheckBox.Attributes.Add("invNbr", invoice.InvoiceNbr)
divCheckBox.Controls.Add(chkCheckBox)
divInvRow.Controls.Add(divCheckBox)

Thanks for the info about asp:CheckBox being wrapped in a span. My jQuery was always returning false, and I couldn't figure out why it was not working.
I used this:
console.log($(this).children(1).is(':checked'));
and that works perfectly with an asp:CheckBox.

Javascript get the dom element a function was called from

HTML part:
foo
JS part:
function callme() {
var me = ?; //someway to get the dom element of the a-tag
$(me).toggle();
}
in the JS part can i somehow get the a-tag that this function was called from?
i know i could just pass it as a parameter, but this function is used many many times on a page and i want to avoid putting the parameter everywhere.
thanks!

Since you are using an onclick attribute (BAD!) you have to pass that into the function.
onclick="callme(this); return false;"
and the js:
function callme(el) {
var $me = $(el);
$me.doSomething();
}
Another option is to set the context of the function using .call().
onclick="callme.call(this,event)"
and the js
function callme(event) {
event.preventDefault();
$(this).doSomething();
}

I have a simple JS function for that
function getEventTarget(event) {
var targetElement = null;
try {
if (typeof event.target != "undefined") {
targetElement = event.target;
}
else {
targetElement = event.srcElement;
}
// just make sure this works as inteneded
if (targetElement != null && targetElement.nodeType && targetElement.parentNode) {
while (targetElement.nodeType == 3 && targetElement.parentNode != null) {
targetElement = targetElement.parentNode;
}
}
} catch (ex) { alert("getEventTarget failed: " + ex); }
return targetElement;
};
in your html
foo
in your function
function callme(event) {
var me = getEventTarget(event); //someway to get the dom element of the a-tag
$('#'+ me.id).toggle();
}
getEventTarget() will bring back the whole dom object which you can manipulate as you please, or has been said already by other users you can just use
function callme(event) {
$(this).toggle();
}

send this parameter to your function.
foo
function callme(me) {
$(me).toggle();
}

better dont use onlcick in html markup
$(document).ready(function() {
$("a").click(callme);
})
function callme() {
var me = this;
$(me).toggle();
}