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.

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

JSON vs XML is mostly a question of which format represents your protocol data the best. If your map editor is about changing dots on a grid then that's probably a custom format that might be well-suited to JSON, but if your map editor is about adorning earth with notes then you may want to use a standard format such as KML (perhaps with a custom namespace for any custom data).

# ¿ Feb 3, 2009 01:45

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 14:00

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Sorry, I'm not that familiar with Prototype. It probably has some convenience methods for selecting nodes in an XML document but, yeah, I don't know.

If you want to bypass Prototype you can always rely on crappy old DOM interfaces. Practically every browser supports that.

If this only needs to be compatible with Firefox then try the E4X interfaces. They're really easy.

Or, abandon Prototype and move to JQuery because that has CSS selectors, XPath, DOM, applied to any document be it HTML or XML.

# ¿ Feb 4, 2009 06:44

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Baggy_Brad posted:

Or are they just scraping the page for form names/fields and then posting data to the form in a way that a dynamically generated captcha would be avoided anyway.

This, they usually don't run JavaScript (like search engine bots).

# ¿ Apr 5, 2011 10:11

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

You can use something like store.js as a wrapper around localStorage and cookies.

# ¿ Apr 7, 2011 04:03

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

bartkusa posted:

I don't actually know how to do that, but my jury-rigged solution would be to take all the data, convert it to JSON, and throw it at some JS string-compressing library I downloaded somewhere.

Unless you need hierarchy in your keys it's probably better to use &key=value url syntax like thathonkey says. jQuery has a method for serializing structures into urls,

http://api.jquery.com/jQuery.param/

After that, if the url is getting too long though then it might be better to have a url shortener that just redirects to that long-form url.

# ¿ Sep 13, 2012 01:16

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

You could use NPP, but it's got a DOM (rather than in PHP where bits outside PHP tags are just strings).

Looks like it hasn't been updated for 2 years though.

# ¿ Aug 21, 2013 01:34

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Reality posted:

You could put a listener on the table itself and see if the firing element is a button or if it's anything else.

Yeah I'd do this, also because it's more efficient using bubbling than attaching individual events when the table has lots of rows.

E.g. in jQuery (untested)

code:

!function ($) {
    "use strict";
    var init = function () {
        $("table").on("click", "button,input,tr", function (event) {
            var $target = $(event.target);
            if ($target.is("button, input")) {
                // was button
                event.stopPropagation();
            } else {
                //assume row, allow propagation
                doStuff();
            }
        });
    };
    $(document).ready(init);
}(jQuery)

N.Z.'s Champion fucked around with this message at 10:02 on Aug 22, 2013

# ¿ Aug 22, 2013 09:59

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

LP0 ON FIRE posted:

getBoundingClientRect [...] works okay in most browsers but Safari for iOS doesn't work correctly most of the time

That really should just work, so it sounds like some other bug. Did you add scroll position to the getBoundingClientRect().top?

code:

 document.body.scrollTop + document.documentElement.scrollTop + the_getBoundingClientRect_top_variable

I made a button effects thing that works on chrome/ff/android/iOS6/7 and it just does getBoundingClientRect with scroll position so maybe try taking that code.

N.Z.'s Champion fucked around with this message at 23:24 on Jul 15, 2014

# ¿ Jul 15, 2014 22:40

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

FateFree posted:

Is there a JQuery plugin that comes with cheap ajax capabilities for form submissions? What I really want to do is have a form that traditionally works without javascript and reloads the entire page, but if they have javascript I would love to just stick an id (or several) in a data attribute on the form that tells the plugin what content is going to be updated on the submit, and then basically it could just parse those ids, parse the html content out of the result, and update the sections of the page with results. The server is still going to do all the extra work of returning the entire page but to be honest the performance of that is fine.

Sounds a bit like PJAX forms,

http://stackoverflow.com/questions/30766466/submitting-form-with-pjax

(I haven't used it myself)

# ¿ Aug 8, 2016 22:04

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

afaik the plain JS way of doing $(document).on('change', selector, callback) can be done with matches,

code:

function on(eventType, selector, callback) {
  document.addEventListener(
    eventType,
    function(e){
        if (e.target.matches(selector)) {
          callback(e) // or maybe callback.bind(this)(e)
        }
    },
    false
  );
}

usage:

code:

on('change', 'p input[type=file]', function(e){ ... } );

# ¿ May 16, 2017 09:24

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Rockybar posted:

Took a few hours of head scratching but came up with this solution:
JavaScript code:
      if (JSON.stringify(data2) !== JSON.stringify(data)) {

Probably better to use a deep isEqual comparison function rather than comparing stringifying objects.

The potential issue is key order and how JSON.stringify({a: 1, b: 2}) !== JSON.stringify({b: 2, a: 1}). JSON.stringify won't sort/normalize the order of your keys. Before ES2015 most browsers used key insertion order, but since ES2015 key orders are more complicated.

So to avoid a weird confusing bug (eg refactoring that changes key insertion order) it's probably easier to use a deep equal comparison function.

# ¿ May 30, 2022 00:52

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Combat Pretzel posted:

How do you go about developing multiple interdependent modules at once?

# ¿ Jun 25, 2023 22:20

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Combat Pretzel posted:

So long I have the package directories set up in the workspaces section of root package.json, I can refer to the packages by version number instead of path in the dependencies sections where necessary, and npm does the rest?

Yep. Just make sure the version numbers are exactly same or else NPM won't find it and it will try to download it from NPMJS.com

docs...NPM or Yarn

# ¿ Jun 27, 2023 22:10

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

You could also use template strings which use the backtick ` char and ${ your variable or expression goes here } ... so something like,

code:

for ( let i = 0; i < 1000; i++ ) {
document.getElementById(`__input__button__addbutton__${i}`).click();
}

# ¿ Jul 11, 2023 02:44

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

huhu posted:

code:

t({�:"A",�:"A",�:"A",�:"A",�:"A",�:"A",�:"a",�:"a",�:"a",�:"a",�:"a",�:"a",�:"C",�:"c",�:"D",�:"d",�:"E",�:"E",�:"E"

what the heck is that object? Is its purpose to normalize characters?

It vaguely resembles the garbage you'd get when UTF-8 is parsed as extended ASCII / ISO-8859 text

# ¿ Sep 19, 2023 23:49

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Use Number.MAX_SAFE_INTEGER

# ¿ Oct 24, 2023 01:39

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

I don't know but many validators (eg Zod) have code schema -> TS without generating type files so for simple cases it seems possible to avoid it. Do you really need to generate type files?

# ¿ Mar 21, 2024 02:10

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

roomforthetuna posted:

I frequently want to make an element have a fixed aspect ratio and [otherwise] take up all the space available to it. (e.g. a square element in a wide rectangle should be square with equal height, centered, and in a tall rectangle should be a square with equal width, centered.)

If the element is an <img> or <canvas> etc you can use CSS object-fit to format it like a background image (contain, cover, etc.) to fit the container. Another approach is to size with a CSS unit that's the same horizontally and vertically (ie vw or vh but not both) so your code might look like <div style="width: 5vw; height: 5vw">...</div>. I'm guessing the hacky approaches you've found are those old padding-bottom-based approaches and yeah, I don't like those either.

# ¿ Apr 9, 2024 22:03

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 14:00

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Hmm could you combine the canvases? ie make a single composition canvas draw ctx.drawImage(otherCanvas);ctx.drawImage(anotherCanvas) in your requestAnimationFrame render loop, and dispatch events to offscreen/unmounted canvases

Then with a single canvas I'm guessing the sizing problem would be easier

# ¿ Apr 10, 2024 05:26

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