Category: javascript

var table = $('#mytable').DataTable({
      'columnDefs': [{
         'targets': 0,
         'searchable': false,
         'orderable': false,
         'className': 'checkbox check-success'  
      }],
      'order': [[1, 'asc']]
   });

                                                                <div class="checkbox check-success">

                                                                    <label class=" mt-checkbox mt-checkbox-outline"
                                                                        for="checkbox_<?php echo $valuep['0'] ;?>">
                                                                        <input id="checkbox_<?php echo $valuep['0'] ;?>" type="checkbox" name="leads_ids" value="<?php echo $valuep['0'] ;?>" class="select_click">
                                                                        <span></span>
                                                                    </label>
                                                                    <input type="hidden" id="enable_all"
                                                                        name="enable_all" value="1">
                                                                    <input type="hidden" id="lead_contact_id_<?php echo $valuep['0'] ;?>"
                                                                        name="contact_id" value="<?php echo $valuep['0'] ;?>">

                                                                </div>
                                                                <span id="custom_controls"></span>
                                                            </td>

Whenever I click on select-all on top of table it gets back to first page.I need to select some rows in table and export it to csv but when selecting on different pages when i click on select all it gets back to page 1.

I have a table/Div like the one below, and the data is generated dynamically in real time so the rows keep coming and changing.

The table is floating on my browser, I dont have control over the source website so I cannot use jquery to modify the table. I can ONLY use javascript, (by using the browser extension) to alter the DOM.

I need the javascript code that can:

• sort the table by the date and time – newest on top
• highlight rows that have the word: “blocked”
• hide rows that have the word: “unknown” (but make the rows appear when the content is changed to something else)
• keep sorting when timeCell or descriptionCell is updated in any row (or maybe run the sorting every 30 seconds)

I am not familiar with the modern JS code but I think that the date time can be changed to unix timestamp so it make the sorting easier.

I tried to use Chrome browser extension called: Javascript Injector and some javascript code that uses const, i.e: const tabledoc = document;

But when I click the update button of the extension, it will show me some error that says tabledoc is already defined.

Can you please help me?

<div class="container-QqYJdG">

<div class="wrapper-QqYJdG">
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">MacKenzi</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>1:59:08 PM</span></div>
  </div>
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Sophia</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:10:00 AM</span></div>
  </div>
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Luc</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:40:02 AM</span></div>
  </div>

    <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Daniel</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">status: unknown</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:32:02 AM</span></div>
  </div>

    <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Michael</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">is blocked</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:49:02 AM</span></div>
  </div>

  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Vova</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>3:02:01 PM</span></div>
  </div>
</div>

</div>

I’m new to learning react so I followed this tutorial https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components to create a todo app and then tweaked it to fit the requirements of the project I’m working on. Everything works the way it should except when I delete (complete) things from the associate side, it also deletes it from my main side as well. I understand the general concept of why that’s happening (I don’t have two separate lists in my code), just not sure how to go about fixing it without removing the filter I have in place. I had tried to implement a separate list for those tasks but just wasn’t understanding how to go about it.

App.js

const FILTER_MAP = {
  All: () => true,
  Associate: task => task.checked 
};
const FILTER_NAMES = Object.keys(FILTER_MAP);

