Category: javascript

Category Added in a WPeMatico Campaign

How could I display the selected category name of a dropdown list

I have a dropdown category lists from taxonomy, how could I display the selected category name inside the dropbox when it’s selected/ active?

here is dropdown category code bellow:

<select id="categ" name="categ">
   <div class="options">
      <option value="<?php echo home_url('/newsletter'); ?>" selected>一覧</option>                                   
   <?php
      $args = array(
      'orderby' => 'slug',
      'order' => 'ASC',
      'parent' => 0,
      'hide_empty' => false
      );
    $terms = get_terms([
       'taxonomy' => 'pdf_cat',
       'hide_empty' => false,
      ]);
    foreach( $terms as $term ){
      echo '<option class="ctg" value="'. get_term_link($term->term_id) .' ">' . $term->name . '</option>';   
       }
     ?>   
    </div>   
</select>

JS code when URL fired:

<script type="text/javascript">
  $("#categ").change(function(){
    var url = $(this).val();
    location.assign(url);
    });
</script>

Set event listener based on text param from js function

I have a function that will allow me to set a buttons text and onclick property

Both are set as text params

Here is the function:

function assignButton(n,text,onclick){
  var btn = document.getElementById("button" + n)
  btn.innerHTML = text
  btn.onclick = function(){onclick}
}

here is what I call

assignButton(13,"Exit Program","alert('Goodbye')")

The button text is properly assigned but the text that I want to execute is not assigned in the onclick property. It works if I directly type in some code in the function but not when I pass it through as text…

Any ideas on what I could do to get this concept working?

Thanks in advance for your help…

javascript NodeList Selector

I would like to say thank you in advance for all the help that will be provided so here is my problem.

I’m trying to make a simple to-do app I’m at the step where I want to be able to delete some items from the list array (every new list item is pushed inside an array) so I add a button to each task to delete the task then I do a querySelectorAll to get all the button then I loop through each button and add an event listeners to run the specific function but it doesn’t work I tried the forEach loop the Array. from method move my script tag to the bottom of the file and also to move my querySelectorAll even further below to make sure it catches all the button but nothing seem to work if you guys have any pointer i would appreciate it here is my code

github gist enter link description here

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>TODO App</title>
  </head>
  <body>
    <div class="container">
      <header class="header"><h1 class="header-title">To-Do List</h1></header>
      <nav class="navbar"></nav>
      <main class="main">
        <label for="task">Add a task: </label>
        <input class="taskTextInput" type="text" placeholder="add a task" />
        <button class="addTaskBtn" type="button">Add</button>
        <button class="clearTaskBtn" type="button">Clear</button>
        <hr />
        <div class="taskContainer"></div>
      </main>
      <footer class="footer"></footer>
      <script src="./script.js" defer></script>
    </div>
  </body>
</html>

"use strict";
const taskList = [];
const addTaskBtn = document.querySelector(".addTaskBtn");
const taskTextInput = document.querySelector(".taskTextInput");
const taskContainer = document.querySelector(".taskContainer");
let deleteTaskBtn = document.querySelectorAll(".deleteTaskBtn");

function addTask(e) {
  e.preventDefault();
  if (taskTextInput.value == "") return;
  taskContainer.innerHTML = "";
  taskList.push(taskTextInput.value);
  taskTextInput.value = "";
  displayTask();
  return (deleteTaskBtn = document.querySelectorAll(".deleteTaskBtn"));
}
addTaskBtn.addEventListener("click", addTask);

function displayTask() {
  for (const task in taskList) {
    const listItem = `
    <div class="task-container">
        <li class="task-item">${taskList[task]}</li>
        <div class="task-button">
            <input class="toggleTaskBtn" type="checkbox"/>
            <img src="./image/delete.png" class="deleteTaskBtn icon"></img>
        </div>
    </div>`;
    taskContainer.insertAdjacentHTML("afterbegin", listItem);
  }
}
function deleteTask() {
  console.log("hello");
}
//
deleteTaskBtn.forEach((btn) => {
  btn.addEventListener("click", deleteTask);
});
//
const toggleTaskBtn = document.querySelectorAll(".toggleTaskBtn");
function toggleTask() {}

/*
1. Add a new item to a array
2. display the array on the page
3. add a checkbox when click add a line over the text and move it to the button if unclick remove the line and move it back in the top
4. add a clear button to clear of completed item
*/

Vue 3 Foreach tabs slots

I have some issues foreaching Vue 3 tabs with bulma ui.
So I want to foreach them beacuse it will be same form for all of them, and here it how looks:

