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 »

stoops: Jun 11, 2001

necrotic posted:

Which ie? Does ie even support inline functions like that map call?

IE 11

# ? Jul 20, 2016 16:39

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 08:04

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

stoops posted:

I have this jqplot graph script I'm using that works on chrome, but doesnt on IE.

I think I nailed the problem to this piece of code, and I thought maybe I can run it thru JSLint and figure it out, but I'm not sure about the Foreach errors, or the parseInt error.

Any help is appreciated
code:
function printTable(file) {

var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
var csv = event.target.result;
var studentData = $.csv.toArrays(csv);

for(var i = 0; i < studentData.length; ++i){
	studentData[i] = studentData[i].map(val => parseInt(val, 10));
}
callPlot(studentData);
};

reader.onerror = function(){ alert("Unable to read " + file.fileName); };
}

If you aren't using Babel or something else, that won't work in any browser except the most recent Crome. ES6 is not usable as-is right now. Transpile it or use ES5 code.

EDIT: some compatibility charts! https://kangax.github.io/compat-table/es6/

Lumpy fucked around with this message at 17:05 on Jul 20, 2016

# ? Jul 20, 2016 17:03

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

stoops posted:

I have this jqplot graph script I'm using that works on chrome, but doesnt on IE.

I think I nailed the problem to this piece of code, and I thought maybe I can run it thru JSLint and figure it out, but I'm not sure about the Foreach errors, or the parseInt error.

Any help is appreciated
code:
function printTable(file) {

var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
var csv = event.target.result;
var studentData = $.csv.toArrays(csv);

for(var i = 0; i < studentData.length; ++i){
	studentData[i] = studentData[i].map(val => parseInt(val, 10));
}
callPlot(studentData);
};

reader.onerror = function(){ alert("Unable to read " + file.fileName); };
}

You can also simply convert that lambda to

code:

studentData[i] = studentData[i].map( function(val) { return parseInt(val, 10); });

# ? Jul 20, 2016 17:58

stoops: Jun 11, 2001

I'll check out Babel, thanks for the recommendation.

Skandranon posted:

You can also simply convert that lambda to
code:
studentData[i] = studentData[i].map( function(val) { return parseInt(val, 10); });

Thanks, that worked!

# ? Jul 20, 2016 20:37

Depressing Box: Jun 27, 2010; Half-price sideshow.

When would you want to use reduceRight() instead of reduce()?

I can understand something like foldl vs. foldr in Haskell, where you could have an infinite list, but I didn't think that could really happen in JS, and otherwise it seems like they'd give you the same result (outside of doing something messy with implicit conversion).

# ? Jul 26, 2016 18:32

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

Depressing Box posted:

When would you want to use reduceRight() instead of reduce()?

and otherwise it seems like they'd give you the same result (outside of doing something messy with implicit conversion).

If you're doing a sum sure, but other mathematical operations would give you different values. Or as you mentioned, gross implicit conversions.

Also, javascript has generators now for infinite lists. Though I'm not sure if you can use reduceRight on those? I haven't really touched generators.

necrotic fucked around with this message at 21:36 on Jul 26, 2016

# ? Jul 26, 2016 21:33

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Depressing Box posted:

When would you want to use reduceRight() instead of reduce()?

I can understand something like foldl vs. foldr in Haskell, where you could have an infinite list, but I didn't think that could really happen in JS, and otherwise it seems like they'd give you the same result (outside of doing something messy with implicit conversion).

Having both at hand is very useful when performing functional composition to maintain the relationship between the conceptual model and the sequence of individual function steps

e: I'm phone posting so no example at hand but looking up how up how Redux middleware works behind the scenes may be enlightening.

ynohtna fucked around with this message at 21:56 on Jul 26, 2016

# ? Jul 26, 2016 21:48

Depressing Box: Jun 27, 2010; Half-price sideshow.

necrotic posted:

If you're doing a sum sure, but other mathematical operations would give you different values. Or as you mentioned, gross implicit conversions.

Also, javascript has generators now for infinite lists. Though I'm not sure if you can use reduceRight on those? I haven't really touched generators.

Wow, somehow I didn't even consider non-sum operations. That makes sense.

With generators, at least, the returned iterator object doesn't implement map/reduce/etc., so you'd need to write your own, probably wrapping for...of or something.

ynohtna posted:

Having both at hand is very useful when performing functional composition to maintain the relationship between the conceptual model and the sequence of individual function steps

e: I'm phone posting so no example at hand but looking up how up how Redux middleware works behind the scenes may be enlightening.