function App(props) {

  const [tasks, setTasks] = useState(props.tasks);
  const [filter, setFilter] = useState('All');

  function toggleTaskChecked(id) {
    const updatedTasks = tasks.map(task => {
      if (id === task.id) {
        return {...task, checked: !task.checked}
      }
      return task;
    });
    setTasks(updatedTasks);
  }

  function completeTask(id) {
    const remainingTasks = tasks.filter(task => id !== task.id);
    setTasks(remainingTasks);
  }

  const taskList = tasks
    .filter(FILTER_MAP[filter])
    .map(task => (
      <Todo
        id={task.id}
        name={task.name}
        checked={task.checked}
        key={task.id}
        toggleTaskChecked={toggleTaskChecked}
        completeTask={completeTask}
      />
    ));

  const filterList = FILTER_NAMES.map(name => (
    <FilterButton
    key={name}
    name={name}
    isPressed={name === filter}
    setFilter={setFilter}
  />
  ));

  function addTask(name) {
    const newTask = { id: "todo-" + nanoid(), name: name, checked: false };
    setTasks([...tasks, newTask]);
  }

  return (
    <div className="app">
      <h1 className = "tasks-header">Task Tracker</h1>
      <Form addTask={addTask}/>
      <div className="list-buttons">
        {filterList}
      </div>
      <ul
        role="list"
        className="todo-list"
        aria-labelledby="list-heading"
      >
        {taskList}
      </ul>
    </div>
  );

}

export default App

Todo.js

export default function Todo(props) {

  return (
    <li className="todo stack-small">
      <div className="c-cb">
        <input id={props.id} 
        type="checkbox" 
        defaultChecked={props.checked}
        onChange={() => props.toggleTaskChecked(props.id)} 
        />
        <label className="todo-label" htmlFor="todo-0">
          {props.name}
        </label>
      </div>
      <div className="btn-group">
        <button type="button" 
        className="complete-button"
        onClick={() => props.completeTask(props.id)}
        >
          Complete 
        </button>
      </div>
    </li>
  );
  }

index.js

const DATA = [
  { id: "todo-0", name: "Brush Teeth", checked: false },
  { id: "todo-1", name: "Make Dinner", checked: false },
  { id: "todo-2", name: "Walk Dog", checked: false },
  { id: "todo-3", name: "Run Reports", checked: false },
  { id: "todo-4", name: "Visit Mom", checked: false },
  { id: "todo-5", name: "Aerobics", checked: false },
  { id: "todo-6", name: "Project", checked: false },
  { id: "todo-7", name: "Lecture", checked: false },
  { id: "todo-8", name: "Have Lunch", checked: false }
];

ReactDOM.render(
  <React.StrictMode>
    <App tasks={DATA}/>
  </React.StrictMode>,
  document.getElementById('root')
);

FilterButton.js

function FilterButton(props) {
    return (
      <button
        type="button"
        className="toggle-btn"
        aria-pressed={props.isPressed}
        onClick={() => props.setFilter(props.name)}
      >
        <span className="visually-hidden">Show </span>
        <span>{props.name}</span>
        <span className="visually-hidden"> Tasks</span>
      </button>
    );
  }

export default FilterButton;

i want to update a list of field data with formik.
i have this validation

validationSchema: Yup.object().shape({
      password: Yup.string()
        .min(4, 'Password must be at least 4 characters.')
        .required('Password must be at least 4 characters.'),
      ....
    }),

i want the user to be able to set password at least a length of 4 and if the user does not enter password then submit as empty string.
password component

<FormControl
              fullWidth
              error={Boolean(formik.touched.password && formik.errors.password)}
              variant="outlined"
            >
              <InputLabel htmlFor="password">Password</InputLabel>
              <OutlinedInput
                id="password"
                name="password"
                inputProps={{
                  autoComplete: 'password',
                  form: {
                    autoComplete: 'off',
                  },
                }}
                type={showPassword ? 'text' : 'password'}
                onBlur={formik.handleBlur}
                onChange={formik.handleChange}
                value={formik.values.password}
                endAdornment={
                  <InputAdornment position="end">
                    <IconButton
                      aria-label="toggle password visibility"
                      onClick={() => setShowPassword(!showPassword)}
                      onMouseDown={(event) => event.preventDefault()}
                      edge="end"
                    >
                      {showPassword ? <VisibilityOff /> : <Visibility />}
                    </IconButton>
                  </InputAdornment>
                }
                label="Password"
              />
              {formik.errors.password && <FormHelperText>{formik.errors.password}</FormHelperText>}
            </FormControl>

but with this code, if the password field is touched but not entered any password formik is not letting to submit the data. how can I do that? thank u in advance.