const languages = [
  { label: 'Serbian', value: 'rs' },
  { label: 'English', value: 'en' },
  { label: 'Bulgarian', value: 'bg' },
  { label: 'German', value: 'de' },
  { label: 'Romanian', value: 'ro' },
  { label: 'Albanian', value: 'al' }
]

and I’m listing them like:

<VTabs
    slider
    type="rounded"
    selected="en"
    :tabs="languages"
  >
<template #tab="{ activeValue }">
      <div v-if="activeValue === 'rs'">
        <VField label="Title">
          <VControl>
            <input
              type="text"
              class="input"
              placeholder="Product Title"
            />
          </VControl>
        </VField>
      </div>
      <div v-else-if="activeValue === 'bg'">
        <VField label="Title">
          <VControl>
            <input
              type="text"
              class="input"
              placeholder="Product Title"
            />
          </VControl>
        </VField>
      </div>
    </template>
</VTabs>

But I can’t find proper way to foreach them by language, I tried putting foreach in template, in div bellow template and nothing works. Any suggestions?

Why is the function outputting different results with the same input

I’m setting the values of this 4 x 4 grid to be exactly the same, yet when I run it through an A* pathfinding program it gives me different results

grid[0][0] = 0;
grid[2][2] = 3;

grid[1][1] = 1;
grid[1][2] = 1;
grid[1][3] = 1;
grid[2][1] = 1;

console.log(PathFind([0,0], grid));

grid[0][0] = 0;
grid[2][2] = 3;

grid[1][1] = 1;
grid[1][2] = 1;
grid[1][3] = 1;
grid[2][1] = 1;

console.log(PathFind([0,0], grid));

output 1:
[ ‘Right’, ‘Right’, ‘Right’, ‘Down’, ‘Down’, ‘Left’ ]

output 2:
[ false ]

typeorm leftJoinAndSelect get one item of relation array

I am Korean student. please understand my bad english.

I am trying to get chatting_room with participants
and the chatting_room have participant who is loggedInUser.

here is my code

await this.Repository
    .createQueryBuilder("room")
    .leftJoinAndSelect("room.owner", "owner")
    .leftJoinAndSelect("room.matching", "matching")
    .leftJoinAndSelect("room.participants", "participants")
    .where("participants.userId = :userId", { userId: loggedInUser.userId })
    .getMany()

there are two participants in chatting_room ( ManyToMany)
but result show me only one that is loggedInUser
I want to get all participants .
what is the problem ?
please help me !

How to navigate from one screen to another in React native?

When I click on Sign Up button I want to navigate to Sign up page but it did not work. I have imported the screens and navigated screen also to app.js file. I am getting an ReferenceError : Can’t find variable: navigation. Also I am unable to insert background image? Below is the Sign Up page.

import React from 'react';
import { StyleSheet,ImageBackground,Text, View, TextInput, TouchableOpacity } from   'react-native';
let bgImage='../../resources/images/bg2.png'
export default class LoginScreen extends React.Component {
      state={
        email:"",
        password:"",
      }
      render(){
        return (
        <View style={styles.container}>
            <Text style={styles.logo}>Trollo</Text>
           <View style={styles.box}>
            <View style={styles.inputView} >
              <TextInput
                style={styles.inputText}
                placeholder="Email"
                placeholderTextColor="#808080"
                onChangeText={text => this.setState({email:text})}/>
            </View>
            <View style={styles.inputView} >
              <TextInput
                secureTextEntry
                style={styles.inputText}
                placeholder="Password"
                placeholderTextColor="#808080"
                onChangeText={text => this.setState({password:text})}/>
           </View>
            <TouchableOpacity style={styles.loginBtn}>
               <Text style={styles.loginText}>SIGN IN</Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={styles.forgot}>Forgot Password?</Text>
            </TouchableOpacity>
           </View>
            <Text style={styles.text1}>New Here?</Text>
            <TouchableOpacity style={styles.signupBtn}>
              <Text style={styles.loginText}>SIGN UP</Text>
            </TouchableOpacity>
            <Text style={styles.logoText}>Trollo</Text>
        </View>
        );
      }
    }


});

Receiving error in selenium when using HTTPS localhost

I am setting up the first automated tests for a web app I’m working on, and have hit a state I don’t understand.

It is a browser app, so I start a very simple static server:

    import http from 'http';

    let serve = serveStatic(path);
    server = http.createServer(function(req, res) {
        var done = finalhandler(req, res);
        serve(req, res, done);
    });

During my testing, I receive an error message HTTP method not allowed

let options = new firefox.Options();
options.headless();
let capabilities = webdriver.Capabilities.firefox().set('acceptInsecureCerts', true);
let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .setFirefoxOptions(options)
    .withCapabilities(capabilities)
    .build();

