I wrote following code to implement simple pub/sub API.
(function ($) {
var o = $({});
$.each({
trigger: 'trigger',
on: 'listen',
off: 'stopListen'
}, function (key, val) {
jQuery[val] = function () {
//console.log(o[key]);
o[key].apply(o, arguments);
}
});
})(jQuery);
$.trigger('watch');
$.listen('watch', function (e, data) {
alert('Watch it');
});
However, above code does not alert Watch it. Why it does not work and how can I fix it?
You have to listen to the event before you trigger it. Try executing in this order:
$.listen('watch', function (e, data) {
alert('Watch it');
});
$.trigger('watch');
Related
I'm trying to get the news comments on yahoo, where there is a link "See reactions", with the following id: "caascommtbar-wide" and tried to get the element with CasperJS, Selenium, ScrapySharp, to click on the link and display the comments, but in those tools you never find the element and I've even tried using the XPath
CasperJS:
casper.then (function () {
if (this.exists ('a.caascommtbar-anchor')) {
this.echo ("It exists");
} else
this.echo ("It Does not Exist");
});
casper.then (function () {
// Click on 1st result link
this.click ('a.caascommtbar-anchor');
});
Selenium:
driver.FindElement (By.Id ("caascommtbar-anchor")). Click ();
Does anyone know why you can not access this part of the HTML code where the comments are located?
It should be noted that the same thing happens to me when trying to access the Facebook comments contained in the news forums.
As Isaac said the part of pages are loaded asynchronously, so you should implement waitFor steps in your code. Here is the code that does just that.
var url = "https://es-us.vida-estilo.yahoo.com/instagram-cierra-la-cuenta-de-una-modelo-por-ser-gorda-103756072.html";
var casper = require('casper').create({
viewportSize: {width: 1280, height: 800},
});
casper.start(url, function() {
this.echo('Opened page');
});
casper.waitForSelector('a.comments-title', function() {
this.click('.comments-title');
});
casper.waitForSelector('ul.comments-list > li', function() {
this.echo(this.getHTML('ul.comments-list'));
});
casper.run();
Hope that helps
The problem was why the page was not loaded yet and I had to wait, I'm new with casperjs.
Now I have the problem when trying to remove all comments along with their answers, but can not find an algorithm to help me. Try to press all the answer buttons, but only get the first answers to the first comments.
casper.waitForSelector('button.showMore', function () {
this.click('.showMore');
}, function onWaitTimeout() {
});
var buttons;
casper.waitForSelector('ul.comments-list', function getLinks() {
buttons = this.evaluate(function ()
{
var buttons = document.getElementsByClassName('replies-button');
buttons = Array.prototype.map.call(buttons, function (button) {
button.click();
casper.waitForSelector('ul.comments-list', function () {
casper.wait(3000, function () {
});
});
return button.getAttribute('class');
});
return buttons;
});
}, function onWaitTimeout() {
});
function wait5seconds() {
casper.wait(3000, function () {
});
}
casper.waitForSelector('ul.comments-list > li', function () {
var x = this.getHTML('ul.comments-list');
this.echo(x);
}, function onWaitTimeout() {
});
casper.run();
I created a small AutoComplete object and list my results as a list of li elements. I have an this.on('input', function () {}); event that handles when you choose an item in the list and works fine. Now I want to add an blur event to hide results. Adding the blur events stops the input event from working.
$.fn.autoComplete = function () {
this.on('input', function () {
AutoComplete(self.val());
});
this.on('blur', function () {
$('#' + settings.resultsDivId).hide();
});
function AutoComplete(term) {
// ajax call
});
};
This worked in the following JSFiddle - it looks like you have an error after your AutoComplete function (it ends with ");"): https://jsfiddle.net/ek5v59t6/
$(function() {
$('input').autoComplete();
});
$.fn.autoComplete = function () {
this.on('input', function () {
console.log('input fired');
AutoComplete($(this).val());
});
this.on('blur', function () {
console.log('blur fired');
$('#results').hide();
});
function AutoComplete(term) {
$('#results').show();
}
};
Hello and I could do with this one function?
I am new to javascript.
I need to encapsulate the code below in a function like:
ConfirmDelete function () {
};
that does the same as this:
$('.btn-danger').on('click', function (e, confirmed) {
if (!confirmed) {
e.preventDefault();
bootbox.confirm("Are you sure?", function (response) {
if (response) {
$('.btn-danger').trigger('click', true);
}
});
}
});
I have been over your code and the jQuery version is your best bet. You can't get the same functionality from inline handlers connected to the button.
You will want to move to the submit event of the form as click on a single button is unreliable (e.g. when using keyboard). e.g. You would want to change it to something like:
$('form:has(.btn-danger)').on('submit', function (e, confirmed) {
var $form = $(this);
if (!confirmed) {
e.preventDefault();
bootbox.confirm("Are you sure?", function (response) {
if (response) {
$form.trigger('submit', true);
}
});
}
});
I have a very simple widget outlined that appears to fire an event via _trigger that I cant seem to bind to:
; (function ($) {
$.widget('testspace.ftpWidget', {
options: {},
widgetEventPrefix: 'ftpwidget:',
_create: function () {
var that = this;
that.paused = ko.observable(false);
},
_triggerPlayerInitialized: function () {
console.log("player initialized");
this._trigger("testeventname", null, null);
console.log("player testeventname supposedly fired");
},
pause: function () {
this.paused(!this.paused());
console.log("player paused");
this._triggerPlayerInitialized();
},
_destroy: function () { },
_setOption: function (key, value) { }
});
}(jQuery));
In an html file:
<script>
jQuery(document).ready(function ($) {
$('#videoA').ftpWidget();
var widget = $('#videoA').data("testspace-ftpWidget");
console.log(widget);
$(widget).on("ftpwidget:testeventname", function (event, data) {
console.log("widget initialized");
});
widget.pause();
});
And console output:
Why is this event not being handled / or is it not even being fired? How can I debug this?
Update:
This answer, though not my problem, gave me a hint. The OP is calling the on binding from an element body. So I changed
$(widget).on("ftpwidget:testeventname", function (event, data) {
to
$("body").on("ftpwidget:testeventname", function (event, data) {
and it worked, so does
$("#video").on("ftpwidget:testeventname", function (event, data) {
So now I have it working but don't really understand why. Is it a scope "thing"?
I was thinking
"I want to register for the testeventname on widget"
What's going on here?
_trigger itself can actually call your function. In the first parameter you're specifying the name of the callback function you want to trigger. So if you were to change:
$('#videoA').ftpWidget();
to
$('#videoA').ftpWidget({
testeventname: function (event, data) {
console.log("widget initialized");
}
});
that would also work.
Jquery-UI: How to Use the Widget Factory
Skip to bottom for question
JQuery plugin:
$.fn.myPlugin = function( options ) {
var options = $.extend({
myOption: true,
edit: function() {},
done: function() {}
}, options);
options.edit.call(this);
options.done.call(this);
//plugin guts removed to prevent over complication
return {
edit: function(obj) {
$(obj).closest('#myParent').find('#myInput').autosizeInput(); //plugin to autosize an input
},
done: function(obj) {
$(this).closest('tr').find('td').not('.not').each(function(i) {
//do some things
});
}
}
});
Bear in mind this is a cut down version of my plugin.
Called from page:
$(document).ready(function() {
var myPlugin = $('.editable').myPlugin({
edit: $(this).on('click', '.edit-td', function(e) {
e.preventDefault();
//do some page specific stuff
myPlugin.edit( $(this) ); //call the edit returned function
}),
done: $(this).on('click', '.done-td', function(e) {
e.preventDefault();
//do some page specific stuff
myPlugin.done( $(this) ); //call the done returned function
});
});
});
This works great for the most part, however, what i really want is have functions called from inside my plugin every time a specific callback is triggered - without the need to call from outside the plugin.
I have tried including delegated events in my plugin:
$(this).on('click', '.edit-td', function(e) {
e.preventDefault();
$(this).closest('#myParent').find('#myInput').autosizeInput();
});
$(this).on('click', '.done-td', function(e) {
e.preventDefault();
$(this).closest('tr').find('td').not('.not').each(function(i) {
//do some things
});
});
But when the .edit-td is triggered it propagates and triggers the .done-td event, if i put e.stopPropagation() in the edit-td function (because it has been delegated) edit-td stops firing completely.
And non-delegated method:
$(this).find('.done-td').click(function(e, this) {});
But I can't parse the returned object (this) to the internal function before the internal function has completed. (just comes up undefined or missing formal parameter).
*Skip to here
To avoid the question becoming to localised -
I need to have functions called from inside my
plugin every time a specific callback is triggered.
Without calling it using closures
Something like:
if( $.fn.myPlugin.callback().is('edit') ) {
//fire function
}
I needed to return a function(s) like so:
return {
enable: function(arg) {
//do something
},
disable: function(arg) {
//do something
}
}
That way I can call it from inside my plugin by referencing itself like this:
this.myPlugin().disable();