I am using css transitions and a little javascript to make elements slide into the page from the left or right.

From the right side (starting from transform: translateX(100vw);) it works perfectly fine.
But from the left side (negative translate value: transform: translateX(-100vw);) it does not work at all. There is no error, but the element just pops up at the end of the transition without any “animated” movement.

If I use a px value instead of vw for the negative/ left side, it also works fine. I found several examples where people used negative vw values and did not seem to have problems with it…

I also tried transform: translateX(calc(0px - 100vw));. No luck…

(I am not using any libraries etc.)

<!-- HTML -->

<div class="container">
  <div class="slide-in l"></div>
  <div class="slide-in r"></div>
</div>

/* CSS */

.slide-in {
  transition: transform 0.8s ease;
}
.slide-in.l {
  transform: translateX(-100vw); /* this is the line does not work */
}
.slide-in.r {
  transform: translateX(100vw);
}
.slide-in.show {
  transform: translateX(0);
}

/* JavaScript */

const slider = document.querySelectorAll('.slide-in');

window.addEventListener("load", () => {
    slider.forEach(s => {
        s.classList.add('show');
    })
});

Any ideas what could be the problem?

//Example – 1

function add1(){

    if (arguments.length == 0){

        document.write("NO Argument Passed!");
    }
    else{

        let sum = 0;

        for(let num in arguments){

            sum += arguments[num];
        }

        document.write(sum);
    }
}

add1(5,10); 

In this example, I am getting the correct result.

//Example – 2 ( With Arrow Function)

let sum = () => {

    if( arguments.length == 0){

        document.write("NO Argument Passed!");
    }
    else{

        let sum1 = 0;

        for(let number in arguments){

            sum1 += arguments[number];
        }

        document.write(sum1);
    }


};

sum(10,20);

*Here I am getting an error in console “arguments is not defined”. Please tell me where I did Wrong.Thank you..!

Is there anyway to connect to a web server of node js from another computer that connected to same wifi?
i searched i get these results:
Connect to localhost:3000 from another computer | expressjs, nodejs
but all didnt worked can you help me? thanks

I am receiving this error and am not sure why I’m receiving it. I have no function named “message”.

Receiving and sending messages works fine for my local environment, but not when I test it live. Is there a something I am missing here? I’m assuming this is the problem (or is that not the case?)

Vue file –

<template>
  <div class="modal-container">
    <v-dialog v-model="dialog" width="450">
      <v-card data-test="direct-messaging-button">
        <header>
          <h4>Communicating with: {{ phoneNumber }}</h4>
        </header>
        <section class="chat-box">
          <div class="chat-box-list-container" ref="chatbox">
            <ul class="chat-box-list">
              <li class="message"
                  v-for="(message, idx) in messages"
                  :key="idx"
                  :class="message.author">
                <p>
                  <span>{{ message.text }}</span>
                </p>
              </li>
            </ul>
          </div>
        </section>
        <footer>
          <form @submit.prevent="message">
            <input
                type="text"
                v-model="message"
                placeholder="Write a message..." />
            <input
                class="submit_btn"
                @click="submitMessage(); apiGroup();"
                type="submit"
                value="Send" />
          </form>
        </footer>
      </v-card>
    </v-dialog>
  </div>
</template>


<script lang="ts">
import Vue from 'vue'
import store from "@/store";
import axios from 'axios'