await driver.get('http://127.0.0.1:3030/index.html');
let tab = await driver.findElement(state.By.css('ps-tabpanel'));
tab = await tab.getShadowRoot(); // HTTP method not allowed

On a hunch, I changed this to an HTTPS connection

import http from 'https';

In this case I receive a very different error

await driver.get('https://127.0.0.1:3030/index.html');
// Reached error page: about:neterror?e=nssFailure2&u=https%3A//127.0.0.1%3A3030/index.html&c=UTF-8&d=%20

So my main question is, what am I doing wrong to access the shadowRoot using Javascript Selenium?

For reference

  • mocha + selenium + firefox
  • gitpod environment
  • have an earlier test that simply verifies I can connect to example.com just to prove the connection is working.

DATABASE SEARCH using Javascript

12/20/2021 – 8:30pm EST – USA

Hello,

First, I am working on a database driven website Built in WIX ( www.wix.com ) ( because I am poor and cant afford to pay for a real website and I am not smart enough to code all of my own website).

I am working on my website ( built in WIX ) with a Data Base. I want users to enter data into a database with part of that data being required PASSWORD and EMAIL. When the customer wants to retrieve the data they entered they have to enter their Correct Password and Email to pull all of the rest of the data they entered.

Using Java Script how can I code the Search where they have to enter the correct password and email AND do I first need to enter HTML code to marry up with the javascript code to make this happen ???

Thank you all for your time.

create an array of objects with same keys and multiple values

I have an array of objects that looks like this:

var data = [
 {
  Bucket: "1",
  Currency: "USD",
  value: "11"
 },{
  Bucket: "2",
  Currency: "USD",
  value: "22"
 },{
  Bucket: "1",
  value: "33"
 }{
  Bucket: "2",
  value: "44"
 }
];

I want to modify the object that looks like this:

[{Bucket: "1", Currency: "USD", value:["11", "33"]}, {Bucket: "2", Currency: "USD", value:["22", "44"]}

How to solve the problem that async and await do not apply to object functions?

How to solve the problem that async and await do not apply to object functions?

Below is my object.

const api = {
         getPoiCategory2List: async (params) => {
         return ajax.axiosJson('/api/viewer/poiCategory2List.json', {params});
     },
}
...

Below is the api call.

const draw = {
      category1List: async(category1List) => {
         var dd = await api.getPoiCategory2List({category1Number, mapNo});
     }
}

At this time, await throws the error The 'await' operator can only be used in an 'async' function.

I am wondering how I can solve this problem.

Best Regards!

How to remove the 1st character if a comma from a cell value using GAS?

I’m iterating over a range and the rows whose conditions are met, gets one of its column’s cell value pushed into an array. Now, from the second iteration on, there shouldn’t be a , at the beginning, but this is naturally inherited.

for (var a = 0; a < dataRng.length; a++) {
    if (dataRng[a][1] == true && dataRng[a][0] == 'SHIPPED' && dataRng[a][40] != 'Yes') {
      msgBody.push(dataRng[a][37].toString().replace(',', '') + 'n');
      
      var iteratedRow = a + 3
      sheet.getRange(iteratedRow, 41).setValue('Yes')      
    }
   }

This is the result now:
NPA-Wordrd,word,OR,97071,Word,IL,60106,0.00,0.00,,,enclosed,operable,,,,,2010|Honda|VN2000|MOTORCYCLE*
,NPA-SacramentoCA,Sacramento,CA,95828,Bensenville,IL,60106,400.00,0.00,cash/certified funds,delivery,enclosed,operable,2021-12-18,,,,2003|HONDA|VTX1800|MOTORCYCLE*

So, right at the beginning of the second row, that comma shouldn’t be there and it should begin with ‘NPA…’

Thank you!

Create React Native component which renders title of component by destructuring ‘props’ argument

I am looking to make a button component which allows the consumer of the component to input the title of the button. I have seen this work before but am now getting an error when I try to run the code.

Error message: ‘Text strings must be rendered within a component.

AppButton code:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native-web';

function AppButton({title}) {
    return (
        <View style={styles.button}>
            <Text style={styles.text}>{title}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    button: {
        backgroundColor: "dodgerblue",
        borderRadius: 25,
        justifyContent: "center",
        alignItems: "center",
        padding: 15,
        width: '100%',
    },
    text: {
        color: "white",
        fontSize: 18,
        textTransform: 'uppercase',
        fontWeight: 'bold',
    }
})

export default AppButton;

Output code:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import AppButton from './components/AppButton';

export default function App() {
  return (
    <View style={styles.container}>
      <AppButton title = "Push Me"/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});