Meteor helper has run - javascript

How can I check all Meteor helpers have run?
When I use this code, I get a new, empty div. When I remove the code from the rendered function and run it from my console, everything works fine.
Template.CasesShow.helpers({
value: function (n) {
if (this.data) {
var result = this.data.filter(function (obj) {
return obj.name == n;
});
if (result && result[0])
return result[0].value;
}
}
});
Template.CasesShow.rendered = function () {
$(document).ready(function () {
$textarea = $('[name=1]');
var content = $textarea.val().replace(/\n/g, '<br />');
$textarea.replaceWith($('<div class="box">' + content + '</div>'));
});
};
<template name="CasesShow">
<textarea class="w-input box" placeholder="{{_ 'laborauftrag.praxis'}}" name="1" data-name="1">{{value 1}}</textarea>
</template>
So I think, Meteor hasn't inserted the value yet, which is strange because it shouldn't run the rendered function then, right?
How can I make sure Meteor has run the helpers?

Template.rendered = func will run once before your template's helper (and long before your route provides you data). Your template isn't working when you have Template.rendered function because in your rendered function, you replace your textarea with div, and in helper you're returning value which is being set on the textarea which no longer exist (because Template.CaseShow.rendered has replaced it with <div>.
If you can provide more details about what you're actually trying to achieve here, we can solve that. What you have right now is intended behaviour of meteor.
If what you want to achieve is show your content in a div but after replacing /n with <br>, I believe you can do that by performing that regexp on your data in the template helper.