This also makes a lot of sense. I guess it's a useful stand-in for a formal compose function (and literally the innards of Redux's compose() function, as you pointed out).

Thanks for the explanations!

# ? Jul 26, 2016 22:52

Chunjee: Oct 27, 2004

When you ignore a poster on SA, their posts still appear as "Jerk detected! This user is on your ignore list, click to view post anyway"
I just wanted to hide the post altogether. Then I thought it would be nice to obscure any posts quoting them; but I can't seem to figure out how to get this arrow image centered with the text:

That's probably more of an HTML/CSS question but I'm also hoping I can get a couple optimizations on the javascript and call it v0.1.0
Something-Awful-True-Ignore.user.js

# ? Jul 28, 2016 03:37

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Chunjee posted:

When you ignore a poster on SA, their posts still appear as "Jerk detected! This user is on your ignore list, click to view post anyway"
I just wanted to hide the post altogether. Then I thought it would be nice to obscure any posts quoting them; but I can't seem to figure out how to get this arrow image centered with the text:

That's probably more of an HTML/CSS question but I'm also hoping I can get a couple optimizations on the javascript and call it v0.1.0
Something-Awful-True-Ignore.user.js

Throw some flexbox on the DIV that holds the text / graphic:

code:

<div style="display:flex; align-items: center;"> ....

You may want to try baseline instead of center as the align value.

# ? Jul 28, 2016 16:39

Chunjee: Oct 27, 2004

Thanks. I went through a list of "how to center stuff" and gave up right on the flexbox way because I had mistakenly assumed it was somekind of external framework.

# ? Jul 28, 2016 17:19

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Chunjee posted:

Thanks. I went through a list of "how to center stuff" and gave up right on the flexbox way because I had mistakenly assumed it was somekind of external framework.

Here's a good guide to it if you want to learn yourself: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It's a pretty amazing thing, and now we can actually use it!

# ? Jul 28, 2016 17:31

KOTEX GOD OF BLOOD: Jul 7, 2012

OK, I am a complete noob to all of this so bear with me.

I am building a chart using chart.js and this code which enables you to draw an arbitrary line on the chart:

code:

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(point.x, scale.endPoint);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

I am trying to use some of the normal chart.js options like changing pointRadius and lineTension. Wherever I introduce those, including under "datasets" which is where it would ordinarily go, it either completely stops the chart from displaying or has no effect. Halp i bad at comuters

# ? Jul 31, 2016 21:33

Video Nasty: Jun 17, 2003

I don't think it's just you; I've seen complaints about pointRadius not cooperating, so you might want to try radius instead. If the code is crashing on you because you've put in the other parameters, be certain that you are ending lines with a comma if another argument follows.
Also, while I realize you c/p'd the charts code, be sure to stay consistent with single/double quotes usage.

code:

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
    label: "Scatter diagram for parameters Cd, Co: ppb",
    radius: 5,
    pointBackgroundColor: "rgba(220,220,110,1)",
    pointBorderColor: "rgba(220,110,220,1)",
    pointHoverRadius: 15,
    lineTension: 25,
    backgroundColor: "rgba(220,220,110,1)",
    borderColor: "rgba(220,110,220,1)",
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);
        
        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
        this.chart.ctx.strokeStyle = "#ff0000";
        this.chart.ctx.lineTo(point.x, scale.endPoint);
        this.chart.ctx.stroke();
        
        // write TODAY
        this.chart.ctx.textAlign = "center";
        this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2     
});

Here is an update showing the other options you wanted to have presented, but they do not seem to actually make a difference in how the chart is displayed: https://jsfiddle.net/dbyze2ga/326/

# ? Jul 31, 2016 21:52

KOTEX GOD OF BLOOD: Jul 7, 2012

Bill NYSE posted:

Here is an update showing the other options you wanted to have presented, but they do not seem to actually make a difference in how the chart is displayed: https://jsfiddle.net/dbyze2ga/326/

This is my problem!! But, it works fine without the vertical line code. So it seems like something about the way that is done is loving this up. Unfortunately I don't know Javascript.

I am only doing this to get around Squarespace's deficient chart block. I wish there was a WYSIWYG JS solution for this.

# ? Jul 31, 2016 22:04

Video Nasty: Jun 17, 2003

KOTEX GOD OF BLOOD posted:

This is my problem!! But, it works fine without the vertical line code. So it seems like something about the way that is done is loving this up. Unfortunately I don't know Javascript.

I am only doing this to get around Squarespace's deficient chart block. I wish there was a WYSIWYG JS solution for this.

