Accessing React Function in Meteor - javascript

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.

Related

MVC function is not defined at onclick?

i got this error
Uncaught ReferenceError: updateShift is not defined
at HTMLAnchorElement.onclick`
i already looking for this problem and not fixing mine.
so here is my view
<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor" id="data1">
<ul>
#foreach(var shift in Model.ShiftModelList)
{
<li><a onclick="updateShift('#item.EmployeeId')">#shift.ShiftId</a></li>
}
</div>
javascript in the _layout.cshtml
function updateShift(empId)
{
$.post('#Url.Action("updateShift","jadwal")',{empId:empId } function(data) {
alert("suksess");
})
}
Thanks for helping
You can try this,
$(document).ready(function() {
function updateShift(empId) {
$.post('#Url.Action("updateShift","jadwal")',{empId:empId } ,function(data) {
alert("success");
});
}
});
Your view is being rendered before your layout, so you need to wrap your JavaScript in a document ready function:
$(document).ready(function() {
function updateShift(empId) {
$.post('#Url.Action("updateShift","jadwal")',{empId:empId } function(data) {
alert("suksess");
})
}
});
Hope this helps! :)
I hope the below link provides reason for the error and also the solution.
https://stackoverflow.com/a/38372808/3397630
As per my understanding For this type of error, Its seems that we need to cross check the two things.
Scope of the javascript function is bounded
proper reference of the script files.
Additional info/same error:https://forums.asp.net/t/2116708.aspx?Uncaught+ReferenceError+AddRecord+is+not+defined+at+HTMLButtonElement+onclick+
Hope it will be helpful, kindly let me know your thoughts or feedbacks
Thanks
karthik

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/

getJSON with return value, Can someone take a look what is wrong here?

Im Trying to return a value from callback function with no success.
Can you see what is wrong here??:
function getval( callback ){
jQuery.getJSON('http://data.mtgox.com/api/1/BTCUSD/ticker?callback=?', function(data) {
// We can't use .return because return is a JavaScript keyword.
callback(data['return'].avg.value);
});
}
$(function () {
$(document).ready(function() {
getval( function ( value ) {
alert( 'Do something with ' + value + ' here!' );
} );
});
});
Here is JSFIddle link: http://jsfiddle.net/kf6qb/1/
Thank you very much!
Remove ?callback=? from the URL. That API doesn't support JSONP, and allows cross-domain calls.
See my FIDDLE
check this code its working FIDDLE
$(function () {
jQuery.getJSON('http://data.mtgox.com/api/1/BTCUSD/ticker?', function(data) {
// We can't use .return because return is a JavaScript keyword.
alert(data.return.avg.value);
});
});
Your data does not have a field called return. data['return'] is undefined.

Using jquery with casperJs test

I have a web application which is not relying on jquery.
I am doing functional tests thanks to (the great :) ) casperjs.
Now I would like to use jquery in my tests. So I tried to inject it as indicated here http://casperjs.org/faq.html#faq-jquery. Well, it's not working.
Here is my code if you can help me - is there something wrong? :
casper.start('http://localhost:8080/xxxxxx/xxxxxDialogTests.html');
casper.echo("page = " + casper.page); // -> it works, the page is there
casper.page.injectJs("../tools/jquery-1.7.2.js");
casper.waitFor(function check()
{
return this.visible('#button_create');
},
function then()
{
this.click('#button_create');
casper.waitFor(function check()
{
return this.visible('#dialog_document_name');
},
function then()
{
console.log("element : ", this.evaluate(function ()
{
var el = $("input#dialog_document_name");
return el;
}));
});
});
I removed the test as it is not the point...
thanks!
Try to add casper.options.clientScripts = ["../tools/jquery-1.7.2.js"] at the top of your test script.
Also try to set the absolute pass to the jQuery script, eg. /Users/foo/Work/project/tools/jquery-1.7.2.js.

Categories