Put a console.log("FIRED VALUE HELPER"); and do the same for your .rendered console.log("TEMPLATE RENDERED"); The code will log in your client browser console. For chrome I right click on the browser and choose inspect element. Then choose console from the array of logs. Your client js code would look like this:
Template.CasesShow.helpers({
value: function (n) {
console.log("FIRED VALUE HELPER");
Template.CaseShow.rendered = function () {
console.log("FIRED RENDERED");
If you don't see the log in the client browser console, the helper/rendered function did not get called.

Related

Inject/execute JS code to IPython notebook and forbid its further execution on page reload

I'm writing the library which has to embed javascript code to IPython notebook and execute it. The HTML/JS code looks like:
<div id="unique_id"></div>
<script>
var div = document.getElementById("unique_id");
// Do the job and get "output"
div.textContent = output; // display output after the cell
</script>
And the python code:
from IPython import display
display.display(display.HTML(code))
The side-effect is that the javascript code is stored in the output of the cell in notebook, and every time when the page is reloaded or the notebook is opened it will run again.
Are there any way of forbidding the code to be executed on reload? Or is it possible to run the javascript code without saving it within the output?
I've figured out the hack.
The trick is to use update=True argument of the IPython.display.display() which will replace the output with a new one (see here for an example).
So what is needed to be done: first output javascript that does the job, and then waits until the div with a certain ID is created, to fill it with the output. Once this display() is called, we could call display a second time updating the first one with the actual HTML with the div. So the javascript code once finished will fill it with the results, but the code itself will not be saved.
Here's the test code:
First, define the callback function (it looks like, it is important here to display it as HTML("<script> ... </script>") rather than Javascript(...)):
from IPython.display import display, HTML, Javascript
js_getResults = """<script>
function getResults(data, div_id) {
var checkExist = setInterval(function() {
if ($('#' + div_id).length) {
document.getElementById(div_id).textContent = data;
clearInterval(checkExist);
}
}, 100);
};
</script>"""
display(HTML(js_getResults))
And then execute the update trick in one cell:
js_request = '$.get("http://slow.server/", function(data){getResults(data, "unique_id");});'
html_div = '<div id="unique_id">Waiting for response...</div>'
display(Javascript(js_request), display_id='unique_disp_id')
display(HTML(html_div), display_id='unique_disp_id', update=True)
After the callback of get() is executed, the content Waiting for response... will be replaced with the output from the server.
After running into the same issue of Javascript executing on every notebook open, I adapted #Vladimir's solution to a more general form:
Use fresh unique IDs on every render (since old ID is saved with the HTML output of the notebook).
No polling to determine when HTML element is rendered.
Of course, when the notebook is closed, no HTML modifications done by JS are saved.
Key Insight: Replace Cell Output
from IPython.display import clear_output, display, HTML, Javascript
# JavaScript code here will execute once and will not be saved into the notebook.
display(Javascript('...'))
# `clear_output` replaces the need for `display_id` + `update`
clear_output()
# JavaScript code here *will* be saved into the notebook and executed on every open.
display(HTML('...'))
Making it Work
The challenge here is that the HTML and Javascript blocks can be rendered out of order, and the code which manipulates the HTML element needs to only execute once.
import random
from IPython.display import display, Javascript, HTML, clear_output
unique_id = str(random.randint(100000, 999999))
display(Javascript(
'''
var id = '%(unique_id)s';
// Make a new global function with a unique name, to prevent collisions with past
// executions of this cell (since JS state is reused).
window['render_' + id] = function() {
// Put data fetching function here.
$('#' + id).text('Hello at ' + new Date());
}
// See if the `HTML` block executed first, and if so trigger the render.
if ($('#' + id).length) {
window['render_' + id]();
}
''' % dict(unique_id=unique_id)
# Use % instead of .format since the latter requires {{ and }} escaping.
))
clear_output()
display(HTML(
'''
<div id="%(unique_id)s"></div>
<!-- When this script block executes, the <div> is ready for data. -->
<script type="text/javascript">
var id = '%(unique_id)s';
// See if the `Javascript` block executed first, and if so trigger the render.
if (window['render_' + id]) {
window['render_' + id]();
}
</script>
''' % {'unique_id': unique_id}
))
To keep the notebook clean, I would put this plumbing code into a separate .py file and import it from Jupyter.

Javascript alter key in object before console.log

something inexplicable to me appears in the result of this code
var ctrl1 = {
func1: function(objct){
objct.options.b = "b";
}
}
var ctrl2 = {
myvar : {options:{a:"a"}},
func2: function(){
console.log(ctrl2.myvar);
ctrl1.func1(ctrl2.myvar);
},
}
ctrl2.func2();
I had as results
Object {a:"a", b:"b"}
while normally it should display
Object {a:"a"}
test in http://jsfiddle.net/akbach/6u0qnrc6/4/
Your coding is working fine. It's the options which gets updated before printing in console.
Try following steps open you console paste following code.
var ctrl1 = {
func1: function(objct){
objct.options.b = "b";
}
}
var ctrl2 = {
myvar : {options:{a:"a"}},
func2: function(){
console.log(ctrl2.myvar);
debugger;
ctrl1.func1(ctrl2.myvar);
},
}
ctrl2.func2();
Once the code stops at debugger you will see the required result in you console i.e a:"a"
Now resume script execution. After that write ctrl2.myvar on you console and then you will see the updated options with both a and b.
console.log may display a live reference (in chrome anyway), and not a snapshot. If it is "folded" (have to click on it to expand the details), it will continue to update.
You can see this by running your code, then modifying it again in the console and watching the previous output.
console.log() method receives a reference to the object. To open the object in console by clicking on "+" we need longer time, than the need for call func1 method. Try to replace console.log(ctrl2.myvar); with console.log(JSON.stringify(ctrl2.myvar));

Pass function to alertify.js

Im knocking my head to this scripts and I cant get my function to be displayed inside the Aletify.js alerts.
Some help will be incredibly helpful ;-)
The Function:
Oshoplang = {
// System Message Text
RemoveError: '<p>This item has now been removed from your cart.\n\nThank you.',
Added: 'Has now been added to your cart',
OutOfStock: '<p>This item is not currently available or is out of stock.</p>',
PreOrder: '<p>Your pre-order has been made successfully.\n\nThank you.</p>',
InvalidQuantity: '<p>It looks like you entered an invalid quantity.\n\nPlease try again.</p>',
}
window.alert = function() {};
$("#confirm-else").on('click', function() {
reset();
$('#e-content').addClass('blur');
alertify.alert(Oshoplang, function(e) {
if (e) {
alertify.success("OK");
$('#e-content').removeClass('blur');
location.reload();
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
I normally don't get a message on the run, but this way but i believe i'm close somewhere :-)
Not sure if you're still having this issue, but I believe that the alertify.alert function doesn't have any callbacks, as it's just a way to show a message. You're probably looking for the alertify.confirm instead.
The message is also not showing up because the first argument to alertify.alert or alertify.confirm needs to be a string. In your example, you're passing an object.
I've set up a demo of your code which has been adjusted to work on here on JSFiddle.
For what it's worth, the code sample is using an older version of alertify (0.3) and it has been updated, so that version 1 which is now out would have a somewhat adjusted syntax.

Getting value from a range input (slider)

I am adding a slider dynamically on a page using a string like the one below:
"<input type=\"range\" name=\"aName\" min=\"1\" max=\"9\"/>";
Then, after I append it to the page using plain javascript I can delegate using the following code:
$('input[name=aName]').on('change', function () { alert(this.value)});
and indeed when the value changes, I receive the alert with the correct value. However, if I delegate like this:
$('input[name=aName]').on('change', handleChange);
and define the function later on like this:
function handleChange () {
var theValue = $('input[name=aName]').value;
alert("value: " + theValue);
}
I receive the alert with the message "value: undefined". Why is this thing happening?
This is wrong $('input[name=aName]').value. I think you're mixing javascript & jquery.
For getting the value, use like this.
$('input[name=aName]').val()

How do I call a function stored in a jQuery array?

I have an array of hooks in jQuery that are executed before I load data into a grid. In one case, however, I want to remove the hook, then add it back for later. Whatever I'm doing is not working just right... it's probably a syntax error because I'm still somewhat new to jQuery. Any help would be appreciated, thanks!
Current code:
var preLoad = this.opts.hooks.preLoad.pop();
//stuff happens
//now I want to add the preLoad hook back
this.opts.hooks.preLoad.push(function(report) { preLoad(report); });
EDIT
It turns out the issue lies elsewhere in the code. However, I'd still like to know how best to accomplish this.
You access it the same way as any other variable stored in any other array.
this.opts.hooks.preLoad[0](myReport)
Can you not just add the function you removed like this?
var preLoad = this.opts.hooks.preLoad.pop();
//stuff happens
//now I want to add the preLoad hook back
this.opts.hooks.preLoad.push(preLoad);
And are you sure it's always the last one in the array that you want to remove?
It probably has to do with the fact that you are "canning" the argument "report" when you push the function back on the stack.
Try doing it like that:
var preLoad = this.opts.hooks.preLoad.pop();
//stuff happens
//now I want to add the preLoad hook back
this.opts.hooks.preLoad.push(preLoad);
I've tested it here http://jsfiddle.net/fWRez/
The example you gave has nothing to do with jQuery and is pure Javascript. Also, beware that what you are doing in your example is... not right. Consider this :
var ReportManager {
...
replace: function(report) {
var preLoad = this.opts.hooks.preLoad.pop();
//stuff happens
//now I want to add the preLoad hook back
this.opts.hooks.preLoad.push(function(report) { preLoad(report); });
}
}
If you execute this :
replace(null);
replace({foo:'bar'});
replace(null);
Your this.opts.hooks.preLoad array will look like this :
Array(
0: function(report) { return function(report) { return function(report) { ... } } }
)
Because you are pushing the function wrapped into itself every time you execute your code. I'm not sure why you need to pop and push it back in again, but this just look odd.
Also, Javascript is a very flexible language; which mean that you can do many weird stuff, like
"hello".concat(" world"); // -> 'hello world'
0.toString(); // -> '0'
(function(a) { return a; })("foo"); // -> 'foo'
(function() { return false; })() || (function() { return true; })(); // -> true (executes both functions)
(function(i) { return [i*2,i*3,i*4]; })(2)[1]; // -> 6
$('selector')[0]; // ...
// etc.

Categories