export default Vue.extend({
  name: "A2PMessagingModal",
  data() {
    return {
      message: '',
      messages: [],
      phoneNumber: ''
    }
  },
  mounted() {},
  methods: {
    apiGroup() {
      setInterval(() => {
        this.receiveMessage();
      }, 5000);
    },
    async submitMessage() {
      this.messages.push({
        text: this.message,
        author: 'sender'
      })
      let formData = new FormData;
      formData.set('message', this.message)
      axios.post(`api/v1/message/a2pMessaging`, formData)
          .then(res => {
            console.log(res.data)
            this.phoneNumber = store.state.location.phoneNumber;
            this.message = '';
          })
          .catch(error => {
            alert(error.response.data.errors);
          })
    },
    async receiveMessage() {
      axios.get(`/api/v1/message/a2pMessageReceiver`)
          .then(res => {
            if("+1"+store.state.location.phoneNumber === res.data.originationNumber) {
              this.messages.push({
                author: 'respondent',
                text: res.data.messageBody
              })
            } else {
              this.messages.push({
                text: null
              })
            }
          })
    },
  },
  computed: {
    dialog() {
      return store.state.location.showA2PMessagingModal
    },
    cancel() {
      store.commit('location/showA2PMessagingModal', false)
    }
  }
})

</script>

how can I make a selector or an algorithm to return the row-index value with the text of a span?

Html code:

<div class="container">
<div row-index="0">
   <div>
      <div>
         <span>
            <div>
               <span>
               Test1234
               </span>
            </div>
         </span>
      </div>
   </div>
</div>
<div row-index="1">
   <div>
      <div>
         <span>
            <div>
               <span>
               1234test
               </span>
            </div>
         </span>
      </div>
   </div>
</div>
</div>

Expected result: getIndex(“1234test”); //will return 1 because row-index=’1′

Everything I tried did not help me get to the final solution, will you be able to suggest a solution or give me some advice? I really don’t even know where to start

Create an application with the following functionality

1 Input fields should be Start Point and End Point.

2. Design should have the first three characters of starting point and ending point

3. Functionality:

4. If it’s a continued trip (Eg. Bangalore to Chennai, Chennai to Ooty) then the straight line should be on level 1

2 If it’s not a continued trip (Eg Bangalore to Chennai, Ooty to Bangalore) then the straight line should have an arrow and be on level 1.

3. If consecutive trips have the same pickup and drop location then those to be in Level 2

4. Any number of trips can be added and design should respond accordingly to adjust within the defined dimension

I’m writing a plugin on native JS and encountered a problem. When the development, Webpack works properly, I create a class and call it elsewhere. But I don’t need to call a class in production, and the Webpack just doesn’t process that code. How to force it to process code if this code is not called

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;

const fileName = ext => isDev ? `[name].${ext}` : `script.${ext}`;

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        script: './index.js'
    },
    output: {
        filename: `js/${fileName('js')}`,
        path: path.resolve(__dirname, 'dist'),
        publicPath: ''
    },
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, 'dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),
            filename: 'index.html',
        }),
        new MiniCssExtractPlugin({
            filename: `css/${fileName('css')}`
        }),
        new CopyWebpackPlugin({
            patterns: [{
               from: path.resolve(__dirname, 'src/img'),
                to: path.resolve(__dirname, 'dist/img')
            }]
         })
    ],
    devtool: isProd ? false : 'source-map',
    module: {
        rules: [
            {
                test: /.html$/i,
                loader: 'html-loader',
                options: {
                    minimize: {
                        removeComments: false,
                        collapseWhitespace: false,
                    },
                },
            },
            {
                test: /.css$/i,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        hmr: isDev,
                        publicPath: '/'
                    }
                },
                    'css-loader',
                ],
            },
            {
                test: /.s[ac]ss$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '/'
                        }
                    },
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /.js$/i,
                use: ['babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /.(?:|gif|png|jpg|jpeg|svg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]',
                    }
                }],
            }
        ]
    }
}

I wanted to make a game where you have to turn cards in order to reveal the back, but I can’t get the background image to show.
I’m still new to vue so I don’t know if I did something stupid. I think it has something to do with the fact that I add the background through a script.

This is the App.vue:

<template>
  <div class="griglia">
    <Card num="1" path="../assets/squalo.png" />
    <Card num="2" path="../assets/squalo.png" />
    <Card num="3" path="../assets/squalo.png" />
    <Card num="4" path="../assets/squalo.png" />
    <Card num="5" path="../assets/squalo.png" />
    <Card num="6" path="../assets/squalo.png" />
    <Card num="7" path="../assets/squalo.png" />
    <Card num="8" path="../assets/squalo.png" />
    <Card num="9" path="../assets/squalo.png" />
  </div>
