We Keep Coding

Accessing React Function in Meteor

I have :
addW () {
code
code
}
render () {
return (
html code
html code
<button onClick={this.addW}>Add</button>
)
}
For some reason, I get an error :
this.addW is not a function. Why is it not finding the function above?
TY!

Maybe you are missing a ""
return "<button onClick={this.addW}>Add</button>"

I've determined that I need to '.bind(this)'
<button onClick={this.addW.bind(this)}>Add</button>
It would help for someone to help explain this.

Can this javascript code be cleaned up?

The code is working just fine now, but is a bit sloppy and long. I'm not as proficient in js as I would like to be.
Javascript
$("#IDArea1").click(function () {
$('#indicator1').toggleClass("icon-caret-up icon-caret-down");
$('#indicator2').removeClass("icon-caret-up");
$('#indicator2').addClass("icon-caret-down");
$('#indicator3').removeClass("icon-caret-up");
$('#indicator3').addClass("icon-caret-down");
});
$("#IDArea2").click(function () {
$('#indicator2').toggleClass("icon-caret-up icon-caret-down");
$('#indicator1').removeClass("icon-caret-up");
$('#indicator1').addClass("icon-caret-down");
$('#indicator3').removeClass("icon-caret-up");
$('#indicator3').addClass("icon-caret-down");
});
$("#IDArea3").click(function () {
$('#indicator3').toggleClass("icon-caret-up icon-caret-down");
$('#indicator2').removeClass("icon-caret-up");
$('#indicator2').addClass("icon-caret-down");
$('#indicator1').removeClass("icon-caret-up");
$('#indicator1').addClass("icon-caret-down");
});
DOM Structure
<div id="IDArea1">
<i class="icon-caret-up"></i>
</div>
...
<div id="IDArea2">
<i class="icon-caret-down"></i>
</div>
...
<div id="IDArea3">
<i class="icon-caret-down"></i>
</div>
Basically, the first area (IDArea1) is open by default. Then, depending on which heading you click, will toggle the clicked heading to the opposite icon and force the others to be "icon-caret-down". So the structure of each function is the same and I have a feeling there is a cleaner way to execute this code, I just can't find a solution.
Thank you for your help.

Rename f() to something else that makes more sense to your domain:
var f = function(indicatorClicked, remainingIndicators) {
$(indicatorClicked).toggleClass("icon-caret-up icon-caret-down");
$.each(remainingIndicators, function(index, indicator) {
$(indicator).removeClass("icon-caret-up").addClass("icon-caret-down");
});
}
$("#IDArea1").click(function () { f('#indicator1', ['#indicator2', '#indicator3']) });
$("#IDArea2").click(function () { f('#indicator2', ['#indicator1', '#indicator3']) });
$("#IDArea3").click(function () { f('#indicator3', ['#indicator1', '#indicator2']) });

Yes, you can clean up your code.
You can create a function like this:
function iconCaret(el1, el2, el3, el4, el5) {
$(el1).toggleClass("icon-caret-up icon-caret-down");
$(el2).removeClass("icon-caret-up");
$(el3).addClass("icon-caret-down");
$(el4).removeClass("icon-caret-up");
$(el4).addClass("icon-caret-down");
}

Here's something you could try. Haven't tested it so it may contain typos. [id=^'IDArea'] selects elements with id starting with "IDArea".
$("[id=^'IDArea']").click(doStuff);
function doStuff(){
var num=$("[id=^'IDArea']").eq(this);
$('#indicator'+num).toggleClass("icon-caret-up icon-caret-down");
$("[id=^'indicator']").not('#indicator'+num).removeClass("icon-caret-up").addClass("icon-caret-down");
}

How do I turn this JavaScript into a plugin?

I have looked through the old answers, and found one that seems to be what I want to do HERE. Although I don't fully understand and not sure what is wrong and what I should be doing in the next step. FIDDLE
Thanks in advance
//Put inside HTML
$(function () {
$('#s_table').setups({
//please name table ID as "s_table"
"scrollY_h":"200px",
"s_empty":"search not found",
});
});
//xxx.js
(function (a) {
a.fn.s_table= function (setups) {
var scrollY = "",
s_empty = "";}
{
my function here?
}
})(JQuery);

Here is a good tutorial on how to create a JQuery plugin:
http://learn.jquery.com/plugins/basic-plugin-creation/

Linking button to jQuery through service

I have a small problem that should be very easy to overcome. For some reason I cant work this out. So the problem is I cannot get a button to link to some jquery. My set-up is as follows (showing the relevant code):
Default.aspx
jQuery:
function getContent() {
var data = {
numberID: 1
};
$.jsonAspNet("ContentService.asmx", "GetContent", data,
function (result) {
$('#content').html(result);
});
}
jQuery(document).ready(function () {
getContent();
});
HTML:
<div id="content"></div>
ContentService.vb
<WebMethod()> _
Public Function GetContent(number As Integer) As String
Dim sb = New StringBuilder
sb.AppendLine("<table>")
sb.AppendLine("<tr>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Number</td>")
sb.AppendLine("</tr>")
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & number & "</td>")
sb.AppendLine("<td><a href='#' id='test' class='fg-button ui-state-default ui-corner-all'><img src='" & Context.Request.ApplicationPath & "/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
sb.AppendLine("</table>")
Return sb.ToString
End Function
So that's the basics of what I have everything works but I'm not sure how to get the a button (id='test') to get linked to some jQuery. I want it to be pressed and bring up a popup.
I have tried to put the jQuery on default.aspx but this doesn't seem to work unless the button is place in the HTML on that page.
$('#test').unbind('click').click(function () {
alert('Working');
});
I'm sure this is easy to do, but I have been trying for a while and cannot seem to get it to work.

Is the problem that you're trying to bind to the element that ISN'T in existance yet?
are you calling the $('#test').unbind('click').click(function () {
alert('Working');
}); BEFORE the service has returned?
$('#test').on('click', function () {
alert('Working');
});
This will bind the event to the '#test' element once it has been inserted in to the DOM.

As you load the content via ajax, you have to bind to $('#content'). Like this:
$(function () {
$('#content').on('click', '#test', function () {
e.preventDefault(); // if a default action is not needed needed
alert('Working');
});
});

I guess this is about not preventing the default behaviour of the A href tag. Now it will probably link to '#' instead of firing the onclick event.
$('#test').on('click', function (e) {
alert('Working');
e.preventDefault();
});
You could try to wrap this in a document ready, or eventually use the .on binder from jQuery, since it's dynamic content.

Solved
It was a very small thing that caused this. The code to fix this problem is as follows:
$('#test').unbind('click').click(test);
This needed to go inside the function with the json so:
function getContent() {
var data = {
numberID: 1
};
$.jsonAspNet("ContentService.asmx", "GetContent", data,
function (result) {
$('#content').html(result);
$('#test').unbind('click').click(test);
});
}
Thank you to everyone that has tried to help me.

Binding multiple handlers to elements

Hey, I'm new to JavaScript so this is most probably going to sound really basic but here goes.
My web page is made up of "modules" which I load into the page with jQuery, so that my JavaScript works with the new content that has been loaded into the page, I have been told to use callback functions.
My problem is though, how do I activate multiple callback functions?
here is some of my code:
function loadLoginForm() {
$('[name=loadLoginForm]').click(function() {
$("#mainWrap").css({ width:"300px", height:"200px" });
$("#mainWrap").load("modules/web/loginForm.php", null, loadRegisterForm);
});
}
This bit of code activates the function named "loadRegisterForm" but what do i do if I want to activate more than one?
I've tried a few ways of how I think it would be done but to no avail, also I tried Google but I believe I'm using the wrong terminology.

It may be something like what you need?:
function loadLoginForm() {
$('[name=loadLoginForm]').click(function() {
$("#mainWrap").css({ width:"300px", height:"200px" });
$("#mainWrap").load("modules/web/loginForm.php", null, function(data) {
loadRegisterForm_1(data);
loadRegisterForm_2(data);
loadRegisterForm_3(data);
});
});
}
EDIT II:
function loadLoginForm() {
$('[name=loadLoginForm]').click(function() {
$("#mainWrap").css({ width:"300px", height:"200px" });
$("#mainWrap").load("modules/web/loginForm.php", null, function(data) {
loadRegisterForm_1.call(this, data);
loadRegisterForm_2.call(this, data);
loadRegisterForm_3.call(this, data);
});
});
}