Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

necrotic: Aug 2, 2005; I owe my brother big time for this!

You can also use the actual debugger and break at the entry point and really step through. If you wanted to break in the success callback you'd have to add another one there, too.

You can break in code with debugger and the console open. Works pretty well.

# ? Aug 16, 2016 03:48

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 11:31

ZombieSnot: Jan 2, 2011; Entrenched in nutritious rotting flesh.

So I am picking back up with Javascript for the first time since my intro to CS high school course 10 years ago. I am interested in writing a fairly basic launchpad page for co-workers that just contains some nicely formatted tables containing most often used links and resources. Pretty easy stuff, however I would like to fancy it up just a bit by allowing the end-user (co-workers) to be able to click an "Add Link" button and then add their own custom links to the current list of links. Can anyone point me in the starting direction on how to proceed with implementing this?

# ? Aug 16, 2016 18:53

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

ZombieSnot posted:

So I am picking back up with Javascript for the first time since my intro to CS high school course 10 years ago. I am interested in writing a fairly basic launchpad page for co-workers that just contains some nicely formatted tables containing most often used links and resources. Pretty easy stuff, however I would like to fancy it up just a bit by allowing the end-user (co-workers) to be able to click an "Add Link" button and then add their own custom links to the current list of links. Can anyone point me in the starting direction on how to proceed with implementing this?

Your issue isn't really with JavaScript then, what you need is a backend server to store the link data and allow people to update it. However, this is probably better done with a standard Wiki page or something, where users can edit an article. Making a custom backend and UI for this feels way overkill.

# ? Aug 16, 2016 19:23

ZombieSnot: Jan 2, 2011; Entrenched in nutritious rotting flesh.

Skandranon posted:

Your issue isn't really with JavaScript then, what you need is a backend server to store the link data and allow people to update it. However, this is probably better done with a standard Wiki page or something, where users can edit an article. Making a custom backend and UI for this feels way overkill.

I get what you're saying. It probably would be to much for a basic project like this. Thanks for the help.

# ? Aug 16, 2016 19:30

The Fool: Oct 16, 2003

ZombieSnot posted:

I get what you're saying. It probably would be to much for a basic project like this. Thanks for the help.

Actually, for a learning experience a basic project like that is pretty much perfect. It would be a good introduction to Node + Express + SQLite. But for something user facing, you would have fewer problems and take less time setting up a Wiki or CMS.

# ? Aug 16, 2016 19:45

Bob Morales: Aug 18, 2006; ~~Just wear the fucking mask, Bob~~

I don't care how many people I probably infected with COVID-19 while refusing to wear a mask, my comfort is far more important than the health and safety of everyone around me!

ZombieSnot posted:

So I am picking back up with Javascript for the first time since my intro to CS high school course 10 years ago. I am interested in writing a fairly basic launchpad page for co-workers that just contains some nicely formatted tables containing most often used links and resources. Pretty easy stuff, however I would like to fancy it up just a bit by allowing the end-user (co-workers) to be able to click an "Add Link" button and then add their own custom links to the current list of links. Can anyone point me in the starting direction on how to proceed with implementing this?

There are ton of 'todo list' tutorials out there. Instead of storing 'todos' you're storing URL's

