Category: javascript

I am attempting to scrape details from two archived webpages, here and here.

As you can see, the content lives in a paginated table (10 records are shown out of 30+) that I believe is being controlled with javascript – if you hover over the right arrows at the bottom of the table, you can see they are advanced through a doPostBack call. Unfortunately, these arrows are non-functional in the archived pages themselves, as is the drop-down that allows you to change the number of visible rows in the table.

Does anyone know how to either (a) get the javascript working to advance the table correctly or (b) gather the information some other way from this webpage? I’ve attempted to look at the request/response objects as well, but I’m quite a novice with web scraping so there is a good chance I missed something.

Any direction (or being told its a fool’s errand!) is helpful, thanks in advance to whoever takes a look!

Im working in a realtime chat application with NextJS and Supabase and recently (without any changes to the code) my application is refusing to post the new messages and im trying to figure it out what im doing wrong but i cant.

I Tried to go back to the first version of the code that used to work perfectly and i still got the same error which make me think that something happened with supabase not with the code

Here is how im doing my DB connection:

const SUPA_KEY = '...myKey...'
const SUPA_URL = 'https://myurl.supabase.co'
const dbSupaInteraction = createClient(SUPA_URL, SUPA_KEY)

The insert function:

const [message, setMessage] = React.useState('')
const [messageList, setMessageList] = React.useState([])

function handleNewMessage(newMessage) {
    const message= {
        id: messageList.length + 1,
        de: loggedUser,
        texto: newMessage,
        created_at: (new Date()).toLocaleDateString()
    }
    console.log(message)
    dbSupaInteraction.from('mesHis').insert([message])
    .then(({data}) {
            console.log('Return handleNewMessage:::: ' + JSON.stringify(data));
            console.log('Message to be sent:::: ' + JSON.stringify(mensagem));
        })

    setMensagem('');

}
<TextField
    placeholder="Insert new message here..."
    value={message}
    type="textarea"
    styleSheet={{
       ...
     }}
       onChange={(event) => {
          const value= event.target.value
          setMesssage(value)
        }}
        onKeyPress={(event) => {
          if (event.key === 'Enter') {
             event.preventDefault();
             handleNewMessage(message);
            }
           }
          }
        />

The error:
Printscreen of console error

Im posting here as my last resource cause i already spent a whole week in this problem and cant figure it out 🙁

I am creating a button where I want to click and expand, and get rid of the bottom border and when I expand it I want the bottom border to come back, so I create a function where when I click once, its modulo cannot divide by two and when I click one more time, which is collapse, the count for the button to click is 2 so it can be divided by 2. Below is my code but I don’t know why it won’t work.

<script>
 function hideBorder() {
      var count = 0;
      var btn = document.getElementById("chi");
      if (btn.onclick) {
        count++;
      }

      if (count % 2 == 0) {
        doucment.getElementById("chi").style.borderBottom = "2px solid #65daff";
        document.getElementById("chi").style.borderEndEndRadius = "10px";
        document.getElementById("chi").style.borderEndStartRadius = "10px";
      } else if (count % 2 == 1) {
        doucment.getElementById("chi").style.borderBottom = "none";
        document.getElementById("chi").style.borderEndEndRadius = "0px";
        document.getElementById("chi").style.borderEndStartRadius = "0px";
      }
    }
</script>

I am beginner using boostrap PDO and php. javascript
How can I compare 2 date like image below.

I want to fix the header on a long horizontal table.
I’ve found many solutions, but they’re all using vertical scrollbar.
When the vertical scroll bars in the table are removed, they do not work.

I want to use the vertical scroll bar of the browser, not the vertical scroll bar on the table.
And, I want to use the horizontal scroll bar on the table tag.

I kept trying all day today, but all failed.
Can you help me?

Is there a way to combine multiple Lottie animations into a single one?
I tried https://github.com/LottieFiles/lottie-js but failed.
Above lib offers good enough API to manipulate existing elements, but doesn’t allow to combine aniamtions.
Are there any other javascript libraries that may achieve this?