</template>

<script>
import Card from "./components/Card.vue"

export default {
  name: 'App',

  components: {
    Card,
  },
};
</script>

<style>
* {
  box-sizing: border-box;
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#7c00e1, #4f009e);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: white;
}

div.griglia {
  width: 30vw;
  height: 30vw;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>

And this is the Card.vue component:

<template>
    <div class="el">
        <div class="card" :id="'el'+num" @click="flip">
            <div class="front">{{num}}</div>
            <div class="back" :id="'b'+num"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        num: String,
        path: String
    },
    methods: {
        flip() {
            document.getElementById("b" + this.num).style = 'background-image: url("' + this.path + '"); background-size: cover'
            document.getElementById("el" + this.num).style = "transform: rotateY(180deg);"
        }
    }
};
</script>

<style scoped>
div.el {
  width: 30%;
  height: 30%;
  cursor: pointer;
  position: relative;
}

div.card {
  box-shadow: 0 0 15px black;
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

div.front {
  position: absolute;
  background-color: #111111;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 3.5vw;
  backface-visibility: hidden;
}

div.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background-image: none;
}
</style>

I need to create relations ManyToMany with using third table. Below is my code:

Account.ts

    @OneToMany(() => WorkspaceAccount, workspaceAccount => workspaceAccount.accountId, {
        cascade: true,
    })
    workspaces: WorkspaceAccount[];

Workspace.ts

    @OneToMany(() => WorkspaceAccount, workspaceAccount => workspaceAccount.workspaceId, {
        onUpdate: 'CASCADE', onDelete: 'CASCADE'
    })
    members: WorkspaceAccount[];

WorkspaceAccount.ts

    @ManyToOne(() => Account, {
        nullable: false,
        onUpdate: 'CASCADE',
        onDelete: 'CASCADE',
        primary: true,
    })
    @JoinColumn({
        name: 'accountId',
    })
    accountId: Account;

    @ManyToOne(() => Workspace, {
        nullable: false,
        onUpdate: 'CASCADE',
        onDelete: 'CASCADE',
        primary: true,
    })
    @JoinColumn({
        name: 'workspaceId',
    })
    workspaceId: Workspace;

And now I have a question, how to save this relations, in this way, that when I create new Workspace then automatically will be created object in WorkspaceAccount table?

Thanks for any help

i’m trying to make an app that count steps and distance and time and i couldn’t find way to get distance in the counter (realtime) so i want any one to help me how to that .

import {useEffect, useState` } from “react”;
import * as Location from “expo-location”;enter code here

export default `useLocation` = () => {
  const [location, `setLocation`] = `useState`();

  const `getLocation` = async () => {
    try {
      const { granted } = await `Location`.`requestForegroundPermissionsAsync`();
      if (!granted) return;
      const {
        `coords`: { latitude, longitude },
      } = await `Location.getCurrentPositionAsync`();

      console.log(latitude, latitude);
      setLocation({ latitude, longitude });
    } catch (error) {
      console.log(error);
    }
  };

  const `updateLocation` = async () => {
    try {
  await `Locationx.startLocationUpdatesAsync();`

    } catch (error) {
      console.log(error);
    }
  };

  `useEffect`   (  ()   => {

    `getLocation`();

  }, []);
  return location;
};

    enter code here

`

I have a robot in my project that I get X and Y coordinates from when I start it. I want to show these coordinates that make the robot move in a diagram. Like a car to see where you’re going.

I get the data from the robot in the main.js file and call it in the index.html file using id = “posX” and id = “posY”

enter image description here

How can I pass the value shown above to the chart?

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'GOKART MOVING',
            data: [document.getElementById(posX),document.getElementById(posY)],    
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 20,
                }
            }]
        }
    }
});