I'm very new to CoffeScript and want to edit some code that I found. Right now, it runs this function right when the DOM is loaded:
jQuery ->
$('#s3-uploader').S3Uploader
How can I rewrite it such that it only runs after the page is loaded? I need to wait so I can get the correct instance variables:
(on page load) ->
$('#s3-uploader').S3Uploader
additional_data: {project_id: #project.id, step_id: #step.id, user_id: current_user.id}
This is quite an old question, and no doubt you have found a solution already. But for the benefit of anyone coming here from Google....
It is also not 100% clear from your question, but you appear to be using a framework such as Ruby on Rails.
If so, then the correct answer of course is that you should not be accessing instance variables from Coffeescript. Coffeescript files in the asset pipeline are compiled during deployment, and have no knowledge of the controller or instance variables.
The correct way is to assign these variables to data attributes in the DOM, and then reference the data attributes.
#view.html.erb
<div id="uploader" data-project_id="<%= #project.id %>" ></div>
#script.coffee.js
(on page load) ->
$('#s3-uploader').S3Uploader
additional_data: {project_id: $('#uploader').data('project_id') .... }
For rails, this worked for me when all the other answers here did not:
$(document).on "turbolinks:load", ->
You're looking for $(document).ready event handler.
$(document).ready ->
$('#s3-uploader').S3Uploader
checkVariable = ->
if variableLoaded == true
# here is your next action
else
return
setTimeout 'checkVariable()', 1000
Related
I have added a custom locator in protractor, below is the code
const customLocaterFunc = function (locater: string, parentElement?: Element, rootSelector?: any) {
var using = parentElement || (rootSelector && document.querySelector(rootSelector)) || document;
return using.querySelector("[custom-locater='" + locater + "']");
}
by.addLocator('customLocater', customLocaterFunc);
And then, I have configured it inside protractor.conf.js file, in onPrepare method like this:
...
onPrepare() {
require('./path-to-above-file/');
...
}
...
When I run my tests on the localhost, using browser.get('http://localhost:4200/login'), the custom locator function works absolutely fine. But when I use browser.get('http://11.15.10.111/login'), the same code fails to locate the element.
Please note, that the test runs, the browser gets open, user input gets provided, the user gets logged-in successfully as well, but the element which is referred via this custom locator is not found.
FYI, 11.15.10.111 is the remote machine (a virtual machine) where the application is deployed. So, in short the custom locator works as expected on localhost, but fails on production.
Not an answer, but something you'll want to consider.
I remember adding this custom locator, and encounter some problems with it and realised it's just an attribute name... nothing fancy, so I thought it's actually much faster to write
let elem = $('[custom-locator="locator"]')
which is equivalent to
let elem = element(by.css('[custom-locator="locator"]'))
than
let elem = element(by.customLocator('locator'))
And I gave up on this idea. So maybe you'll want to go this way too
I was able to find a solution to this problem, I used data- prefix for the custom attribute in the HTML. Using which I can find that custom attribute on the production build as well.
This is an HTML5 principle to prepend data- for any custom attribute.
Apart from this, another mistake that I was doing, is with the selector's name. In my code, the selector name is in camelCase (loginBtn), but in the production build, it was replaced with loginbtn (all small case), that's why my custom locater was not able to find it on the production build.
I'm attempting to dynamically conditionally load additional JavaScript while using hyperHTML. I've narrowed the failure to the onload event.
Here's an attempt at a minimal, complete, and verifiable example:
class ScriptLoader extends hyperHTML.Component {
onload(event) {
notie.alert({ text: "notie loaded" });
}
render() {
return this.html`
<script
src=https://unpkg.com/notie
type=text/javascript
async=false
onload=${this}
/>
`;
}
}
hyperHTML.bind(document.body)`
<h2>onload test (notie)</h2>
${new ScriptLoader}
`;
<script src="https://unpkg.com/hyperhtml#2.4.0/min.js"></script>
As you can see notie.alert is never called, even though the script is inserted correctly.
This some process works correctly using vanilla JS with addEventListener('load', and appendChild(.
Update this was an issue with Firefox and Web (Safari) considering death nodes scripts injected via innerHTML, even if through a template and after imported.
That means the issue was not with the onload per-se, rather the fact no network request was ever triggered so that onload would never happen indeed.
As you can verify now in the Code Pen eaxmple, which uses your exact same snippet I rewrite in part to make SO happy about me linking Code Pen, both Firefox and Safari, as well as Chrome and Edge should work just fine.
hyperHTML.bind(document.body)`
<h2>onload test (notie)</h2>
${new ScriptLoader}
`;
I am keeping part of the old edit just to make you, or any other reader, aware of a little caveat that JSX affectionate might overuse.
There is one thing you should be careful with: hyperHTML does not parse HTML and <script/> is not valid HTML.
You are risking to find nodes where you shouldn't if you don't close non-void tags regularly, and this is beyond hyperHTML capabilities, unfortunately how HTML works in general.
<p/><b>unexpected</b>
I understand for this demo case you had to do that or the parse would complain with a closing script in the page but remember, you can always do this instead, when necessary:
`<script><\x2fscript>`
in one extension file: I run below code:
var_dump($GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_watermark_pi1.']);
the result is :
["hooks."]=> array(4) { ["dagou_post."]=> array(1) { ["view."]=> array(2) { ["state."]=> array(1) { ["template"]=> string(11) "###INPUT###" }...
and I can tell it outputs this file: ext_typoscript_setup.txt inside extension:watermark and also the ts settings from global and local pages.
Question:
I checked file: typo3\sysext\cms\tslib\class.tslib_fe.php, and trying to figure out how does this work: $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_watermark_pi1.'], but only saw var $tmpl='';
from this code: $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_watermark_pi1.'], tmpl should be an object, and setup['plugin.']['tx_watermark_pi1.'] should be the property. So anyone can give me some explanation on how does $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_watermark_pi1.'] work? thanks.
$GLOBALS['TSFE']->tmpl->setup is the cumulative recursive TS setup of your compete website. It gathers all TS templates, found in rootline from your current selected page, parses it and compiles into array.
Obviously, you will find nothing about tx_watermark_pi1 in class.tslib_fe.php, because tslib_fe knows nothing about it - it just creates FE, and one of the tasks is to create tmpl object, that contains complete setup of all TS, found in rootline.
You can find more info on TS parsing here
The typoscript code you write and also the ts-files delivered with the extensions you have installed are parsed to php and then cached. When the frontend is built up, this very big php array is written to this global object and then read from there by several other classes like extension plugins and so on.
You can find that code in the t3lib/class.t3lib_tsparser*.php classes if you want to take a look (although I don't think that will help you).
First of all I am using Play framework with scala.
I am creating a graph and with the node id I would like to show some information at the same page.
In order to do that, first I need to get node.name but for some reasons #node.name function is not working. When searching for it I learnt that it's because play is server-side and js is client-side. However I need to get the data somehow.
I also cannot access:
var html = "<h4>" + node.name + "</h4><b> connections:</b><ul><li>"
How can I access this through the view?
My second question is after reaching the js node.name, I need to access to controller and do the same action one more time but this time with the new node.name .
View Part:
onClick: function(node) {
#node.name
}
1) Is this code in your controller? And are the node variable in scope? If so this should be perfectly legal code, since it will be evaluated as pure scala.
2) The templates are a different story however. You probably know they parse everything as normal html, unless escaped. To use a variable you have to bring it into scope by either:
defining a 'constructor' for the template at the absolute beginning of the file:
#(node : Node)
...
#node.name // later in the file
See http://www.playframework.com/documentation/2.0/ScalaTemplates
or define a variable inside the template:
#defining( Get.node.from.somewhere ) { node =>
#node.name
}
See Play! framework: define a variable in template?
If you did either of the two, you should have no problem accessing the node variable. Even in scripts. But note that external scripts does not have access to the same variables. It is thus very common to use inline scripts or import it as another template if you need to access a variable from JavaScript.
Edit: I've made a gist of a template, controller and routes file: https://gist.github.com/Jegp/5732033
I have the following ArrayController:
Lead.Controllers.Leads = Ember.ArrayController.extend
init: ->
content: Ember.A()
#view = Ember.View.create
controller: #
templateName: 'app/templates/leads/list'
#view.appendTo $('#leads')
addLead: (data) ->
lead = Lead.Lead.create()
lead.setProperties JSON.parse data
console.log lead.get 'company'
debugger
#pushObject lead
console.log #get('length')
The problem is after I call push object, the length is still 0. I really cannot see what I am doing wrong.
Can anyone see what I am doing wrong? The only thing I can think of is that the Content is set to an empty array via Ember.A().
I have no idea what else it could be.
I'm not quite sure where your problem is since I a) don't really know or use CoffeeScript and b) there's no jsFiddle or working example. But if I'm reading this correctly your trying to do the following: See this jsFiddle which works as expected. Hope that points you in the right direction.
It's a Coffee Script syntax error.
There are two solutions (depending on what you want to implement).
The second example will use the same array for every instance of the controller.
Also, I'd recommend calling #_super() when overriding the init method, otherwise you might get some unexpected results with certain classes.
Ember.ArrayController.extend
init: ->
#_super()
#set 'content', Ember.A()
# content
Ember.ArrayController.extend
content: Ember.A()
init: ->
#_super()
# content