I want to trigger a javascript function after all the documents in the document library are loaded.
I have coded a custom renderer for document library to display custom text for document library. When all the contents of the document library are loaded, I want to execute a javascript on the custom text.
I tried the below code in custom javascript file added as dependency and it does not work.
$(document).ready(function () {
myjsfunction();
}
I am using a window.setInterval to call cutom javascript function after a predefined time
Related
I'm creating a POC using google app maker. I plan on using a JS library that has a dependency on Jquery. I've listed JQuery as an "external resource" to start with and added an H1 element on my html with the following code as part of a client script:
$(document).ready(function(){
$("h1").click(function(){
console.log("jquery works");
});
});
When I preview my app and click on the element, nothing is logged. When I inspect the elements, I can see both the Jquery library and the code above, but the event is not triggering when I click on the element. Any suggestions? The ultimate goal is to be able to use https://querybuilder.js.org/ within the app I'm creating.
My best guess is that when you say that you added the code:
$(document).ready(function(){
$("h1").click(function(){
console.log("jquery works");
});
});
to the client script, what you did was created a client script under the SCRIPTS section of App Maker and then added the code there. If that is so, that is why it's not working.
What you need to do is to use client scripting in the widget event handlers. Each widget has event handlers and the HTML widget is not an exception. What I recommend is to add the code to the onAttach event handler of the HTML widget:
}
Also, you can get rid of the document.ready part and just use the code you see in the image above. That should do the trick.
BONUS: If you will be using classes and ids, for it to work you will need to use the allowUnsafeHtml option:
I hope this helps for now. If you need something else, I'll be happy to help you.
Meteor says when you write some javascript in a JS file, every file automatically has access to it everywhere in the app, but when I write a function in a a separate file like that, I just get a console error saying that function could not be found when I call it in html. The only way I can get it to work is by writing the JS in the html file but I want to keep the languages separate. Any idea on what the problem is?
code:
html in one file:
<button onclick="dylan()"></button>
js in another file:
function dylan(){
console.log("hello");
}
the problem is, when I click the button, it says dylan is not a function.
Meteor docs do not spell this out but every individual javascript file is wrapped into a closure:
(function() { //the file content // })()
so all functions in a given file have their own scope.
Functions defined in a js file in Meteor normally only have file scope - that is, any object in that file can refer to them.
If you want to define a global function, create a global variable:
dylan = function(){
...
}
Note the absence of let or var which would restrict the function to file scope.
Now you can use this global in your onclick handler.
Note however, that normally in Meteor, you would define an event handler at the template level, ex:
Template.myTemplate.events({
'click button'(){
...your code here
}
});
As opposed to referring to event handlers in your html directly.
The purpose of using Meteor is not met if you do not harness the wonderfull features such as
Template.X.events({});,
Template.X.helpers({}); and also
Template.registerHelpers({});
You can write your desired code in below way:
Template.template_name.events({
'click .button_class' : function() {
console.log("Hello");
}
});
//HTML
<button class="button_class"></button>
If that click event has to be used in more than 1 HTML then you can use registerHelper methods than template click events.
Template.registerHelpers('dylan' : function() {
console.log("Hello");
});
//html
<button onclick="dylan"></button>
To access dylan(), you must first load the script file that contains that function into the html document.
You can do this by adding <script src="myfile.js"></script> anywhere before the button. (replace myfile with the name of your script)
Once loaded, <button onClick="dylan()"></button> will work!
I have an Adobe Illustrator action file (.aia) that I'd like to load in the extension builder environment via .js or .jsx. I noticed that there is app.loadAction() - but I can't get the operations to work. If I have the action file stored in my root folder, how do I get the actions to load in Illustrator?
Below is the setup I got working. This extension uses HTML panels, with a button click, we load an action into Illustrator. The button click triggers the JS function below which then calls to the JSX script. The .aia file is stored in the root folder, ./assets
JS function:
function getActionFile() {
var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/assets/Utility.aia"; //exported aia file
csInterface.evalScript('loadActions('+JSON.stringify(extensionRoot)+')');
}
JSX function:
function loadActions(f){
var scriptFile = File(f);
app.loadAction(scriptFile)
}
I have a Meteor app in which I insert a document (title, description, customer, ...) into a database. The app is using Autoform, Simple Schema and Collection2. I now want to add the possibility to upload a file to S3.
To keep things simple, I would present a filepicker as part of the 'Create Document' and once the file is uploaded, the URL field (from Autoform), should show the URL of the document on S3 (once uploaded) so that the URL is eventually stored in the document collection when the create button is clicked. I realise there might be better ways, but wanted to keep things simple for now.
I have tried to combine the tutorial here. The upload to S3 works, but I fail to get the URL for the uploaded file stored documents collection. The below screenshot shows the layout. Any idea's?
My current code can be found here.
There appear to be autoform add-on packages that specifically address S3 file upload (see the "Files" section here), but since you seem to be using this as learning opportunity, I'll try to explain how I'd do it using core meteor.
But first, before I forget, your uploader template is a child of #autoForm but has a form element of it's own. I think that will cause the generated HTML to have nested form elements (which is no-no). To fix that, I'd move the {{/autoForm}} before the {{> uploader}} and add an event handler for your submit button that submits the form using $('#documentForm').submit(). Note: I haven't tested that.
Now, on to your actual question. You are essentially asking how to modify something in a template (the value of the url field) from an event in a nested template (the uploader template). I'd do that as follows:
When an instance of the parent template is created, attach a ReactiveVar to it that will hold the URL of the uploaded file.
Template.adminDocumentNew.onCreated(function () {
this.url = new ReactiveVar();
});
Provide a helper to get the reactive var.
Template.adminDocumentNew.helpers({
url: function () {
return Template.instance().url;
}
});
Use the helper to set the value in the form.
{{> afQuickField name='url' value=url.get}}
Pass the reactive var to the uploader template as the data context:
{{> uploader urlVar=url}}
Use the reactive var to set the URL when the upload finishes (somewhere in upload-to-amazon-s3):
template.data.urlVar.set(url);
I've created a meteorpad that demonstrates the basic idea outside of the context of autoform and S3.
I need to design how to implement JavaScript module pattern in existing large .NET Web Forms application. Currently there are no rules and lot of JavaScript code uses global variables. The problem is also with communication between server and JavaScript client code, currently lot of JavaScript functions are called from code-behind classes and are inlined into page.
Current JavaScript usage example
A server control adds link to some JavaScript file to the <head> element so it will be downloaded. The file contains one or more global functions. Then the server control call's this global functions whenever it needs them, like following:
string script = string.Format("GlobalFunction1('{0}');", param);
And this string is inserted somewhere inside the <body> element in the HTML. There are no rules and the server can call any of the global function whenever it needs them.
The main goals for improvements are:
Separate server-side code from client-side JavaScript. This means no chaotic inline calls for JavaScript global functions.
JavaScript self functioning modules, which are not dependent on each other.
JS modules should not expose anything to global scope.
Every JS module has only one place to initialize itself.
Server-side should be able to populate some parameters to JS module initialization.
Here is the approach that I came with:
How would it look like on Server-Side
Every Control has its own JavaScript module
Every Control is wrapped inside its root <div> element.
Server can call this helper method in every page life-cycle: ScriptModule.AddParam("param_name", "param_value"); This params will be added to the Control's wrapper (div) on pre_render event call as HTML5's data- attributes.
Finally Server registers the module with ScriptModule.Register("module_name", "path_to_js_file", "controlWrapperId").
This results in these steps in HTML:
The <script> file (path_to_js_file) is inserted into the page which links to desired module's file.
The parameters are added into Control's wrapper (div) through data- attributes.
At the end of the page the inlined Core.start("module_name", "controlWrapperId"); is inserted, which starts the module's initialization. This method is discussed later in client-side section.
How would it look like on Client-Side
The first file that is downloaded is the Core.js file, which registers one global variable Core that is used to define new modules.
Every JavaScript file will be defined as module. This module should not expose anything to the global scope and should be self functioning. The template follows:
// 1. first param is module's name
// 2. than the array with dependencies to helpers modules
// 3. than the callback with following parameters
// a. jQuery object which references wrapper (i.e. div) of this module
// b. params hash-object, which contains server parameters from wrapper's -data attributes in format
// { 'param1_name': 'param_val',
// 'param2_name': 'param2_val' }
// c. then the external dependencies to helper modules
Core.htmlModule('mod name', ['external', 'deps'], function ($w, params, external, deps) {
// Here the module initializes itself
// it can communicate with other modules through Core.publish(); Core.subscribe();
// it does not return anything, because it is HTML module and so it does not expose anything
});
The second parameter defines so-called helper modules, which are for code reusing. Due to the normal module's independence and inability to expose some functions outside, there is needed something to share same code. This can be achieved by defining helper module, which can expose some of its properties and then be referenced from normal module.