Category: javascript

i have two kendodatepickers “startDate” and “endDate”. I want every time the user set a date in startdate, establish the max date one month forward from the selected date to pick in endDate datepicker.

I am setting up the first time in this way:

 $("#datStartDate").kendoDatePicker({
        start: "month",
        depth: "year",
        format: "dd/MM/yyyy",
        dateInput: true,
        change: (e) => {                
            return moc.rangeStartDate("datStartDate", "datEndDate");
        },
        min: new Date(1900, 0, 1),
        max: new Date(),
        value: new Date()
    });

    $("#datEndDate").kendoDatePicker({
        start: "month",
        depth: "year",
        format: "dd/MM/yyyy",
        dateInput: true,
        max: new Date(),
        change: (e) => {
            return moc.rangeEndDate("datStartDate", "datEndDate");
        },
        value: new Date()
    });

I tried this to set the max value, each time the startDate picker is cheanged:

$("#datStartDate").change(() => {
        let startDate = ($("#datStartDate").val()).split("/");
        console.log("cambio de fecha", parseInt(startDate[2]), parseInt(startDate[1]), parseInt(startDate[0]))
        let datePicker = $("#datEndDate").data("kendoDatePicker");
        datePicker.max(new Date(parseInt(startDate[2]), parseInt(startDate[1]), parseInt(startDate[0])));
        datePicker.value(new Date(parseInt(startDate[2]), parseInt(startDate[1]), parseInt(startDate[0])))
    })

It doesnt works and i dont get an error. How can i do this? Thank you so much for you time.

I am using this:

• KendoUI
• JavaScript
• ASP .NET MVC
• RAZOR
• jquery

Is there a way to have a clickable div with a nested <a>, that doesn’t execute the click event on the div when the <a> tag is clicked?

Looking for a vanilla JS solution

const div = document.querySelector('div');
div.addEventListener('click', e => {
  this.console.log('clicked the div');
});

div {
  width: 300px;
  border: 2px solid green;
  padding: 1em;
}

<div> 
<p>This is a button</p>
<a href="/" target="_blank">Link to somewhere else</a>
</div>

New react developer here, i’m doing my own project, my question is related to a button(material ui), when same button is clicked second time i want that button to get disabled={true}, did not find any examply related to this on stack.

<Button
              onClick={this.startDraw.bind(this)}
              disabled={}
              startIcon={<Brush />}
            >

so at first button is clickable, when it is clicked happens something, but when this same button is clicked second time then button should get disabled (cannot be clicked anymore).
My english is not so good so there could be mistakes.

I need to make several input fields for user input to type in height, width, color, left and top. And when user clicks “Go”-button it generates a div with same height, width, color, left-right-positioning on the screen.

Something like this: https://imgur.com/a/jNcg7Rr

I can make it work with inputs changing divs, but I cant figure out how to make the Go button generate a fresh div onclick. Thx..

I am trying to debug my JS code in VS Code, but I keep on getting an error I don’t quite understand. Also, not been able to ‘google fix’ the problem. See the attached screenshot for clarification.

I hope you can help me with the issue.

Cheers.

screenshot error

while importing Routes from routes.js nodemon crash is there any new update regarding the importation of Routes from routes.js??

Index.js code

import express from "express";

//components
import Connection from "./database/db.js";
import Routes from "./routes/Route.js";

const app = express();
app.use("/", Routes);

const PORT = 8000;

Connection();
app.listen(PORT, () =>
  console.log(`Server is running successfully on PORT ${PORT}`)
);

Routes.js code

import express from "express";

import {
  newConversation,
  getConversation,
} from "../controller/conversation-controller.js";
import { addUser, getUser } from "../controller/user-controller.js";
import { newMessage, getMessage } from "../controller/message-controller.js";

const route = express.Router();

route.post("/add", addUser);
route.get("/users", getUser);

route.post("/conversation/add", newConversation);
route.post("/conversation/get", getConversation);

route.post("/message/add", newMessage);
route.get("/message/get/:id", getMessage);

export default route;

When I scroll slightly down on my canvas, it does not allow me to drag my text at all. Examples (These are GIFs) –

https://gyazo.com/e60d2efd924ced758c2c6441391804db

GIF explained: So you saw the drag was working when I was on top of the page but when I scrolled slightly down. It completely stopped working. I added a few console.logs around, and what I know is the click event listener for the canvas is working but it isn’t detected the text when I slightly scroll down on the page.

I based my drag code from: http://jsfiddle.net/m1erickson/9xAGa/ | What you can see is if you change the canvas size width: 667 and height: 800, and when you scroll slightly down, you will have the same issue I am having.

HTML Code:

<div id="middle_container">
        <div class="center_container">
            <canvas id="canvas" width="667px" height="800px"></canvas>
        </div>
</div>

JavaScript Code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var BB=canvas.getBoundingClientRect();
var offsetX = BB.left;
var offsetY = BB.top;
var mx;
var my;
var texts = [];
var images = [];
var dragF = -1;
var mode = "none";

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for(const { text, x, y, width, height } of texts) {
        ctx.fillText(text, x, y);
    }
}

function addNewText(string_text, arrayname) {
    var y = texts.length * 20 + 20;
    var text = {
        text: string_text,
        x: 20,
        y: y,
        name: arrayname
    };
    ctx.font = "32px verdana";
    ctx.textBaseline = "top";
    text.width = ctx.measureText(text.text).width;
    text.height = 32;

    texts.push(text);
    draw();
}

