I am trying to trigger a button on a dynamically generated page having the follow source:
<button class="pt-button" type="button">Restart</button>
I tried the following, but it doesn't work. Any pointers?
(function() {
'use strict';
waitForKeyElements("#button.pt-button:contains('Restart')", clickButtonAfterDelay);
function clickButtonAfterDelay (jNode) {
if (document.readyState != "complete") return true;
setTimeout (triggerMouseEvent, 2222, jNode[0], "click");
}
function triggerMouseEvent (jNode) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
jNode[0].dispatchEvent (clickEvent);
}
})();
Related
I call to object AjaxForm on my html page
<script>
require(['app', '/assets/build/js/app/ajaxform.js'], function (a) {
a.AjaxForm.initialize({$_modx->getPlaceholder('AjaxForm.params')});
});
</script>
But I get error
Cannot read property 'AjaxForm' of undefined
My ajaxform.js file
define('app', ['jquery'], function ($) {
'use strict';
var AjaxForm = {
initialize: function (afConfig) {
$(document).ready(function () {
$.jGrowl.defaults.closerTemplate = '<div>[ ' + afConfig['closeMessage'] + ' ]</div>';
});
.......
Are you returning AjaxForm? I think you are missing this:
define('app', ['jquery'], function ($) {
'use strict';
var AjaxForm = {
initialize: function (afConfig) {
$(document).ready(function () {
$.jGrowl.defaults.closerTemplate = '<div>[ ' + afConfig['closeMessage'] + ' ]</div>';
});
}
}
return AjaxForm;
});
Then, in your require, you do:
<script>
require(['app', '/assets/build/js/app/ajaxform.js'], function (AjaxForm) {
AjaxForm.initialize({$_modx->getPlaceholder('AjaxForm.params')});
});
</script>
Hope it helps
I did this:
requirejs(["app", "app/ajaxform"], function () {
require(['ajaxform'], function (e) {
e.initialize({$_modx->getPlaceholder('AjaxForm.params')});
});
});
And in the file ajaxform.js
define('ajaxform', ['jquery','jgrowl','jqueryform'], function ($,jGrowl,ajaxSubmit) {
....
return AjaxForm;
When I write the following code in jupyter opened from my system, it is working, but when I open it from another system it is not. The problem is with require(it is not running). I have put some consoles to see where it is stopping and it is running till console.log(require.s.contexts._.defined). I have checked the modules with this console and angular seems to be missing in this. Thanks in advance.
%%javascript
require.config({
paths: {
velocity: "https://cdn.jsdelivr.net/velocity/1.2.3/velocity.min",
interact: "https://cdn.jsdelivr.net/interact.js/1.2.6/interact.min",
angular: "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min"
},
shim: {
'angular': {
exports: 'angular'
}
}
});
function start_application(data) {
// console.log("data ready")
console.log(require.s.contexts._.defined)
require(['angular', 'jquery'], function(angular,$) {
console.log("require running")
$.ajax({url: "http://localhost:8889/tree/Jupyter_Angular/DQAForm.html",
success: function(result) {
// console.log("SUCCESS")
// console.log(result);
$("#DQAFormContainer").html(result)
var el = document.getElementById("dqaBrickContent");
if(angular.element(el).injector()){
angular.element(el).injector().get('$rootScope').$destroy()
}
var dqaBrick = angular.module('dqaBrick', []);
dqaBrick.controller('dqaBrickCtrl', ['$scope', function ($scope) {
$scope.myVariable = 'Starting new DQA Brick';
console.log($scope.myVariable);
$scope.showPanel = 1;
$scope.openPanel = function (panelNum) {
$scope.showPanel = panelNum;
// console.log(panelNum);
}
}]);
angular.element(document).ready(function() {
angular.bootstrap(el, ['dqaBrick']);
});
}
});
})
}
var callbacks = {
iopub : {
output : start_application
}
}
var kernel = IPython.notebook.kernel
kernel.execute('print("This is the starting")', callbacks)
I've read about onMessage.addListener method in Chrome to pass some data from extensions to script. What I have now:
popup.js
window.onload = function(){
document.getElementById('searchButton').onclick = searchText;
};
function searchText(){
var search = document.getElementById('searchText').value; // f.ex "123"
if(search){
chrome.tabs.query({active:true,currentWindow:true},function(tabs){
chrome.tabs.executeScript(tabs[0].id,{file:search.js});
chrome.tabs.sendMessage(tabs[0].id,{method:'search',searchText:search});
});
}
}
search.js
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
alert('text');
});
However, alert ('text') is never fired. What's the problem?
You should quote "search.js" and put the chrome.tabs.sendMessage call in the callback of chrome.tabs.executeScript:
function searchText(){
var search = document.getElementById('searchText').value; // f.ex "123"
if (search) {
chrome.tabs.query({active:true,currentWindow:true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {
file: 'search.js'
}, function() {
chrome.tabs.sendMessage(tabs[0].id, {
method: 'search',
searchText: search
});
});
});
}
}
If this suggestion does not help, inspect the popup and look for error messages.
Hy folks, I got a problem with databinding. I tried since ages to figure out why my few has no access to my global.user provided by a service.
Could somebody figure out whats happening. Thank in advance. best regards Thomas
profile.html
<section data-ng-controller="MyprofileController">
<h1>{{global.current_User()}}</h1>
</section>
myprofile.js
'use strict';
angular.module('mean.system').controller('MyprofileController', ['$scope', 'Global', function ($scope, Global) {
$scope.global = Global;
$scope.test = 'testcase';}]);
service
'use strict';
//Global service for global variables
angular.module('mean.system').factory('Global', [
function() {
var current_user = window.user;
return {
current_User: function() {
return current_user;
},
isloggedIn: function() {
return !!current_user;
}
};
}
]);
thanks a lot for your help.
Just found out that firefox does print an error message!
Error: [ng:areq] Argument 'MyprofileController' is not a function, got undefined
http://errors.angularjs.org/1.2.11/ng/areq?
p0=MyprofileController&p1=not%20a%20function%2C%20got%20undefined
minErr/<#http://localhost:3000/lib/angular/angular.js:78
assertArg#http://localhost:3000/lib/angular/angular.js:1363
assertArgFn#http://localhost:3000/lib/angular/angular.js:1374
#http://localhost:3000/lib/angular/angular.js:6774
nodeLinkFn/<#http://localhost:3000/lib/angular/angular.js:6186
forEach#http://localhost:3000/lib/angular/angular.js:310
nodeLinkFn#http://localhost:3000/lib/angular/angular.js:6173
compositeLinkFn#http://localhost:3000/lib/angular/angular.js:5637
publicLinkFn#http://localhost:3000/lib/angular/angular.js:5542
ngViewFillContentFactory/<.link#http://localhost:3000/lib/angular-route/angular-
route.js:915
nodeLinkFn#http://localhost:3000/lib/angular/angular.js:6228
compositeLinkFn#http://localhost:3000/lib/angular/angular.js:5637
publicLinkFn#http://localhost:3000/lib/angular/angular.js:5542
boundTranscludeFn#http://localhost:3000/lib/angular/angular.js:5656
controllersBoundTransclude#http://localhost:3000/lib/angular/angular.js:6248
update#http://localhost:3000/lib/angular-route/angular-route.js:865
Scope.prototype.$broadcast#http://localhost:3000/lib/angular/angular.js:12245
updateRoute/<#http://localhost:3000/lib/angular-route/angular-route.js:556
qFactory/defer/deferred.promise.then/wrappedCallback#http:
//localhost:3000/lib/angular/angu lar.js:10949
qFactory/defer/deferred.promise.then/wrappedCallback#http:
//localhost:3000/lib/angular/angu lar.js:10949
qFactory/ref/<.then/<#http://localhost:3000/lib/angular/angular.js:11035
Scope.prototype.$eval#http://localhost:3000/lib/angular/angular.js:11961
Scope.prototype.$digest#http://localhost:3000/lib/angular/angular.js:11787
Scope.prototype.$apply#http://localhost:3000/lib/angular/angular.js:12067
#http://localhost:3000/lib/angular/angular.js:9202
createEventHandler/eventHandler/<#http://localhost:3000/lib/angular/angular.js:2613
forEach#http://localhost:3000/lib/angular/angular.js:310
createEventHandler/eventHandler#http://localhost:3000/lib/angular/angular.js:2612
<section class="ng-scope" data-ng-view="">
It should work, and it does in a Fiddle I've created: http://jsfiddle.net/BernhardW/mLQWs/
window.user = 'John Doe';
angular.module('mean.system', []);
angular.module('mean.system').controller('MyprofileController', function ($scope, Global) {
$scope.global = Global;
$scope.test = 'testcase';
});
angular.module('mean.system').factory('Global', function() {
var current_user = window.user;
return {
current_User: function() {
return current_user;
},
isloggedIn: function() {
return !!current_user;
}
};
});
Are there any errors showing?
I'm new to backbone.js and express and I have been adapting Christophe Coenraets Wine Cellar REST API example application for my own project.
I am building a form that has several menus needing to be populated from multiple unrelated collections in mongodb.
I am able to populate one menu with one collection, but I have no idea how to get more than one collection to my form View.
Here are the files I am using to populate one menu. How do I expand this to populate two menus?
I suppose I could make a new View for every menu I want to populate - but that seems like overkill.
Can I combine two mongodb find() collections into one object, and list them separately on a page? If so, how?
thanks in advance!
/routes/modules.js contains:
exports.findAllModules = function(req, res) {
db.collection('modules', function(err, collection) {
collection.find().toArray(function(err, items) {
res.send(items);
});
});
};
/server.js contains:
app.get('/modules', module.findAllModules);
/public/js/main.js contains:
routes: {
"modules" : "list" }
...
list: function(page) {
var p = page ? parseInt(page, 10) : 1;
var moduleList = new ModuleCollection();
moduleList.fetch({success: function(){
console.log('in list function');
$("#content").html(new ModuleListView({model: moduleList, page: p}).el);
}});
this.headerView.selectMenuItem('home-menu');
},
...
utils.loadTemplate([
'ModuleListItemView' ], function() {
app = new AppRouter();
Backbone.history.start(); });
/public/models/models.js contains:
window.Module = Backbone.Model.extend({
urlRoot: "/modules",
idAttribute: "_id",
initialize: function () {
this.validators = {};
this.validators.name = function (value) {
return value.length > 0 ? {isValid: true} : {isValid: false, message: "You must enter a name"};
};
validateItem: function (key) {
return (this.validators[key]) ? this.validators[key](this.get(key)) : {isValid: true};
},
validateAll: function () {
var messages = {};
for (var key in this.validators) {
if(this.validators.hasOwnProperty(key)) {
var check = this.validators[key](this.get(key));
if (check.isValid === false) {
messages[key] = check.message;
}
}
}
return _.size(messages) > 0 ? {isValid: false, messages: messages} : {isValid: true};
},
defaults: {
_id: null,
name: ""
} });
window.ModuleCollection = Backbone.Collection.extend({
model: Module,
url: "/modules"
});
/public/js/views/modulelist.js contains:
window.ModuleListView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
var modules = this.model.models;
$(this.el).html('<ul class="thumbnails"></ul>');
for (var i = 0; i < modules.length; i++) {
$('.thumbnails', this.el).append(new ModuleListItemView({model: modules[i]}).render().el);
}
return this;
} });
window.ModuleListItemView = Backbone.View.extend({
tagName: "li",
initialize: function () {
this.model.bind("change", this.render, this);
this.model.bind("destroy", this.close, this);
},
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
} });
/public/tpl/ModuleListView.html contains:
Not entirely sure how your code works, but here are a few backbone tips.
If you wanna build a menu from a collection don't pass the collection as a model.
Instead of:
$("#content").html(new ModuleListView({model: moduleList, page: p}).el);
Use:
$("#content").empty().append(new ModuleListView({collection: moduleList, page: p}).el);
Instead of:
render: function () {
var modules = this.model.models;
$(this.el).html('<ul class="thumbnails"></ul>');
for (var i = 0; i < modules.length; i++) {
$('.thumbnails', this.el).append(new ModuleListItemView({model: modules[i]}).render().el);
}
return this;
}
Use:
render: function () {
this.$el.html('<ul class="thumbnails">');
this.collection.each(function(model) {
this.$('.thumbnails').append(new ModuleListItemView({model: model}).render().el);
}, this);
return this;
}
If you have no need in updating or deleting your models, it's enough to add the url path /modules only to the collection, for reading the initial modules.