I have a django form like which displays a number of radiobuttons and I need to submit a request on click. The needs to be submited on click, but since there is a second jQuery widget, I’m trying to extract its current value on submit to package along with the request. When trying to extract the value from the additional widget django replaces quote marks in attrs with html characters which prevents it from working. I have tried enclosing the form and additional widget in {% autoescape off %} tags, as well as rendering the form manually and using safe i.e. {{ field|safe }}. However django continues to automatically replace quotes. How can I stop this from happening?

class ChloroplethIonSelectForm(forms.Form):
    choices = [ (str(i)+'_'+str(j),'mz ='+ str(i)+ 'rt = '+str(j)) for i, j in
        Data.objects.all().distinct('mz').values_list('mz',"rt_min"
        )]
    ion = forms.CharField(label = "Select an ion and a date", widget=forms.RadioSelect(
        choices = choices,attrs={'onclick': "$('#id_date') = $('#amount').val(); this.form.submit();"}
    ))
    date = forms.CharField(max_length=10, widget = forms.HiddenInput())
    formtype = forms.CharField(initial = 'chloroplethion', widget=forms.HiddenInput())

                           <form action="" method="post">
                                {% autoescape off %}
                                {% csrf_token %}
                                <p>
                                    <label for="amount">Date range:</label>
                                    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="10" />
                                </p>
                                {% block choropleth_sliders %}

                                {% endblock choropleth_sliders %}
                                
                                <div id="slider_choropleth"></div>
                                <form method="post" novalidate>
                                    {% csrf_token %}
                                  
                                    {{ form_chloropleth.non_field_errors }}
                                  
                                    {% for hidden_field in form_chloropleth.hidden_fields %}
                                      {{ hidden_field.errors }}
                                      {{ hidden_field }}
                                    {% endfor %}
                                  
                                    <ul>
                                      {% for field in form_chloropleth.visible_fields %}
                                        <li>
                                          <p>{{ field.label_tag|safe }}</p>
                                          <p>
                                            {{ field.errors|safe}}
                                            {{ field|safe }}
                                            {{ field.help_text|safe }}
                                        </p>
                                      {% endfor %}

                                    </ul>
                                    
                                    <button type="submit">Submit</button>
                                  </form>
                                {% endautoescape %}

I’m trying to validate an object, which is an union type of two objects. It’s like two different subforms where you can fill either of them or both, but it shouldn’t be empty

here’s a simplified example:

// it's valid if it has all of the fields of the first sub-form
const valid1 = {
  a: "a",
  b: "b",
  c: "c"
};

// it's valid if it has all of the fields of the second sub-form
const valid2 = {
  d: "a",
  e: "b",
  f: "c"
};

// it's valid if it has all of the fields of both sub-forms
const valid3 = {
  ...valid1,
  ...valid2
};

// it's invalid if it's empty or has only one sub-form field

const invalid1 = {
  ...valid1,
  e: "b"
};

const invalid2 = {
  ...valid2,
  a: "a"
};

const invalid3 = {};

here’s a sandbox setup with all of my attempts so far

So i’m working on making a website for this bar, and the owner wants me to create his menu. The thing is, his menu change quite a bit from a week to another. So what i want to do is basically have the menu in a unordered list or a table in the HTML page, but i need to be able to add or delete some of the lines. I was thinking of making it in JavaScript, but here’s my problem :

I know how to change the value of something in html with javascript, but i don’t know how i can, for example, add rows to a table in javascript. If, let’s say, one day the menu have 30 drinks on it, but the next day the owner wants to add a 31st drink on it, the script needs to be able to add a new line to the menu. Same thing goes with removing a drink. Also, i need to make a little interface for the owner to be able to all of that himself, without me needing to go modify the code every few days.

I also thought i could do it with PHP and a mySQL Database, but i’m not really sure if that solution would really be efficient.

Could someone help me figuring out which way of doing this would be the best ?

Thanks a lot

trying to import data from firebase, however i get thrown this error back:REACT: TypeError: Cannot read properties of undefined (reading ‘map’).

