We Keep Coding

ContextMenuItem context function is not executing

I want my context menu item to be visible only if the clicked node is a link i.e. and href is either a magnet link or a torrent link. But item is visible for all the links because context function is not executing, can anybody help why context function is not executing?
Here is the code:
exports.main = function() {
var cm = require("sdk/context-menu");
var contextCode = ' self.on("context", function (node) { '+
' while(node.nodeName!="A") { node = node.parentNode; } '+
' var pat_magnet = /^magnet:/i; ' +
' var pat_torrent = /.torrent$/i; ' +
' if(pat_torrent.test(node.href) || pat_magnet.test(node.href)) { return true; } '+
' else { return false; } '+
' }); ';
var clickCode = ' self.on("click", function(node,data){ '+
' while(node.nodeName!="A") { node = node.parentNode; } '+
' var pat_hash = /[0-9abcdef]{32,40}/i; ' +
' var result = node.href.match(pat_hash); '+
' var hash = "" '
' if(result != null) { hash=result[0]; } '+
' var xhr = new XMLHttpRequest(); '+
' if(hash != "") { '+
' var apiCall = "https://www.furk.net/api/dl/add?api_key=*************&info_hash="+hash; '+
' } '+
' else{ '+
' var apiCall = "https://www.furk.net/api/dl/add?api_key=*************&url="+encodeURI(node.href); '+
' } '+
' xhr.open("GET",apiCall,true); '+
' xhr.onreadystatechange = function(){ if(xhr.readyState = 4) { if (xhr.response.status = "ok") { alert("Torrent added to Furk."); } else { alert("Torrent could not be added to Furk."); } } } '+
' xhr.send(null); '+
' });';
cm.Item({
label: "Add to Furk",
context: cm.SelectorContext("a[href]"),
contentScript: contextCode + clickCode
});
};

Please always post self-containied examples that can be directly tried in the future.
Now back to your problem: The content script actually has a syntax error.
The following line:
' var pat_torrent = /.torrent$/i ' +
lacks a semicolon, and should be:
' var pat_torrent = /.torrent$/i; ' +
The reason automatic semicolon insertion (ASI) does not work here is: The "code" is actually a string that has no newlines in it whatsoever. If there were newlines, then ASI would have worked.
Anway, another reason not to have complex content script inline. Have a look at contentScriptFile.
This error is actually logged, but the presentation sucks. In the Browser Console:
[20:57:51.707] [object Error] (expandable)
In terminal:
console.error: context-magnet:
Message: SyntaxError: missing ; before statement
Here is a fixed, reproducible sample:
var cm = require("sdk/context-menu");
var contextCode = ' self.on("context", function (node) { '+
' while(node.nodeName!="A") { node = node.parentNode; } '+
' var pat_magnet = /^magnet:/i; ' +
' var pat_torrent = /.torrent$/i; ' +
' if(pat_torrent.test(node.href) || pat_magnet.test(node.href)) { return true; } '+
' else { return false; } '+
' }); ';
cm.Item({
label: "magnet test",
context: cm.SelectorContext("a[href]"),
contentScript: contextCode
});
Edit ' var hash = "" ' has the same problem, and there are might be other such errors that I missed skimming this new code.
As I already said, please use contentScriptFile and not contentScript for long-ish scripts.
Another edit
Here is a builder using contentScriptFile, where I also fixed a couple of other errors, the most important of which are:
Use permissions so that the XHR will work.
Correctly set up the XHR to use responseType and overrideMimeType().
Use onload/onerror instead of onreadystatechange.

jQuery "Unexpected token ILLEGAL"