As an added bonus you can now use node.js (which is just javascript) for the server-side stuff instead of another language like php/python/ruby (not that there's anything wrong with that)

https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular

# ? Aug 16, 2016 19:53

ZombieSnot: Jan 2, 2011; Entrenched in nutritious rotting flesh.

Bob Morales posted:

There are ton of 'todo list' tutorials out there. Instead of storing 'todos' you're storing URL's

As an added bonus you can now use node.js (which is just javascript) for the server-side stuff instead of another language like php/python/ruby (not that there's anything wrong with that)

https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular

Thanks guys. Really appreciate the tips. I will be looking into these suggestions.

# ? Aug 16, 2016 20:38

ROFLburger: Jan 12, 2006

What is going on with the Immutable JS docs? What documentation notation is this? Some combination of JavaDocs and hieroglyphics?

# ? Aug 17, 2016 00:10

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

It's just type signatures, because it is type safe, having been written in Typescript.

has(key: number): boolean

This is a method called 'has which takes one argument (a number) and returns a Boolean.

get(key: number, notSetValue?: T): T

This method called 'get' takes two arguments, a number and a T. T is a type alias which means any type as long as it's the same as other instances of T in this signature. So notSetValue (which is optional due to the ?) should always be the same as the return value.

toIndexedSeq(): Seq.Indexed<T>

This method called 'toIndexedSeq' returns a Seq.Indexed that contains a type of T. Because this is a method of type List<T>, T will be the same when you use this method.

There's more to it than that, but basically type signatures are just a formal way of describing what a function accepts and returns, and once you get used to them they're really good documentation.

# ? Aug 17, 2016 00:32

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Maluco Marinero posted:

There's more to it than that, but basically type signatures are just a formal way of describing what a function accepts and returns, and once you get used to them they're really good documentation.

Also the reason I use typing, aka PEP-484, annotations in my python code even if I'm not using mypy or other static typing checkers. It's just good documentation. It doesn't take long to become used to reading them there or in js.

# ? Aug 17, 2016 01:11

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

ZombieSnot posted:

So I am picking back up with Javascript for the first time since my intro to CS high school course 10 years ago. I am interested in writing a fairly basic launchpad page for co-workers that just contains some nicely formatted tables containing most often used links and resources. Pretty easy stuff, however I would like to fancy it up just a bit by allowing the end-user (co-workers) to be able to click an "Add Link" button and then add their own custom links to the current list of links. Can anyone point me in the starting direction on how to proceed with implementing this?

Check out Firebase. It's sort of like a client-side database with built-in support for user authentication and very easy to use (and free!)

# ? Aug 17, 2016 02:57

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Anony Mouse posted:

Check out Firebase. It's sort of like a client-side database with built-in support for user authentication and very easy to use (and free!)

It is, however, hosted in the cloud, so you can't deploy it only on your network. Other than that, Firebase is really cool.

# ? Aug 17, 2016 02:57

Portland Sucks: Dec 21, 2004; à¼¼ ã¤ â_â à¼½ã¤

Portland Sucks posted:

I've been trying out different SO solutions and trying to teach myself this stuff along the way, but this seems like it should work and I think I'm just missing something trivial?

I'm selling a stupid knife on a single page using a paypal button to handle the commerce stuff. I want to run my own php script to grab form data and send it off to mysql database before the buttons posts so I'm attempting to use ajax as a handler.

My Ajax looks like this
code:
<head>
    <script>
        function ajaxRequest() {
                $.ajax({
                    type: 'post',
                    url: 'insert.php',
                    data: $("#payment").serialize(),

                    success: function () {
                        return true;
                    }
                });
            };
    </script>
    <meta charset="UTF-8">
    <title>Buy this drat knife.</title>
</head>
and my HTML looks like this
code:
<form action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return ajaxRequest()" name="payment" method="POST" id="payment" target="_top" >
...
forms
...
<td><input value="Submit" type="submit" name="submit" alt="PayPal - The safer, easier way to pay online!"/></td>
The way it is it seems to be posting straight to paypal and ignoring my ajax function. I know that insert.php works because if I swap the form's action for that link then the html data gets posted and a new record is inserted into my database. Why does my ajax suck?

Sorry to be a pest, but I'm back with this same problem that remains unresolved and is rapidly become a pain in the rear end. Any other JS/Ajax gods around here that can lend a hand?

# ? Aug 19, 2016 03:57

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Portland Sucks posted:

Sorry to be a pest, but I'm back with this same problem that remains unresolved and is rapidly become a pain in the rear end. Any other JS/Ajax gods around here that can lend a hand?

None of your code prevents the default behaviour so it'll just post like normal. Not commonly done but if your ajaxRequest function returns false it should cancel the default event. You could also properly add an event listener and use e.preventDefault. https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

# ? Aug 19, 2016 04:18

obstipator: Nov 8, 2009; by FactsAreUseless

I think some of the confusion is from the return true inside the success function. Ajax is asynchronous which is a wonderful topic that confuses everyone. When ajaxRequest() runs, it sends of the $.ajax request and while that's running, continues through to the next part of code, effectively creating 2 branches of code running at the same time. The ajaxRequest() is actually completed running and returns the default return value of undefined while the $.ajax is still running; ajaxRequest() can only return undefined in this example. And when that undefined gets returned: the onsubmit sees that its done with the function and thinks its ready to submit for real, even though the $.ajax might still be in progress.

I would give some example code that may help but im on phone

# ? Aug 19, 2016 12:26

geeves: Sep 16, 2004

Portland Sucks posted:

Sorry to be a pest, but I'm back with this same problem that remains unresolved and is rapidly become a pain in the rear end. Any other JS/Ajax gods around here that can lend a hand?

My version worked. Try it yourself. You should get a few Alert dialogs then you'll be redirected to Paypal. http://plnkr.co/edit/Cpfsy5tn3gdhajTorcON

# ? Aug 19, 2016 13:08

Thots and Prayers: Jul 13, 2006; A is the for the atrocious abominated acts that YOu committed. A is also for ass-i-nine, eight, seven, and six.

B, b, b - b is for your belligerent, bitchy, bottomless state of affairs, but why?

C is for the cantankerous condition of our character, you have no cut-out.; Grimey Drawer

obstipator posted:

I think some of the confusion is from the return true inside the success function. Ajax is asynchronous which is a wonderful topic that confuses everyone. When ajaxRequest() runs, it sends of the $.ajax request and while that's running, continues through to the next part of code, effectively creating 2 branches of code running at the same time. The ajaxRequest() is actually completed running and returns the default return value of undefined while the $.ajax is still running; ajaxRequest() can only return undefined in this example. And when that undefined gets returned: the onsubmit sees that its done with the function and thinks its ready to submit for real, even though the $.ajax might still be in progress.

I agree with this.

# ? Aug 19, 2016 14:09

necrotic: Aug 2, 2005; I owe my brother big time for this!

Agreeing with facts is a good way to get ahead in life.

# ? Aug 19, 2016 17:03

Strong Sauce: Jul 2, 2003; You know I am not really your father.

Does returning undefined cause an onsubmit to fail (e.g. not submit)? Seems really weird that we're trying to make a return there for a function that never returns an actual value.

# ? Aug 20, 2016 19:19

There Will Be Penalty: May 18, 2002; Makes a great pet!

Strong Sauce posted:

Does returning undefined cause an onsubmit to fail (e.g. not submit)?

No. You have to return false.

EDIT: returning undefined is the same as not returning a value at all. (All JavaScript functions return a value, really. If you don't specify one, they return undefined.)

# ? Aug 21, 2016 06:33

Strong Sauce: Jul 2, 2003; You know I am not really your father.

There Will Be Penalty posted:

No. You have to return false.

EDIT: returning undefined is the same as not returning a value at all. (All JavaScript functions return a value, really. If you don't specify one, they return undefined.)

yeah didn't know if returning undefined also stops events from running as well, although i guess thinking about it for a minute, it wouldn't make much sense.

# ? Aug 21, 2016 08:26

Portland Sucks: Dec 21, 2004; à¼¼ ã¤ â_â à¼½ã¤

geeves posted:

My version worked. Try it yourself. You should get a few Alert dialogs then you'll be redirected to Paypal. http://plnkr.co/edit/Cpfsy5tn3gdhajTorcON

oh god drat you are amazing. thank you so much.

# ? Aug 24, 2016 01:28

Methanar: Sep 26, 2013; by the sex ghost

edit

I think I figured it out.

Methanar fucked around with this message at 23:02 on Aug 29, 2016

# ? Aug 29, 2016 21:15

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Is there an easy way of detecting when external images on SA fail to load?

I use https on the forums and I want to make a greasemonkey script that replaces images that failed to load (over http) with links that I can open in a new tab.

My first easy method, as always, is to use brure force and polling. Just check the images every few seconds and after some arbitrary timeout decide that it failed to load. But that's fragile as gently caress.

Wheany fucked around with this message at 08:39 on Sep 1, 2016

# ? Sep 1, 2016 08:36

Impotence: Nov 8, 2010; Lipstick Apathy

# ? Sep 1, 2016 13:38

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Wheany posted:

Is there an easy way of detecting when external images on SA fail to load?

I use https on the forums and I want to make a greasemonkey script that replaces images that failed to load (over http) with links that I can open in a new tab.

My first easy method, as always, is to use brure force and polling. Just check the images every few seconds and after some arbitrary timeout decide that it failed to load. But that's fragile as gently caress.

Please share when you're done

# ? Sep 1, 2016 18:55

geeves: Sep 16, 2004

Wheany posted:

Is there an easy way of detecting when external images on SA fail to load?

I use https on the forums and I want to make a greasemonkey script that replaces images that failed to load (over http) with links that I can open in a new tab.

My first easy method, as always, is to use brure force and polling. Just check the images every few seconds and after some arbitrary timeout decide that it failed to load. But that's fragile as gently caress.

Not tested and probably could be a better solution, but something like:

code:

(function (window, document) {
    function getImages(images) {
        for (var j = 0; j < images.length; j++) {
            var img = new Image();
            img.onerror = imageError(img);
            img.src = images[j].src;
        }
    }

    function imageError(image) {
        console.error(image.src + " NOT FOUND");
    }


    function testImages() {
        var posts = document.getElementsByClassName("postbody");

        for (var i = 0; i < posts.length; i++) {
            var images = posts[i].getElementsByTagName("img");
            getImages(images);
        }
    }

    document.addEventListener("load", testImages, false);
}(window, document));

I already have an SA greasemonkey script that I use, so I'll test this more later dropping it into that and delving into the archives where there are lots of broken images.

# ? Sep 1, 2016 19:24

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

This is the one I made that seems to work.

JavaScript code:

// ==UserScript==
// @name        SA: Change failed images to links
// @namespace   a
// @include     [url]https://forums.somethingawful.com/showthread.php*[/url]
// @version     1
// @grant       none
// ==/UserScript==

const errorHandler = function (event) {
	const a = document.createElement('a');
	a.href = event.target.src;
	a.style.color='magenta';
	a.style.fontWeight='bold';
	a.textContent = event.target.src;
	event.target.parentNode.insertBefore(a, event.target);
};

Array.from(document.querySelectorAll('.postbody img')).forEach((img)=> img.addEventListener('error', errorHandler));

~~edit: I guess the selector could be more specific.~~
edit2: The styling is perfect, though.

Wheany fucked around with this message at 06:33 on Sep 2, 2016

# ? Sep 1, 2016 20:20

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

More of a style question, but is there a reason to use addEventListener instead of .onerror these days? I used to do the former and then realized that it's very extremely rare I would ever want more than one handler, and even if I want multiple things to happen when an event happens, I probably want explicit control over the ordering and just having a single function call both effects in a row is the cleanest and simplest approach.

# ? Sep 1, 2016 20:58

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Suspicious Dish posted:

More of a style question, but is there a reason to use addEventListener instead of .onerror these days? I used to do the former and then realized that it's very extremely rare I would ever want more than one handler, and even if I want multiple things to happen when an event happens, I probably want explicit control over the ordering and just having a single function call both effects in a row is the cleanest and simplest approach.

I mostly work with other people and can't know for sure that assigning the property directly is and always will be safe, so the way to make sure it's not an issue is mandating people use addEventListener (or one of the jQuery methods because it's probably there and less verbose) and have the linter flag use of the property as a warning or error because trusting other devs a good way to add stress to your life.

# ? Sep 1, 2016 21:04

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Wheany posted:

I thought it would be more painful than this because I don't trust DOM events. :tinfoil:

# ? Sep 2, 2016 06:32

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Munkeymon posted:

I mostly work with other people and can't know for sure that assigning the property directly is and always will be safe, so the way to make sure it's not an issue is mandating people use addEventListener (or one of the jQuery methods because it's probably there and less verbose) and have the linter flag use of the property as a warning or error because trusting other devs a good way to add stress to your life.

If there's already another handler, do you trust them not calling event.stopImmediatePropagation(); or that if there are multiple behaviors, they're handled in the right order? I'd say that having random undefined event handlers run in undefined orders is going to cause a bug?

# ? Sep 2, 2016 06:55

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Suspicious Dish posted:

If there's already another handler, do you trust them not calling event.stopImmediatePropagation(); or that if there are multiple behaviors, they're handled in the right order? I'd say that having random undefined event handlers run in undefined orders is going to cause a bug?

That's a good point about stopImmediatePropagation, but I'd be more surprised to see it used without a very good reason than I would to see someone accidentally stomp on other events using the property assignment. Thinking about it further, this seems more of a concern when adding big catchall handlers to body, which is something I don't like to do or see done, anyway, because I think a handler should be as close to a DOM leaf as possible.

If the handler someone else is adding is so disjoint (I guess?) in function and code location that they don't find a pre-existing handler and add to it, it seems unlikely that their code is going to conflict, but I have to admit you're making a good case for mandating a single handlers, especially as you get closer to the root.

# ? Sep 2, 2016 15:19

stoops: Jun 11, 2001

I'm using datatables.net to show tabular data and it works fine.

On one of the columns, I have a link that calls an ajax function. I use javascript to show a "spinner" as the function is being processed. The link works, but the spinner doesn't show up. I'm assuming it has to do with datatables not rendering my script possibly? Is there anything I can try to make it work? (When I take off datatables off my table, the link works with the spinner.)

Thanks for any help.

# ? Sep 2, 2016 15:50

TimWinter: Mar 30, 2015; https://timsthebomb.com

So it seems to be less in vogue these days, but the cool web dev houses all had a nice animated background video with a filter on it. Are there any tricks to setting something like this up, and any gotchas for making it reasonably responsive?

I'm thinking like this:

http://www.push10.com/

Edit: searching through web design firms, it's apparently still quite popular.

TimWinter fucked around with this message at 19:47 on Sep 3, 2016

# ? Sep 3, 2016 19:44

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

TimWinter posted:

So it seems to be less in vogue these days, but the cool web dev houses all had a nice animated background video with a filter on it. Are there any tricks to setting something like this up, and any gotchas for making it reasonably responsive?

I'm thinking like this:

http://www.push10.com/

Edit: searching through web design firms, it's apparently still quite popular.

There's not really much going on there. It's just using an absolutely positioned video tag which is playing a WebM file, with the rest of the website positioned over top.

# ? Sep 3, 2016 21:28

darthbob88: Oct 13, 2011; YOSPOS

This feels like a stupid question, but I want to run multiple AJAX queries, each with their own success handler and each independent of the others, and then some other code that relies on the result of all those queries. That'd be just promises, yes?

code:

var promiseFoo = $.ajax("api/foo"); var promiseBar = $.ajax("api/bar");var promiseBaz = $.ajax("api/baz");
$.when(promiseFoo, promiseBar, promiseBaz).done(doAThing());

Never used them before, want to make sure I'm not going to shoot myself in the foot.

# ? Sep 7, 2016 00:53

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Yep, that's exactly what promises are for, codifying the sequencing of asynchronous actions using a common interface. Looks like jquery's when will fail if any of them fail (as it should), so make sure you handle that correctly:

code:

var promiseFoo = $.ajax("api/foo");
var promiseBar = $.ajax("api/bar");
var promiseBaz = $.ajax("api/baz");

$.when(promiseFoo, promiseBar, promiseBaz).done(doAThing).fail(recoverFromThing);

// or

$.when(promiseFoo, promiseBar, promiseBaz).then(doAThing, recoverFromThing);

Note that the function given to done/fail/then SHOULD NOT BE invoked, ie 'doAThing' rather than 'doAThing()'

# ? Sep 7, 2016 02:17

ufarn: May 30, 2009

Thinking of saying gently caress it and going with Standard (npm install standard). Anyone run into any issues or edge cases that soured them on using it?

# ? Sep 16, 2016 23:15

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 11:31

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

ufarn posted:

Thinking of saying gently caress it and going with Standard (npm install standard). Anyone run into any issues or edge cases that soured them on using it?

It's good to have a linter setup and enforcing a code style can be useful but I think their stance on semicolons is dumb. As long as you don't mind the rules they set I don't think you'll have any issues though.

# ? Sep 18, 2016 16:23

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »