I want to provide a way to use an on-event handler from the outside of a plugin. Problem is, that the trigger will not fired if I provide them in wrong order.
For example, this works:
$(window).on('foo:bar', function(){
alert(true);
});
$(window).trigger('foo:bar');
...this, however does not:
$(window).trigger('foo:bar');
$(window).on('foo:bar', function(){
alert(true);
});
Any ideas how the second approach can work?
Update
Here it works: http://www.benplum.com/projects/rubberband/
You cannot. You want to eat cake before baking it.
UPD: You're misinterpreting the code at http://www.benplum.com/projects/rubberband/
Here is a jsfiddle with proof that it doesn't work like you're thinking: jsfiddle.net/zerkms/z5Mya/
Note about code: I've forked the library and added trivial console.log here: https://github.com/zerkms/Rubberband/blob/master/jquery.bp.rubberband.js#L77
Related
I installed Babel("babel-cli": "^6.26.0") and and made a .babelrc like
{
"auxiliaryCommentBefore": "testBefore",
"auxiliaryCommentAfter": "testAfter"
}
and also made a simple test.js like
var a = 5;
and finally run babel test.js.
It secceded but no comment above is attached..
My expectation is something like below.
testBefore
var a = 5;
testAfter
Is there anything required missing??
The honest answer to your question is "they don't" :D
The specific behavior of those two options are extremely under-defined and I would love to rip them out of Babel entirely, and I would except that I don't want to needlessly break existing users when they upgrade.
If you need to annotate some input code in a particular way, you should write your own Babel plugin to inject whatever you need instead.
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>`
I was trying to figure out why .click() below was crashing protractor :
this.clickSecondPanel = function () {
element(by.css('div.panels-gs.panel-top-two-gs')).click();
}
until I changed the line to :
element(by.css('div.panels-gs.panel-top-two-gs')).click;
where my spec.js looks something like :
var DataCardPage = require('./pageObjects/dataCard.page.js');
var dataCardPage = new DataCardPage();
describe('Clicking on the 2nd panel', function () {
dataCardPage.clickSecondPanel();
it('Should select the 2nd test panel', function () {
expect(dataCardPage.getSecondPanelText()).toBe('TEST123');
});
In other places in my code, I use .click() (with parenths), so this is confusing to me.
The error is nasty:
Started
[17:44:23] E/launcher - Error while waiting for Protractor to sync with the page
: "window.angular is undefined. This could be either because this is a non-angu
lar page or because your test involves client-side navigation, which can interfe
re with Protractor's bootstrapping. See http://git.io/v4gXM for details"
Any advice appreciated...
Bob
Solved this in the comments above, posting as an answer.
My suggestion was to try moving the clickSecondPanel() inside the it block. It looked suspicious by itself just from a "best practice" perspective as I do not have any code that is outside of a jasmine function i.e. it, beforeAll, afterAll etc (don't even know where I learned that habit honestly).
It also seemed to effect the control flow and asynchronous execution so the click() event was triggering too soon. This can be explained in part by this documentation and/or this blog post
Try using browser.ignoreSynchronization=true at the begining of your test. May be the application that you are trying to automated does not contain angular in it.
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
I've been looking for a script that combines the autoGrowInput with the JEditable but found none.
Use https://github.com/MartinF/jQuery.Autosize.Input initialized automatically via jEditable's event data:
jQuery(element).editable(save_fn, {
data: function(value,settings} {
var target = event.target;
window.setTimeout(function(){
jQuery(target).find('input').autosizeInput();
});
return value;
}
});
It's worth noting that this event (data) fires before the input element is actually created, hence the use of the timeout. There doesn't seem to be an event available at the present time for after the input has been created.
Actually I have created a plugin that does exactly that. You can check the demo and the documentation. I tried to make it very intuitive. It has ajax capabilities, using the RESTful philosophy. If you liked the animation effect on the autoGrowInput, it will be really easy to add it to the plugin just by changing the css file, using the transition property.
If I get people to like it, I may be able to improve and add more features to it. Hope it helps.