I have two functions, that are for showing and hiding elements by class:
if (typeof showClass != 'function') {
function showClass(trClass, buttonId, hideMessage, showMessage) {
var button = '#' + buttonId;
var value = hideMessage;
$(button).attr("value", value);
$(button).attr("onclick", "hideClass('" + trClass + "', '" + buttonId + "', '" + showMessage + "', '" + hideMessage + ");");
var classToShow = '.' + trClass;
$(classToShow).css('visibility', 'visible');
}
}
if (typeof hideClass != 'function') {
function hideClass(trClass, buttonId, showMessage, hideMessage) {
var button = '#' + buttonId;
var value = showMessage;
$(button).attr("value", value);
$(button).attr("onclick", "showClass('" + trClass + "', '" + buttonId + "', '" + hideMessage + "', '" + showMessage + ");");
var classToHide = '.' + trClass;
$(classToHide).css('visibility', 'hidden');
}
}
showClass works as excepted, but hideClass causes error "Unexpected token ILLEGAL" in Chrome. With FireFox I don't get any errors, but the function doesn't work with either of the browsers. I tried with different editors to find some illegal characters etc., but no luck. What could be the cause for this?

You're apparently trying to set up a toggling button, but it's the most convoluted mess of jQuery and inline event handlers I've ever seen.
Try this:
function setupToggle(trigger, target, hideMessage, showMessage) {
var state = false; // true means button says "show", target is hidden
var $el = $(trigger);
function update() {
$el.attr('value', state ? showMessage : hideMessage);
$(target).css('visibility', state ? 'hidden' : 'visible');
}
update(); // set initial state
$el.on('click', function() {
state = !state; // on click, flick state and refresh
update();
});
}
usage:
setupToggle('#mybutton', '.mytr', 'Hide it', 'Show it');
The code above may require minor tweaks depending on whether the default state is "hidden" or "shown".

Submit can't see return false;

I know that I must add return false; to function called in onsubmit (I added it to function and onsubmit="" in HTML). But it doesn't work... Page freshing after pressing Enter or clicking submit button.
JavaScript generated forms:
AnswersHTML += "<div><form onsubmit='cheking(this," + a + "," + b + ", this); return false;'><input class='put' type='text' size='40'><input type='submit' value='Проверить'></form>
and function
function checking(answer, nums, numq, what) {
var usr = answer;
if (isNaN(answer)) {
usr = answer.value;
if (answer.value.length == "") {
usr = "Вы ничего не ввели!"
}
else {
answer = answer.value.toLowerCase();
}
}
if (answer == correct[nums][numq]) {
$(what).parent().parent().append("<br><span class='right'>Ответ: " + usr + "<br>Правильно!</span>").slideDown();
$(what).parent().parent().find(".put").remove();
$("#board").animate({ backgroundColor: '#2ecc71'});
$("#board").animate({ backgroundColor: '#f1c40f'}, 1000);
if (isPhysics[nums][numq]) {
physics++;
$("#presult").text(physics);
}
else {
life++;
$("#lresult").text(life);
}
}
else {
$("#board").animate({ backgroundColor: '#e74c3c'});
$("#board").animate({ backgroundColor: '#f1c40f'}, 1000);
var desciptionToWrong = "<br>" + description[nums][numq];
if (description[nums][numq] == false) {
desciptionToWrong = ""
}
$(what).parent().parent().append("<br><span class='wrong'>Ответ: " + usr + "<br>Неправильно!" + desciptionToWrong + "</span>")
$(what).parent().parent().find(".put").remove();
$(what).remove(".pressenter");
}
return false;
}
Sorry for my possibly disgusting code
Here's the full page https://rawgithub.com/ruslankh/Kurchatovy/master/index.html
Problem in function because when I'm replaced function to just alert, it was fine

Its probably due to type. You have wrong spelling in function call that would cause an error and call goes to server.
Change
'cheking(this," + a + "," + b + ", this);
To
'checking(this," + a + "," + b + ", this);

Your inline onclick has a typo, you left one of the c's out of the function name. This error likely terminates the click handler before it gets as far as the return statement.

Try this,
AnswersHTML += "<div><form data-a='"+a+"' data-b='"+b+"' class='myform'><input class='put... "
SCRIPT
$(function(){
$(document).on('submit','form.myform',function(){
checking(this, $(this).data('a'), $(this).data('b'), this);
return false;
});
});

