jQuery SO Vote-Object and Scope - javascript

This is a javascript question. The fact that it mentions this website is irrelevant. This does not belong on meta.
I'm working on a Greasemonkey script to auto-load additional pages of answers onto the first page of answers here at Stackoverflow as you scroll. This is working well. I want to maintain the ability to up-vote/down-vote the loaded items, so I'm using $.live(), which is also working fine.
My problem is that the vote-object, used by SO, is not found within the scope of the $.live() method, or atleast I think that is the problem.
$(".vote-up").live("click", function(D){
vote.up($(D.target));
});
$.get("/questions/1151074", function(data){
$("div.answer", data).insertAfter(".answer:last");
});
That's bit of sample code you can paste into your firebug console to test. You can see that vote, in the context of the .live() call is not accessible. How can I fix this?

Try unsafeWindow.vote.up().
See the docs. It's a security measure of sorts. Annoying when you forget though.

Related

javascript scratchblocks squarespace

I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.

interact.js drag/drop referencing div

So, this is maybe just a question for interact.js users or I am missing something completely..
I was looking for a javascript library that provides me with drag/drop/scale/rotate and touch functionality for all those given functionalities. So, I stumbled upon interact.js, yet I seem to have a problem referencing elements while using the onDrop method:
I'll just take the code of the interact.js page, which I'm providing you here: http://jsfiddle.net/Zyy2N/2/
The part that is making problems is:
$(event.relatedTarget.id).hide();
which doesn't do anything, yet also doesn't throw any errors. More so:
$('#yes-drop').hide();
works, so does:
console.log(event.relatedTarget.id);
which returns the id as expected. Is this an error?
Solution: One should actually use the correct syntax if one wants code to run correctly...
$('#'+event.relatedTarget.id).hide();
This would actually be a correct and working solution :
http://jsfiddle.net/Zyy2N/3/
Sligthly better:
$(event.relatedTarget).hide();
http://jsfiddle.net/Zyy2N/8/

Primefaces - Datatable Widget for var ... not available

I am using primefaces 4.0 and jsf 2.2 in my Application. I have created a page where a datatable is nested in a tabview. Now when I want to filter the datatable, it keeps loading and doesn't how a result.
After some time i recognized, that javascript throws the following error: "Widget for var 'test' not available! ".
I guess this should be the issue, but what's the problem or how can i solve this? Does anyone have an idea?
Best Regards!
I am posting my answer here hopefully can help some people out there.
I have the same problem. My case is I want to perform the default filter for my <p:dataTable>, thus, I have to perform the PF('dtWidgetVar').filter(); script in javascript when page load.
This is my initial attemp:
$(document).ready(function()
{
PF('dtWidgetVar').filter();
});
It looks perfectly fine, but just doesn't work. Until I find the error in Chrome console Widget for var 'dtWidgetVar' not available!, and googling it for hours, finally I found this thread. Therefore I add a $(function(){}); to wrap my script as below:
$(document).ready(function()
{
$(function()
{
PF('dtWidgetVar').filter();
});
});
BOOM!, finally it works. From here as well as here both stating that the $(function(){}); and $(document).ready(function(){}); are actually the same, so I have also no clue why it works. I have also try to only use $(function(){}); but it doesn't work. Have to use both functions to make it works, at least in my case. But still, I hope this helps some humans! Sorry for my bad English.
In the absence of posted code it's impossible to say. However, there are a couple of things I can suggest to look for.
Check to see if you have a duplicate widget name in your view.
Obviously you wouldn't intuit that from the message you got, but I
recall in the past getting this same message for duplicate widget
names
Check to see if you have a component where you've given the widget var the same name as the ID. I've read that this is to be avoided.
A very common error is to conflate ids and widget names. That
is, you are trying to use an ID as a widget var
See what in your code is trying to reference "test"
I can't confirm this myself, but I've seen other StackOverflow posts that suggest this is a possible error when you have imported two copies of the jQuery library
I've experienced Widget for var '[widgetVar]' not available when using p:ajax update="#all" inside a p:commandButton. I could avoid the issue by putting content to be updated in a h:panelGroup which I referenced in update and put the element declaring widgetVar outside that panel group.

live code examples: cytoscape.js initialization -- incomplete?

Being brand new to cytoscape.js, I may be missing something obvious. Please forgive me if that is so.
I am studying the first example offered here:
reached from this page
Three files are offered -- HTML, CSS, JavaScript -- along with the impression that these three will, when loaded into my browser, create a running example.
But the HTML seems to be incomplete, possibly in two ways:
the JavaScript on the jsbin page needs to be included via a script tag
the variable cy is not defined anywhere that I can see, leading to this error message in the console: Object #cy has no method cytoscape
A stack overflow search on that error message points back to the very fine cy.js documentation, but alas, I am still in the dark: where do I initialize the "cy" object?
And best of all, where can I find a complete working example, useful for such a raw beginner as myself, something I can pore over and study until I begin to grasp the logic of this style of programming, and make use of this very fine library?
Thanks!
Your first example is indeed a fully working example. Just use the menu to the top left. Choose File -> Download. This will download a single HTML-file, that works out of the box.
The file is called jsbin.ravecala.1.html. Open with
firefox jsbin.ravecala.1.html
(I also struggled a while before realizing this.)
I really don't know what's your JavaScript & jQuery knowledge level, but it seems you may need to practice it all a little.
Yes, if you're referring to the following tag:
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
This is indeed necessary, as it is the basis of cytoscape.js, the library itself, wich allows, for instance, add the method cytoscape to the variable #cy, as you mentioned in your second point.
The variable #cy is the div itself. jQuery refers to objects IDs this way, with #. So:
<div id="cy"></div>
Can be referred as $("#cy"). Wich adds the cytoscape function to it is the library itself.
I think that this live example is really good, although the one you linked is more basic and appropriate to get known with the basic structure and initialization of cytoscape.js. I suggest you to get known with jQuery (this course was really clear to me) and read the cytoscape.js documentation, which is full of rich examples.

How to make github style page transitions by pjax

Once a time, I read an article said that github page transition is made by pjax, I checked jquery-pjax project. I think I have close to the answer, it must be something related with event pjax:start and pjax:end, but I still can't get it works, so I try to get some help here.
$('a.pjax').pjax('#main');
$('#main').bind('pjax:start', function(){$('#main').slideUp()})
.bind('pjax:end'), function(){$('#main').slideDown()});
But it has no effects
Github use HTML5 features for the page transitions. That includes the new JS History API and CSS3 transitions. No jQuery involved except for standard event listening, selectors. The blog post is here with all the relevant links
https://github.com/blog/760-the-tree-slider
I don't know if this is relevant at all. But I've been using Pjax myself and the code above has a syntax error, should be:
$('a.pjax').pjax('#main');
$('#main').bind('pjax:start', function(){$('#main').slideUp()})
.bind('pjax:end', function(){$('#main').slideDown()});
Edit: Yes, sorry for not pointing that out. Exactly as #Udo Held said: You need to remove the bracket after 'pjax:end' or else it will not follow through and execute the $('#main').slideDown() function.
Pjax : Demo , Source[Github] It is the one that
github use.. reference

Categories