Making a project that monitors health of cloud functions and if they are working. Any help would be much appreciated. 🙂

app.js- the map function is in app.js

import "./App.css";
import "semantic-ui-css/semantic.min.css";
import { Container, Divider, Card } from "semantic-ui-react";
import Header from "./components/Header";
import Cards from "./components/Cards/index";
import { useState, useEffect } from "react";
import { AppProvider } from "./Context/Context.js";
import "firebase/compat/auth";
import {} from "firebase/firestore";
import * as FirestoreService from "./components/service/firebase";
import firebase from "@firebase/app-compat";

function App() {
  const [user, setUser] = useState(null);
  const [cloudFucntions, setCloudFucntions] = useState();

  const [setError] = useState();

  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      setUser(user);

      const unsubscribe = FirestoreService.getCloudFunctionItems(
        (querySnapshot) => {
          const updatedCloundFunctions = querySnapshot.docs.map((docSnapshot) =>
            docSnapshot.data()
          );
          setCloudFucntions(updatedCloundFunctions);
          console.log(updatedCloundFunctions);
        },
        (error) => setError("list-item-get-fail")
      );
      return unsubscribe;
    });
  }, []);

  return (
    <AppProvider>
      <div>
        <Container>
          <Header />

          <Divider horizontal section>
            Cloud Function Monitor
          </Divider>

          {user ? (
            <Card.Group itemsPerRow="4">
              {cloudFucntions.map((cloudFunction) => {
                return (
                  <Cards
                    key={cloudFunction.id}
                    cloudFunctions={cloudFunction}
                  ></Cards>
                );
              })}
            </Card.Group>
          ) : (
            <h2> Please sign in using the button in the top right. </h2>
          )}
        </Container>
      </div>
    </AppProvider>
  );
}

export default App;

firebase.js:

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import { initializeApp } from "firebase/app";
import {
  getFirestore,
  query,
  orderBy,
  onSnapshot,
  collection,
  getDoc,
  getDocs,
  addDoc,
  updateDoc,
  doc,
  serverTimestamp,
  arrayUnion,
} from "firebase/firestore";

const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx.firebaseapp.com",
  projectId: "dxxxxdata-d1",
  storageBucket: "xxx-reportingdata-d1.appspot.com",
  messagingSenderId: "xxxxxxxx",
  appId: "xxxxxxxx",
  measurementId: "G-xxxxxxx",
};

firebase.initializeApp(firebaseConfig);

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export const getCloudFunctionItems = (snapshot, error) => {
  const itemsColRef = collection(db, "cloudFunctionsMonitor");
  const itemsQuery = query(itemsColRef);
  return onSnapshot(itemsQuery, snapshot, error);
};

export const getCloudFunction = (cloudFunctionId) => {
  const cloudDocRef = doc(db, "cloudFunction", cloudFunctionId);
  return getDoc(cloudDocRef);
};

export const auth = firebase.auth();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

export const signInWithGoogle = () => auth.signInWithPopup(provider);

export default firebase;

cards/index.js

import "../../App";
import "semantic-ui-css/semantic.min.css";
import { Icon, Card, Button } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import React, { Component } from "react";
import "semantic-ui-css/semantic.min.css";

export default class Cards extends Component {
  render() {
    return (
      <Card color={this.props.cloudFunction.functionColor}>
        {/* <h1> lastrunload: {this.propps.app.updatedCloundFunctions}</h1> */}
        <Card.Content>
          <Card.Header>
            {this.props.cloudFunction.cardFunctionHeader}
          </Card.Header>
          <Card.Description>
            {this.props.cloudFunction.cardFunctionDescription}
          </Card.Description>
        </Card.Content>
        <Card.Content extra>
          <Icon name="cog" />
          {this.props.cloudFunction.functionRunTime}
          <br />
          <Icon name="clock" />
          {this.props.cloudFunction.functionLastRun}
          <br />
          <Icon name="angle double down" />
          {this.props.cloudFunction.functionLastInsert}
        </Card.Content>
        <Card.Content extra>
          <div className="ui two buttons">
            <Button basic color={this.props.cloudFunction.functionColor}>
              {this.props.cloudFunction.functionButton}
            </Button>
          </div>
        </Card.Content>
      </Card>
    );
  }
}