function myDrag(a,e) {
    if (a == "down") {
        e.preventDefault();
        e.stopPropagation();
        mx=parseInt(e.clientX-offsetX);
        my=parseInt(e.clientY-offsetY);
        for(var i=0;i<texts.length;i++){
            if(hitDrag(mx,my,i)){
                console.log("found");
                dragF = i;
            }
        }
    }
}

addNewText("Hello World", "string1")

$("#canvas").mousedown(function(e) {
    myDrag("down", e);
});

I have tried to echo my json into my html page with php, but it only prints in console or gives back an error.
I’m pretty new to this so please help.

this is the javascript with fetch and activated onclick to submit one to php

async function hey(){
let click = 1;

await fetch('data.php',{
    method: 'POST',
    header: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(click),
}).then(response => response.json())
.then(data => {
  console.log(data);
})
.catch((error) => {
  console.error(error);
});}

this is the php but it will only ever print to the console

<?php
$json = file_get_contents('php://input');

echo $json;
?>

I am embedding a Facebook events feed through their API to my website (I have a developer account and I am logged into it), however after using the Facebook plugin part https://developers.facebook.com/docs/plugins/page-plugin/# and selecting the event tab, it just shows a header of the page, and nothing else: (Result of the problem here: https://www.hairydogvenue.co.uk/gig-guide )

Is this just a bug on Facebook’s side? It was working fine for many months before, I am also an admin of the page in question.

iframe code here:

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fthehairydogderby&tabs=events&width=500&height=850&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=505386827636891" width="500" height="850" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

I have an object like this:

let obj = {'machine1':{'err':'404', switch:false},
           'gadget1':{'err':'404', switch:true}}

Would not pass validation. => return false



let obj2 = {'machine2':{'err':'404', switch:false},
           'gadget2':{'err':null, switch:true}}

Would pass validation. => return true

I want to return true when every key in the object in which the switch is set to true does not have any errors (see obj2). (For machine2 the ‘404’ error does not matter, because the switch is set to false.)

I tried something like that, but didn’t get far.

function try() { 
  for (x in obj) {
    obj[x].filter(x=>y.switch === true)
}
}

Thanks for reading!

Before

  const array = [
    { group: '1', tag: ['sins'] },
    { group: '1', tag: ['sun'] },
    { group: '2', tag: ['red'] },
    { group: '2', tag: ['blue'] },
    { group: '2', tag: ['black'] },
  ];

After

  const array = [
    { group: '1', tag: ['sins', 'sun'] },
    { group: '2', tag: ['red', 'blue', 'black'] },
  ];

I want to change it like the chord above. I want someone to create a cool chord.

im trying to put image in the background by using background-img:url(imageLing)
but not working and it’s return to me when inspect the element background-image: url(assets/backgrounds/5.jpg);
what is the issue :
this is my code

//login page 

<LoginWrapper img={`assets/backgrounds/${randomImage}.jpg`}>
        <Wrapper>
          <LoginForm onClickLogin={login} />
        </Wrapper>
      </LoginWrapper>

//css file using styled- components 

interface LoginProps {
  img: string;
}

export const LoginWrapper = styled.div<LoginProps>`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 93vh;
  background-image: url(${({ img }) => img});
  background-size: cover;
  background-repeat: no-repeat;
`;

I have updated the jQuery version in the application and I am getting an error in the DatePickerComponent with jQuery 3.5.0.here i am getting error on .ClassName; i don’t know what to do about it

else {
  if (myOwnFormat == 'HH:mm:ss' || myOwnFormat == 'HH:mm') {
    var className = document.getElementById("icon_" + pickerId).className;
    $("#icon_" + pickerId).removeClass(className).addClass("hcm-grid_calar_saat");
  }
  return myOwnFormat;
}

enter image description here

enter image description here

function getResults(query) {
            fetch(`${api.base}weather?q=${query}&units=metric&appid=${api.key}`)
                .then(weather => {
                    return weather.json();
                }).then(displayResults);
        }
        function displayResults(weather) {
            let city = document.querySelector('.location .city');
            city.innerText = `${weather.name}, ${weather.sys.country}`;

            let now = new Date();
            let date = document.querySelector('.location .date');
            date.innerText = dateBuilder(now);

            let temp = document.querySelector('.current .temptater');
            temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`;

            let weatherType = document.querySelector('.current .weather');
            weatherType.innerText = weather.weather[0].main;

            let hilow = document.querySelector('.hi-low');
            hilow.innerText = `${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c`;
        }

When I am accessing a nested object in the array then this is showing

Uncaught (in promise) TypeError: Cannot set properties of null (setting ‘innerText’)

This happens only with

let weatherType = document.querySelector('.current .weather');
            weatherType.innerText = weather.weather[0].main;

This is a JSON file of API call

{
  "coord": {
    "lon": -0.1257,
    "lat": 51.5085
  },
  "weather": [
    {
      "id": 804,
      "main": "Clouds",
      "description": "overcast clouds",
      "icon": "04d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 10.96,
    "feels_like": 10.2,
    "temp_min": 9.65,
    "temp_max": 11.98,
    "pressure": 1039,
    "humidity": 80
  },
  "visibility": 10000,
  "wind": {
    "speed": 1.54,
    "deg": 340
  },
  "clouds": {
    "all": 90
  },
  "dt": 1639651705,
  "sys": {
    "type": 2,
    "id": 2019646,
    "country": "GB",
    "sunrise": 1639641643,
    "sunset": 1639669905
  },
  "timezone": 0,
  "id": 2643743,
  "name": "London",
  "cod": 200
}

Everything Else is running well, but I don’t know why this is heppening.
Any solution?

How to get external json (in my external files) to html list. Try to avoid jQuery in this question. Because I tried with json but the
$.getJSON is not working. So please try to answer me using Javascript. An in HTML List not HTML Table