Category: javascript

i wish to initialize my vuejs project with firebase.

But because of the new update i can’t.

i must use import { initializeApp } from "firebase/app"; AND const app = initializeApp(firebaseConfig);

but i have 2 problems with this:

1)

This dependency was not found: To install it, you can run: npm install –save firebase

it didn’t found my module. In my package.json it’s present.

2)

to initialize my instance vuejs i need to write :

new Vue({ router,render: h => h(App)}).$mount('#app')

but i have “app” from firebase missing.

thanks for your help 🙂

I’m using the (react-native-push-notification) package for my alarm ios app but there is an issue when the app is in the background notification banner appears for a short time but does not receive any callback in the background because I need a callback, where I ring a sound continuously.
When the app is in the background notification banner appears with sound only for 6 seconds but I need to play a sound continuously when a notification appears in the background.

I’m attempting to build a simple ‘To-Do List’. I’m trying to add a new P element to my existing div. Does anyone have any ideas regarding the following error code?

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

I feel like my HTML button (submitButton) click isn’t being received, although I could be wrong.

var toDoList = document.getElementById("toDoList"); // div with p elements within
var submitButton = document.getElementById("submitButton"); // HTML button
var textInput = document.getElementById("textInput"); // HTML text input

function addFunction(){
    var newItem = toDoList.createElement("p");
    newItem.innerText = textInput.value;
    document.toDoList.appendChild(newItem);
}

submitButton.addEventListener('click', addFunction);

I’m using Pokeapi and want to display the types of the pokemon in 2 different element bc I’m applying a style (the background color) according to the type of the pokemon. The problem is that it shows the first 3 pokemon but not the fouth bc it has only one type and it can’t find the second type (which doesn’t exist) in the data given by the api.

Here’s my JS :

function displayPokemon (pokemon) {
    const pokemonEl = document.createElement('li');
    const name = pokemon.name;
    const type1 = pokemon.types[0].type.name;
    const type2 = pokemon.types[1].type.name;
    const pokemonHTMLString =
        `
        <div class="pokemon_container ${type1} ${type2}">
            <div class="pokemon_container_image">
                <img class="pokemon_container_image_sprite" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png" loading="lazy" alt="${name}"/>
                <img class="pokemon_container_image_shiny" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/${pokemon.id}.png" loading="lazy" alt="${name}"/>
            </div>
            <h3 class="pokemon_number">#${pokemon.id.toString().padStart(3, '0')}</h3>
            <h2 class="pokemon_name" onClick = "selectPokemon(${pokemon.id})">${name}</h2>
            <a class="pokemon_type" id="${type1}">
                <img id="${type1}" alt="${type1}"></img>
                <span>${type1}</span>
            </a>
            <a class="pokemon_type" id="${type2}">
                <img id="${type2}" alt="${type2}"></img>
                <span>${type2}</span>
            </a>
        </div>
    `
    pokemonEl.innerHTML = pokemonHTMLString;
    pokedex.appendChild(pokemonEl);
};

Here’s the error : “Uncaught (in promise) TypeError: pokemon.types[1] is undefined”

Before that I was mapping the types and showing them in one element but I want to do 2 separate elements and I don’t know if my code is wrong and I have to modify something or if I have to create a function or an if else statement.

My issue is that my redux state is updating (I can see it in the redux dev tool) but my component is not updating, it’s not putting the last value of my array initialState.userWeight
Here is what my reducer looks like :

case 'NEWWEIGHT':
           const weight = action.payload.weight
           const date = action.payload.date
           state.userWeight = [...state.userWeight, {weight: weight, date: date}]
           return {...state}

Here is my initialState :

const initialState = {
    userName: '',
    userSize: 0,
    userWeight: [],
    userDate: '',
}

Here is what my component looks like :

    const userWeightRedux = useSelector(state => state.userInfo.userWeight[Array.length - 1].weight)

    console.log(userWeightRedux)

...
<Text style={styles.user}>{userWeightRedux}</Text>

So console.log(userWeightRedux) dosen’t change.
I am new to react, redux and don’t fully understand the spread syntax, maybe the problem is here but did’nt find anything, hope you can help me :).

I have an element with a long class that contains a dynamic suffix to denote the type of icon that should be displayed, think of some-very-long-classname-for-an-icon-{iconType}, where {iconType} is likely to be filled with a string like success or error etc.

In React Testing Library, I am wanting to assert that I have a particular icon class applied, however I don’t want to clutter up my tests by having the full prefix some-very-long-classname-for-an- at each part.

Rather than store this prefix as a variable I was wondering if it would be possible to use regex to specify? Something along the lines of /icon-success$/.

I was thinking of using toHaveClass as I know this will work when specifying the full class name for the test:

expect(myComp).toHaveClass('some-very-long-classname-for-an-icon-success');

however, upon my travels I have found that toHaveClass doesn’t take Regex 🙁

I did think of doing something along the lines of

expect(myComp).toHaveClass(expect.stringContaining('icon-success'));
expect(myComp).toHaveClass(expect.stringMatching(/icon-success$/));

however these also didn’t seem to work…

The below code only working in web view, but not in mweb browser