I have this problem which I am trying to solve after I cloned a div multiple times using javascript. I want to replace the inner div with an empty div having a particular id for each. Assuming I have:

<div id="original">
    //some code here
        <div id="problem">
            //some code here
        </div>
    </div>

<div id="location">
//some code here
    <div id="problem">
        //some code here
    </div>
</div>

<div id="rep">
//some code here
    <div id="problem">
        //some code here
    </div>
</div>

I need to be able to get the div with id problem in the div location and replace it with something else and same to the div within the div repository.

Is there any faster / more efficient way to type this piece of code? Someone told me all else if’s should be arrays or something

let a = 0,
    b = 0,
    c = 0,
    d = 0,
    e = 0,
    f = 0,
    g = 0,
    h = 0,
    i = 0;

(function() {
    if (a == 1 && b == 1 && c == 1) {
        console.log("hello")
    } else if (a == 1 && d == 1 && g == 1) {
        console.log("hello");
    } else if (a == 1 && e == 1 && i == 1) {
        console.log("hello");
    } else if (b == 1 && e == 1 && h == 1) {
        console.log("hello");
    } else if (c == 1 && e == 1 && g == 1) {
        console.log("hello");
    } else if (c == 1 && f == 1 && i == 1) {
        console.log("hello");
    } else if (d == 1 && e == 1 && f == 1) {
        console.log("hello");
    } else if (g == 1 && h == 1 && i == 1) {
        console.log("hello");
    } else console.log("Hi");
})();

el = document.getElementsByClassName(‘join-chat’)[0];
el.onmouseover = function(){el.click();}

The quill js works when hosted in a single HTML Page, but when if used with node js like this :

app.post(“/send_email”, attachmentUpload, (req, res) => {
if (!req.file) {

    return res.send("Error uploading file");
  } else {
    const recipient = req.body.email;
    const subject = req.body.subject;
    const message = req.body.message;
    const attachmentPath = req.file;
  
  
  console.log("recipient:", recipient);
    console.log("subject:", subject);
    console.log("message:", message);
    console.log("attachmentPath:", attachmentPath);
    
   
    return res.redirect("/success.html");

  }

I get fairly rendered quill js. Pic attached.

If have encountered a similar problem before kindly help. As u may have guessed, I am a newbie.

PICS

These diagrams should get data from “MYSQL-DB” and update it’s data in live accordingly, without refreshing the page.
I do not have much experience in this field, this is one of my first personal front-end projects and I would much appreciate some assistance with the subject.

link for illustrate images
https://imgur.com/a/Wob7Ype

the demo below is not displayed well, which is why I included an “SCSS” file that should be inserted in the project as an additive.

@keyframes bake-pie {
  from {
transform: rotate(0deg) translate3d(0,0,0);
  }
}

body {
  font-family: "Open Sans", Arial;
  background: #EEE;
}
main {
  width: 400px;
  margin: 30px auto;
}
section {
  margin-top: 30px;
}
.pieID {
  display: inline-block;
  vertical-align: top;
}
.pie {
  height: 200px;
  width: 200px;
  position: relative;
  margin: 0 30px 30px 0;
}
.pie::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: #EEE;
  border-radius: 50%;
  top: 50px;
  left: 50px;
}
.pie::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  box-shadow: 0 0 3px 4px rgba(0,0,0,0.1);
  margin: 220px auto;
  
}
.slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 200px, 200px, 100px);
  animation: bake-pie 1s;
}
.slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
}
.legend {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  padding: 15px;
  font-size: 13px;
  box-shadow: 1px 1px 0 #DDD,
          2px 2px 0 #BBB;
}
.legend li {
  width: 110px;
  height: 1.25em;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}