I am a huge proponent of google's charts API: https://developers.google.com/chart/
It comes with nice documentation and they set good standards to follow for future development.

edit: go here for the Quick Start to get the basics down with copy/paste: https://developers.google.com/chart/interactive/docs/quick_start

# ? Jul 31, 2016 22:18

KOTEX GOD OF BLOOD: Jul 7, 2012

^I love the clarity of the documentation here but it doesn't seem to have an option for dividing up the chart between two areas, which is what I'm trying to accomplish.

e: It would be especially great if I could have each area be a different color. Trying to put a before/after in stark contrast.

ee: OK, I figured out how to do this. You can use "scope" to de-emphasize a region. Then you can draw a vertical line using annotations. Google Charts is definitely the poo poo, although it's not as pretty as chart.js.

KOTEX GOD OF BLOOD fucked around with this message at 02:22 on Aug 1, 2016

# ? Jul 31, 2016 23:04

Video Nasty: Jun 17, 2003

Pretty can come later when you learn a little more CSS, and you can throw it into the javascript to enhance the chart's appearance. I'm glad it worked out for you!

# ? Aug 1, 2016 02:33

Kallikrates: Jul 7, 2002; Pro Lurker

Anyone familiar with or have some great links for creating JS bindings to some C++ libraries

http://swig.org seems to be a good start, but I'm wondering if there are some more newbie friendly materials than their Docs. Or alternatives.

# ? Aug 4, 2016 00:21

The Fool: Oct 16, 2003

Not sure if this is the best place, or the web front end thread, but whatever.

I'm working on a personal project, and I have this really lightweight data layer object. If I copy-paste the code into a jsfiddle, it works as expected. In my project I get

code:

Uncaught TypeError: layer.register is not a function

JSFiddle: https://jsfiddle.net/efeh9asr/

Things that may be relevant:

Using React
jsfiddle code is in layer.js
register function is called from a ComponentWillMount in a different file
everything is bundled with webpack

any ideas?

# ? Aug 8, 2016 06:12

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

The Fool posted:

Not sure if this is the best place, or the web front end thread, but whatever.

I'm working on a personal project, and I have this really lightweight data layer object. If I copy-paste the code into a jsfiddle, it works as expected. In my project I get
code:
Uncaught TypeError: layer.register is not a function
JSFiddle: https://jsfiddle.net/efeh9asr/

Things that may be relevant:

Using React

jsfiddle code is in layer.js

register function is called from a ComponentWillMount in a different file

everything is bundled with webpack

any ideas?

Shot in the dark here, but how is layer.register being called? Are you importing layer.js as "layer" into your ComponentWillMount, then calling register? However it is being imported, it is not actually running through your var layer={} line, or the layer you are calling is not the global layer you think it is. Change the name of one of them and this should become more obvious. My guess is you do not have layer.js set up as a proper CommonJS module, and are not exporting your layer object, so when you import it, you are getting something very different from what you are expecting.

# ? Aug 8, 2016 06:40

The Fool: Oct 16, 2003

Skandranon posted:

Shot in the dark here, but how is layer.register being called? Are you importing layer.js as "layer" into your ComponentWillMount, then calling register? However it is being imported, it is not actually running through your var layer={} line, or the layer you are calling is not the global layer you think it is. Change the name of one of them and this should become more obvious. My guess is you do not have layer.js set up as a proper CommonJS module, and are not exporting your layer object, so when you import it, you are getting something very different from what you are expecting.

So I came here to edit my post saying that I had figured it out.

It was literally the difference between module.export and module.exports.

# ? Aug 8, 2016 06:50

Boosh!: Apr 12, 2002; Oven Wrangler

Is there a jquery event or some method, that's the opposite of .one()? I have a function that loads content, then tiles them, masonry style. I would rather not reload the content of course.

I suppose I could just add a counter or something but I'm open to something a bit more elegant.

Boosh! fucked around with this message at 14:47 on Aug 8, 2016

# ? Aug 8, 2016 14:41

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

Boosh! posted:

Is there a jquery event or some method, that's the opposite of .one()? I have a function that loads content, then tiles them, masonry style. I would rather not reload the content of course.

Not sure what you're asking exactly, but if you mean you want it to fire every time except the first? if so, you could just set your event .on() inside the .one callback.

# ? Aug 8, 2016 14:48

Video Nasty: Jun 17, 2003

Boosh! posted:

Is there a jquery event or some method, that's the opposite of .one()? I have a function that loads content, then tiles them, masonry style. I would rather not reload the content of course.

I suppose I could just add a counter or something but I'm open to something a bit more elegant.