onKeyPress={(e) => {
  var startPos = e.currentTarget.selectionStart;
  if (e.which === 32 && startPos == 0) {
      e.preventDefault();
  }
}

I have a userdropdown menu that I want to show the picture of the client that authenticated. I use nextAuth to authenticate. I can see the picture of the user and name of the user turns well with useSession().

I show the picture of the user in localhost without problem. Here how I show it with Image tag.

  <li className="py-1 px-3 hover:underline leading-8 flex">
              <Image
                width={40}
                height={40}
                className="mr-3"
                src={status === "authenticated" ? session.user.image : profile}
                alt="img"
              />
              <span className="ml-3">User</span>
            </li>

But when I sent it for production to vercel, it throw error and does no work like in localhost.
Here the error

I am new to JavaScript and JQuery.

We have a WordPress theme serving as an online directory. This theme uses a JSON file to display our listings on our map. For each of our modifications on a listings we must click on a button named “JSON Generator” to update the data of the map. The problem is that we are currently adding / modifying a lot of content on our map so it requires a lot of manual regenerations.

Screenshot of the button and his html declaration

Is there a way to replace the ON CLICK launch of the JavaScript function regenerating the JSON by an automatic launch every 24 hours for example?

Here is the start of my actual .js file :

;( function( $ ){



// Json Generator

var directoryManagerAdmin = function () {

    this.param = lava_dir_admin_param;

    this.init();

}



directoryManagerAdmin.prototype.constructor = directoryManagerAdmin;

directoryManagerAdmin.prototype.init = function() {

    var self = this;

    $( document )

        .on( 'click', '.lava-data-refresh-trigger', this.onGenerator() )

        .on( 'click', '.fileupload', this.image_upload() )

        .on( 'click', '.fileuploadcancel', this.image_remove() )



    $('button[data-listing-type-generator]').each(function(){

        var listingType = $(this).data('listing-type-generator') || false;

        var Instance = self.onGenerator(listingType);

        $(this).on('click', Instance);

    });

    self.bindJsonEditor();

}

directoryManagerAdmin.prototype.onGenerator = function(type) { THEN YOU HAVE THE VERY LONG FUNCTION....

I think that I have to replace the launcher : .on( 'click', '.lava-data-refresh-trigger', this.onGenerator() ) by an automatic launcher every 24 hours or so.

I found out how to get the current date : var date = new Date().toLocaleDateString();, I also know that I may have to use the setInterval action but I don’t know how to use it 🙁

Thanks by advance if you have any clue to help me !

I have this code:

success: function (result) {
   var textoTipos = $('.cargarTextosTipo');
                      
   for (var selecttipos of textoTipos) {
       selecttipos.append(`<option value="0">Hello this is a test</option>`);

   // some code

   }

}

My problem is that inside loop selecttipos.append(`<option value="0">Hello this is a test</option>`); is not working and it is not appending to a select component but this way worked but this is not the way I am looking for:

 success: function (result) {
    var textoTipos = $('.cargarTextosTipo');
   textoTipos.append(`<option value="0" > Hello this is a test </option>`);

}

How do I make it work using a loop? this is the way I want because I have to go through each select node and do some stuff later rather than applying to all select stuff.

How can I get the formatted version of the update modal? I get an error:

tinymce.js:13767 Uncaught TypeError: Cannot create property ‘format’ on string ‘<h2 style=”box-sizing: border-box;

var secilendeger;

function textDuzenle(pid) {
  update = true;
  $('#exampleModalSizeLg').modal('show');
  secilendeger = $('#kt_datatable').DataTable().data().filter(x => x.Id == pid)[0];
  //$('#p_Ack').val(secilendeger.Desc);
  tinymce.get("p_Ack").getContent(secilendeger.Desc);
}

I need a regex to capture both Yellow Green: and Blue Purple: from the following body of text, the format is multiline.

Yellow Green: undefined characters/symbols/spaces

Blue Purple: undefined characters/symbols/spaces

I am developing a code playground. Everything works in my computer,
It has a saving system. Encodes your code and puts it in the URL. When page loads, gets the code from the URL. It works perfectly fine. It uses Vite, vanilla JS, and I used the Vite setting on Vercel, but the saving system doesn’t work. When you reload, instead of getting the code, It gives a 404 error message, as the URL isn’t on the dist folder.
What can I do?
Complete code: https://github.com/L1ghtingBolt/codeebox/

When I console.log the data I get from firestore inside the then() function as shown below, it displays the data without the problem. However, if I append that data in the peopleData variable and console.log the peopleData variable, I get an empty string.

let db = getFirestore();
let peopleCollection = collection(db, 'People');

getDocs(peopleCollection)
.then((people) =>{
    people.docs.forEach(person =>{
        let personData = person.data(person);
        console.log(`${personData.Name} is an ${personData.Occupation} aged ${personData.Age}`);
    })})
.catch(err =>{
    console.log(err)
})

Here I get an empty string logged

let peopleData = ``;
getDocs(peopleCollection)
.then((people) =>{
    people.docs.forEach(person =>{
        let personData = person.data(person);
        peopleData += `${personData.Name} is an ${personData.Occupation} aged ${personData.Age}`;
    })})
.catch(err =>{
    console.log(err)
})

console.log(peopleData);

https://codepen.io/wr234/pen/LYzBLbY

  $(".swiper-slide").click(function(e){
    console.log("test");
  });

Hi im using Swiper slider.

But the event does not run when clicking on an element created by loop.

If you click slider1 created with loop after slider4, console.log is not captured.

How can we make an event happen?

      $(".swiper-slide").click(function(e){
        console.log("test1");
      });

      $(".swiper-slide").on("click", function(e){
        console.log("test2");
      });
      
      var swiper = new Swiper(".mySwiper", {
            slidesPerView: 3,
            centeredSlides: false,
            spaceBetween: 10,
            loop: true,
            loopFillGroupWithBlank: 1,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        touchRatio: 0,
      });

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper {
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
/*
      $(".swiper-slide").click(function(e){
        console.log("test");
      });
*/

    </script>
  </body>
</html>