Category: javascript

I would like to make a java object binding that needs to take in javascript properties.
This is the java code I have,

public String name;
public int version;

public void load() {
     Context context = Context.newBuilder().allowExperimentalOptions(true).option("js.nashorn-compat", "true").option("engine.WarnInterpreterOnly", "false").allowHostAccess(HostAccess.ALL).build();

     context.getBindings("js").putMember("setup", this);

     context.eval(Source.newBuilder("js", scriptFile).build());
}

I want to be able to set the name and version variable when the object is defined in javascript using properties like so

var script = setup({
     name: "Test",
     version: 1
});

How would I be able to get the properties and use them to set these variables? I know in javascript you can do this by putting @property {number} but I don’t know how I would do something like that in java.

I’m a newbie when it comes to setting up apache2 configuration in GCP. I was tasked to provide HSTS and CSP and eventually add it in either of these files: httpd.conf or .htaccess. Now I search the said files but I cant find it somewhere. Is is possible that I have different files? What file should I add HSTS and CSP configuration in my server?

My API works well to display the top 100 cryptos but I’m trying to set up a custom search so I can search through those 100 cryptos as I type. Problem is, the code is not sticking to the params and the code barely returns searches. If it does return anything it’s just one crypto and that’s if I search with a single character.

<script>
import Header from './components/Header';
import CryptoList from './components/CryptoList';
import Spinner from './components/Spinner';
import Search from './components/Search.vue';
import axios from 'axios';
const API_KEY = 'd9b61769f787361d94b1baf0cad18a7d6c4f08ca';

export default {
    data: () => ({
        cryptoData: []
    }),
    computed: {
        hasData() {
            return !!this.cryptoData.length; //Boolean to test if crypto info is loaded
        }
    },
    name: 'App',
    components: {
        Header,
        CryptoList,
        Spinner,
        Search
    },
    mounted() {
        axios
            .get(`https://api.nomics.com/v1/currencies/ticker?key=${API_KEY}`, {
                params: {
                    'per-page': '100',
                    'page': 1,
                    'rank': 1
                }
            })
            .then((response) => {
                this.cryptoData = response.data;
                console.log(response.data);
            })
            .catch(function(error) {
                console.log(error);
            });
    },
    methods: {
        onWordChange(searchTerm) {
            this.search(searchTerm);
        },
        search(searchTerm) {
            axios
                .get(
                    `https://api.nomics.com/v1/currencies/ticker?key=${API_KEY}&ids=${searchTerm}`,
                    {
                        params: {
                            'per-page': '100',
                            'page': 1,
                            'rank': 1
                        }
                    }
                )
                .then((response) => {
                    this.cryptoData = response.data;
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    }
};

I have a react app and use .scss files for styling.

My index.js looks like this:

import './App.scss';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>,
    document.getElementById('root')
);

My App.scss looks like this:

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body,
:global(#root) {
    min-height: 100%;
    color: var(--primary-font-color);
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
}

h1 {
    color: var(--primary-font-color);
    font-size: 32px;
    font-weight: 600;
    line-height: 36px;
}

:root {

    /*Colors */
    --primary-color: #f6f5f2;
}

Now my problem is that all the styles apart from *,*::before,*::after and :root are not applied.
In the browser console I can see that the App.scss is used and the *,*::before,*::after styles are applied. Also all vars from :root can be found there.

I want to use the App.scss file for global styles, but the only way I found to apply them is with an @import("App.scss") in a component.module.scss. Importing the App.scss to every module results in as many duplicates as imports. Is this the intended way to handle scss styles?

So this should display the text and the button to the right but i am not able to align it.
This is my first time using flex boxes and I’m not able to fix this problem.

body {
  background: #f8f8f8;
  font-family: "JetBrains Mono", monospace;
}
* {
  font-family: "JetBrains Mono";
}
.message {
  align-self: right; // I want to align this to the right
  color: steelblue;
  font-weight: 800;
}

nav {
  display: flex; // they are all stored in this div and this is a flex box
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  height: 100px;
}

#btd {
  align-self: right; // and this
  height: fit-content;
}

I am trying to convert this from VBS to JS, but I have problems and do not find de correct way:

  rw "<SCRIPT LANGUAGE='VbScript'>"
  rw "tmp.pantallazo.value=replace (DamePP(),chr(13) + chr(10),""|"")" & chr(13) & chr(10)
  rw "document.forms.tmp.submit()"& chr(13) & chr(10)
  rw "</SCRIPT>"

My proposal is:

  rw "<script language='JavaScript'>"
  rw "var str = DamePP();"
  rw "document.getElementById('pantallazo').value = str.replace('rn','|') + rn;"
  rw "document.tmp.submit();"               
  rw "</script>"            

Thanks

Any idea?

I’m creating a website were I’m displaying data visualizations from Tableau Public. I’m embedding them using the HTML embed script. I’d like the dashboards to be hidden when the website loads at first and add a toggle button that shows the dashboard and collapses it. I was trying to achieve this setting the height of the tableauPlaceholder to 0 .tableauPlaceholder { height: 0; } and then add a class to it that sets the height to a fixed value, like this: .show-dashboard { height: 20rem } and give the button the functionality to toggle this class using JavaScript.

This approach didn’t work because the Tableau graphic keeps showing even if the height is 0 . So, I’m wondering if it’s even possible to set the height of a tableau embed to 0? Is there another approach to achieve this?

Thank you in advance

When I access my app, my Keycloak config is passed to the .init() function to initialize however when I do this, the app stalls and nothing renders on the page, I am not redirected to the keycloak page. The following method is called within index.js before anything is rendered and App should only render upon authentication

const initKeycloak = (onAuthenticatedCallback) => {
  _kc.init({
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
    pkceMethod: 'S256',
  })
    .then((authenticated) => {
      if (!authenticated) {
        doLogin();
      }
      onAuthenticatedCallback();
    })
    .catch(console.error);
};

When I run, nothing loads and the following is repeated over and over in the logs: [HMR] Waiting for update signal from WDS.... I am unable to reach the .then() part of the function. If i remove the auth code, page renders as normal.

NOTE: The keycloak server I am using is a deployed instance and not a local instance. I have checked versions of both keycloak server and keycloak-js and they match

I have some simple css animation to occur when a touch start event is detected however keep getting “undefined is not an object” when trying to add a class to a div element. Please check this on mobile as it’s activated through a touch event. I want to add a class with new value to all the li items inside a div. I tried console logging each list item before adding the class and prints in the console fine. it’s pretty straightforward but i cant figure out why i’m getting this error only when adding the class. The CSS for animations needs to only occur on mobile so i added those new class in the media queries.

HERE IS A THE WORKING WEBSITE LINK – https://kerlerone-animated.netlify.app

HTML

 <ul>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
      </ul>

CSS

   ul {
      height: 50vh;
      flex-direction: column;
      transform: translateY(0);
      
      
   } 

  .top {
     height: 5px;
     width: 95vw;
     transition: all 2s ease-out;
   }

  .top img {
      width: 100%;
      height: auto;
      object-fit: cover;
      border: 2px solid black;
      pointer-events: none;
   }

   .longer {
      height: 205px;
   }

JS

   container.addEventListener('touchstart', handlePanStart, false);


         function handlePanStart() {
            const target = document.querySelectorAll('.top')
            let yOffset = window.pageYOffset;
            console.log('start', 'ypos: ' + yOffset)

            target.forEach((item) => {
               console.log(item.classList)
               item.classlist.add('longer')
              
            })
         }

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?

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 %}