.legend em {
  font-style: normal;
}
.legend span {
  float: right;
}
footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 13px;
  background: #DDD;
  padding: 5px 10px;
  margin: 5px;
}


function sliceSize(dataNum, dataTotal) {
    return (dataNum / dataTotal) * 360;
  }
  function addSlice(sliceSize, pieElement, offset, sliceID, color) {
    $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
    var offset = offset - 1;
    var sizeRotation = -179 + sliceSize;


    $("."+sliceID).css({
      "transform": "rotate("+offset+"deg) translate3d(0,0,0)"
    });
    $("."+sliceID+" span").css({
      "transform"       : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
      "background-color": color
    });
  }
  
  function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
    var sliceID = "s"+dataCount+"-"+sliceCount;
    var maxSize = 179;
    if(sliceSize<=maxSize) {
      addSlice(sliceSize, pieElement, offset, sliceID, color);
    } else {
      addSlice(maxSize, pieElement, offset, sliceID, color);
      iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
    }
  }
  function createPie(dataElement, pieElement) {
    var listData = [];
    $(dataElement+" span").each(function() {
      listData.push(Number($(this).html()));
    });
    var listTotal = 0;
    for(var i=0; i<listData.length; i++) {
      listTotal += listData[i];
    }
    var offset = 0;
    var color = [ 
      "#4c1180", 
      "#17b2bd", 
      "#006666",
    ];
    for(var i=0; i<listData.length; i++) {
      var size = sliceSize(listData[i], listTotal);
      iterateSlices(size, pieElement, offset, i, 0, color[i]);
      $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]);
      offset += size;
    }
  }
  createPie(".pieID.legend", ".pieID.pie");





@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@-webkit-keyframes bake-pie {
  from {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
            transform: rotate(0deg) translate3d(0, 0, 0);
  }
}
@keyframes bake-pie {
  from {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
            transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

.pieID {
  display: inline-block;
  vertical-align: top;
}

.pie {
  height: 200px;
  width: 200px;
  position: relative;
  border: 0.2rem solid #fff;
  box-shadow: 0 0 .2rem #fff,
            0 0 .2rem #fff,
            0 0 2rem #0D43E3,
            0 0 0.8rem #0D43E3,
            0 0 2.8rem #0D43E3,
            inset 0 0 1.3rem #0D43E3; 
            border-radius: 50%; 
}

.pie::before {
  content: "";
  display: block;
  position: absolute; 
  z-index: 1;
  width: 100px;
  height: 100px;
  background: rgb(41, 41, 41);
  border-radius: 50%;
  top: 50px;
  left: 50px;
}

.pie::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 220px auto;
}    
.slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 200px, 200px, 100px);
  -webkit-animation: bake-pie 1s;
          animation: bake-pie 1s;
}

.slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 200px; 
  height: 200px;
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
}

.legend {
  /*position: relative; right: 50%;*/ 
  margin-top: 2.5%;
  margin-left: 2.5%;
  list-style-type: none;
  margin-right: 0%;
  background: rgb(14, 2, 68);
  color: rgb(255, 255, 255);
  padding: 15px;
  padding-bottom: 4px;
  font-size: 16px;
  border: 0.2rem solid #fff;
  box-shadow: 0 0 .2rem #fff,
 **strong text**               0 0 .2rem #fff,
            0 0 2rem #0D43E3,
            0 0 0.8rem #0D43E3,
            0 0 2.8rem #0D43E3,
            inset 0 0 1.3rem #0D43E3; 
}

.legend li {
  width: 110px;
  height: 1.25em;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}

.legend em {
  font-style: normal;
}

.legend span {
  float: left;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 13px;
  background: #DDD;
  padding: 5px 10px;
  margin: 5px;
}
/*# sourceMappingURL=donutTotal.css.map */

<ul class="pieID legend">
              <li>
                <em>south</em>
                <span>192</span>
              </li>
              <li>
                <em>north</em> 
                <span>192</span>
              </li>
              <li>
                <em>center</em>
                <span>192</span>
              </li>
            </ul> 
            <div class="pieID pie">
             </div>