Can you use promises? Use of .then() solved a lot of my jQuery timing headaches.

# ? Aug 8, 2016 14:48

Boosh!: Apr 12, 2002; Oven Wrangler

Ahhh simple enough, thanks fellas :waycool:

# ? Aug 8, 2016 15:06

FateFree: Nov 14, 2003

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.

# ? Aug 8, 2016 21:55

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

FateFree: Nov 14, 2003

N.Z.'s Champion posted:

Sounds a bit like PJAX forms,

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

(I haven't used it myself)

Wow how about that. Thanks! I figured the use case might be common enough for other people.. Its like ajax for lazy folks.

# ? Aug 9, 2016 00:58

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!

If I was going to build a Trello-like card interface, should I just use jquery UI or are there good alternatives? Is something similar built into other popular frameworks? Will I kill myself trying to build a 2D hit detection engine from scratch?

# ? Aug 12, 2016 00:29

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Bob Morales posted:

If I was going to build a Trello-like card interface, should I just use jquery UI or are there good alternatives? Is something similar built into other popular frameworks? Will I kill myself trying to build a 2D hit detection engine from scratch?

You don't need a hit detection engine, just go through this tutorial: http://www.html5rocks.com/en/tutorials/dnd/basics/

A good rule of thumb is when you find yourself asking "do I need jQuery UI" the answer is "nope".

# ? Aug 12, 2016 02:31

ROFLburger: Jan 12, 2006

Anybody have experience with DraftJS? I've got a draftJS editor that uses decorators for some custom block controls that render their react component into the editor just fine, but I'm stuck trying to take the saved state of the editor and render it elsewhere, outside of the editor, as React components. Conceptually trying to use DraftJS as a CMS wysiwyg that saves the state of the editor's content to a DB and then attempts to use that saved state and render it to the frontend. Right now I'm using https://github.com/sstur/draft-js-export-html to convert the raw state to dom elements as a string and then dangerouslySetInnerHTML to write that stringified output to the dom.

Is anyone familiar with a way to, instead of using dangerouslySetInnerHTML, map entities to React components and then render those components?

# ? Aug 12, 2016 17:22

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

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?

# ? Aug 15, 2016 03:21

Video Nasty: Jun 17, 2003

I'm pretty sure you will need a preventDefault() to stop the form from immediately submitting, then rolling through that action in your javascript -- instead of the inline form action you have in your HTML.

# ? Aug 15, 2016 03:34

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

I tried throwing

code:

<head>
    <script>
        function ajaxRequest() {
        	event.preventDefault();
	        $.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>

but it just prevents my submit button from working at all?

# ? Aug 15, 2016 03:43

geeves: Sep 16, 2004

Portland Sucks posted:

I tried throwing

code:

<head>
    <script>
        function ajaxRequest() {
        	event.preventDefault();
	        $.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>

but it just prevents my submit button from working at all?

What about something like:

code:

<head>
    <script>
        function ajaxRequest() {
        	var form = $("#payment");
	        $.ajax({
                    type: 'post',
                    url: 'insert.php',
                    data: form.serialize(),

                    success: function () {
                        form.submit();
                    }
                });
            };
    </script>
    <meta charset="UTF-8">
    <title>Buy this drat knife.</title>
</head>

Change <input type="submit"> to <button type="button" onclick="ajaxRequest()">Paypal!</button>

# ? Aug 15, 2016 03:50

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

Nah that just leaves me with a nonfunctional button. What can I use to figure out whether or not its even getting inside the ajaxRequest() function?

# ? Aug 15, 2016 04:04

lunar detritus: May 6, 2009

Portland Sucks posted:

Nah that just leaves me with a nonfunctional button. What can I use to figure out whether or not its even getting inside the ajaxRequest() function?

code:

console.log('HELLO IS THIS RUNNING?')

inside your function.

# ? Aug 15, 2016 04:07

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Portland Sucks posted:

I tried throwing

code:

<head>
    <script>
        function ajaxRequest() {
        	event.preventDefault();
	        $.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>

but it just prevents my submit button from working at all?

You never actually send the event into the function. It needs to be a parameter of ajaxRequest. In your code event is undefined, which is why it stopped working when you added event.preventDefault()

# ? Aug 15, 2016 05:15

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 08:04

Video Nasty: Jun 17, 2003

Oh yeah, sorry. If you're going to call event.preventDefault() then your code will need to define that variable call within the function:

code:

function ajaxRequest(event) {

If you log anything along the way in console.log(), you can step through what has run with the browser console as you execute.

# ? Aug 15, 2016 14:09

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

«‹›277 »