jquery click does not work

Anyone have an idea why my jQuery click won't work?
It's attached to a hyperlink.
jQuery(function ($) {
$(".delete").click(function(e) {
alert("Hello");
});
var socket = io.connect();
var $messageForm = $('#sendmessage');
var $messageTitle = $('#title');
var $messageBox = $('#message');
var $chat = $('#chat');
$messageForm.click(function (e) {
if ($.trim($("#title").val()).length === 0) {
alert('You must provide valid input');
$messageTitle.val('');
$messageBox.val('');
return false;
}
if ($.trim($("#message").val()).length === 0) {
alert('You must provide valid input');
$messageTitle.val('');
$messageBox.val('');
return false;
} else {
e.preventDefault();
socket.emit('send message',
'<b>' + $messageTitle.val() + '</b>' + ' - '
+ $messageBox.val() + ' ' + '[' +
'<a class="delete" href="#">Delete</a>' + ']');
$messageTitle.val('');
$messageBox.val('');
}
});
socket.on('new message', function (data) {
$chat.prepend(data + "<br/>");
});
});

Since the delete links are dynamically generated, you need to use event delegation:
$('#chat').on('click', '.delete', function(e) {
alert("Hello");
});

Hello try to modify your jquery initialization like this:
(function($){ }(jQuery)
If your script still doesn't fire the click event, check if $messageForm exists, using console.log($messageForm). You can modify var $messageForm in var messageForm from what I seen that variable does not need a scope so wide. I hope this could help you

Out of order execution - no Ajax involved

I'm experiencing some out-of-order execution in javascript, and it's not related to any ajax calls or such. The main bulk of code is a possibly slow DOM manipulation, followed by a method call. In every single case, the function call is being fired before the DOM manipulation finishes.
Here is my code:
$(this).parents('dd').siblings('dd').each(function(){
var filter_name = $(this).attr('data-filter-type');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected', function(){
if ($(this).hasClass('date')) {
$('form[name="filter-form"] input[name="from"]').remove();
$('form[name="filter-form"] input[name="to"]').remove();
} else {
$('form[name="filter-form"] input[name="' + filter_name + '"]').remove();
}
console.log('removed');
});
}
});
var filter_type = $(this).parents('dd').attr('data-filter-type');
var filter_input = 'form[name="filter-form"] input[name="' + filter_type + '"]';
if ($(filter_input).length > 0) {
$(filter_input).val(filter_value);
} else {
$('form[name="filter-form"]').append('<input type="hidden" name="' + filter_type + '" value="true">');
}
doStuff($(this));
In my console, I am seeing the result of doStuff before I am seeing the debug.
Anybody have any ideas how to make the function call wait?

There is an overload of .removeClass that takes a function, but it's not a callback function (that operation is completed synchronously). I'd recommend removing the function argument to removeClass and placing the code immediately after that call:
$(this).parents('dd').siblings('dd').each(function(){
var filter_name = $(this).attr('data-filter-type');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
if ($(this).hasClass('date')) {
$('form[name="filter-form"] input[name="from"]').remove();
$('form[name="filter-form"] input[name="to"]').remove();
} else {
$('form[name="filter-form"] input[name="' + filter_name + '"]').remove();
}
console.log('removed');
}
});
var filter_type = $(this).parents('dd').attr('data-filter-type');
var filter_input = 'form[name="filter-form"] input[name="' + filter_type + '"]';
if ($(filter_input).length > 0) {
$(filter_input).val(filter_value);
} else {
$('form[name="filter-form"]').append('<input type="hidden" name="' + filter_type + '" value="true">');
}
doStuff($(this));

I would wrap all your DOM manipulation into a function accepting callback as a parameter:
var manipulateDOM = function(callback){
...
if(typeof callback === "function")callback();
}
and call it like this:
manipulateDOM(function(){
doStuff(param);//I am not sure about the context so you need to figure out the value of param
})