Category: javascript

Hope you all are doing well.

I have deployed my react app in Bluehost, having a URL https://lanterncapitalpartners.com/
Now I am facing an issue while reloading pages, it throws an error

Not Found
The requested URL was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to
use an ErrorDocument to handle the request.

For the homepage, it reloads ok, while for other pages, it throws the error mentioned above.
I don’t know whether it’s a server issue or an app issue.

Help in that matter would really be appreciated.

Can anyone pls confirm is this a valid IP address validator, does it verify all the IP addresses. If not pls suggest a regex (am using JS), which validates all IP addresses

        regExp:/^((([a-fA-F0-9][a-fA-F0-9]+[-]){5}|([a-fA-F0-9][a-fA-F0-9]+[:]){5})([a-fA-F0-9][a-fA-F0-9])$)|^([+-]?(?=.d|d)(?:d+)?(?:.?d*))(?:[eE]([+-]?d+))?([a-zA-Z](([+-]?(?=.d|d)(?:d+)?(?:.?d*))(?:[eE]([+-]?d+))?[a-zA-Z])+)$|(^([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]+[.]){2}([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]))$|(^([0-9]){15}$)/,

Thanks in advance

I want to get notifications from the backend using sockets and to get these notifications you have to be authenticated. To mean you have to pass token with the sockets to get notifications from the back end.
Here is the code i wrote:

    const headers = {
      Authorization: "bearer " + this.authService.getToken()
    };

    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
    const endpoint = protocol +'localhost:8000/channel/on/notification/';
    
    const socket = new WebSocket(endpoint, ['access_token',this.authService.getToken()]);

    socket.onopen = function (e) {
      console.error('WebSockets connection created.');
    };

    socket.onmessage = function (e) {
      const data = JSON.parse(e.data);
      console.log(data)
    };

    socket.onclose = function (e) {
      console.log('Chat socket error ===>>', e)
    };

  }

I still keep getting errors. Any help?

I have a query regarding the sizes of Graphics. I’m trying to code collision detection, my code is as follows:

const collided = (objectBounds, bounds) => {
  return (
    objectBounds.x + objectBounds.width > bounds.x &&
    bounds.x + bounds.width > objectBounds.x &&
    objectBounds.y + objectBounds.height > bounds.y &&
    bounds.y + bounds.height > objectBounds.y
  );
};

const restrictPosToObjectBounds = (objectBounds, bounds, oldBounds) => {
  if (collided(objectBounds, bounds)) return oldPos;
  else
    return {
      x: bounds.x,
      y: bounds.y
    };
};

And then I’ll call it like this:

const objectPosition = object.getLocalBounds()
const oldPosition = object.getLocalBounds()
restrictPosToObjectBounds (
    objectPosition,
    {
      ...getNewPos(oldPosition),
      width:oldPosition.width,
      height:oldPosition.height,
    },
    oldPosition
  )

Which kinda works, but it there would be a big gap around the object I’m colliding with, leaving me unable to properly collide with it

If I change my collide function to this (dividing the width and heights by half)

const collided = (objectBounds, bounds) => {
  return (
    objectBounds.x + objectBounds.width / 2 > bounds.x &&
    bounds.x + bounds.width / 2  > objectBounds.x &&
    objectBounds.y + objectBounds.height / 2  > bounds.y &&
    bounds.y + bounds.height / 2  > objectBounds.y
  );
};

Then it works properly, any idea why? Is the scale of a Graphic rendered differently or something, how do it get its accurate width and height?

I have this javascript code.

How would i remove the animation from it and just show and hide the elements

here is just the javascript code.

If needed i can post the html

………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

var $allTiles = $(".js-tile");
var $Tiles = $(".Tiles");

$(".Tiles > .Tile").each(function(i, el) {  
  
  var $tile = $(el);
  var target = $tile.children(".Tile-flyout");
  
  // get each items flyout height with extra buffer
  var thisHeight = target.children(".Tile-content").outerHeight()+20;
  
  // Create ne timeline in paused state
  var tl = new TimelineMax({
    paused: true,
    reversed:true//,
    //forward: true // not a valid GSAP property 
  });

  TweenLite.set(target, {
    height:0,
    autoAlpha: 0,
    display: "none"//,
  });    
  // animate stuff
  tl.to(target, 1, {
    delay: 0.5,
    height: thisHeight,
    autoAlpha: 1,
    display: "block",
    ease: Cubic.easeInOut,
    overwrite: "none"
  });
  // store timeline in DOM node
  el.animation = tl;
  
  // create element event handler
  $(el).on("click", function(event) {
    
    event.preventDefault();
    
    var that = this;
    var currentTile = $(this);
    
    $(".Tiles > .Tile.is-expanded").not(this).each(function(i, element){
        console.log('reverse?');
        element.animation.reverse();
        currentTile.removeClass("not-expanded");
    }); 
     
     $allTiles.not(currentTile).removeClass("is-expanded");
     $allTiles.not(currentTile).removeClass("not-expanded");
    
     currentTile.toggleClass("is-expanded");

     if (this.animation.reversed()) {
          console.log('1');
          $allTiles.not(currentTile).addClass("not-expanded");
       
          this.animation.play();
          target.removeClass("reversing");
     } else {
          console.log('2');
          this.animation.reverse();
          target.addClass("reversing");
     }
  });  
});

I want to use the following JQuery plugin as part of my React app, and haven’t had success in doing so: http://viima.github.io/jquery-comments/#link-3. This is a comments plugin that creates threads/replies.

Currently, I’ve tried to integrate it as follows, but to no avail:

import React, { Component } from "react";
import $ from "jquery";
import "./jquery-comments.css";
import "./jquery-comments";

class Comments extends Component {
  componentDidMount() {
    this.$el = $("#comments-container");
    this.$el.comments({
      profilePictureURL:
        "https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png",
      getComments: function (success, error) {
        var commentsArray = [
          {
            id: 1,
            created: "2015-10-01",
            content: "Lorem ipsum dolort sit amet",
            fullname: "Simon Powell",
            upvote_count: 2,
            user_has_upvoted: false,
          },
        ];
        success(commentsArray);
      },
    });
  }

  render() {
    return <div ref={(el) => (this.el = el)}></div>;
  }
}

export default Comments;

I have a date range picker on my website.

When a user inputs the date and time range, I want to send separately within the form the startDate and the endDate

daterangepicker code:

    $('input[name="datetimes"]').daterangepicker({
        timePicker: true,
        timePickerIncrement: 5,
        startDate: moment().startOf('hour'),
        endDate: moment().startOf('hour').add(32, 'hour'),
        locale: {
          format: 'YYYY-MM-DD hh:mm'
        },
        opens: 'center',
        drops: 'auto'
    });

And this is what I tried:

$('#formid').submit(function(e) {
    e.preventDefault();
    let startDate = ($('#datetimes').data('daterangepicker').startDate).format('YYYY-MM-DD hh:mm');
    let endDate = ($('#datetimes').data('daterangepicker').endDate).format('YYYY-MM-DD hh:mm');
    $(this).append('<input type="hidden" name="start_date" value='+startDate+' /> ');
    $(this).append('<input type="hidden" name="end_date" value='+endDate+' /> ');
    this.submit();
});

Before the this.submit(); I did a console.log(startDate) and thi is what I am getting:

I am getting the date and the time (as expected), but then if I try doing a print(request.POST) in the view (django back-end), this is what I get:

Somehow, during the POST the HH:mm disappeared.

How can I keep the values of hh:mm during the POST?

I’m seeing a lot of Javascript plugins utilizing a pattern like the one below in the beginning of the main plugin script.

I’ve tried looking up the Internet but couldn’t find any explanation and I don’t have any idea why this is needed.

Excerpt from Datatables:

(function( factory ) {
    "use strict";

    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery'], function ( $ ) {
            return factory( $, window, document );
        } );
    }
    else if ( typeof exports === 'object' ) {
        // CommonJS
        module.exports = function (root, $) {
            if ( ! root ) {
                // CommonJS environments without a window global must pass a
                // root. This will give an error otherwise
                root = window;
            }

            if ( ! $ ) {
                $ = typeof window !== 'undefined' ? // jQuery's factory checks for a global window
                    require('jquery') :
                    require('jquery')( root );
            }

            return factory( $, root, root.document );
        };
    }
    else {
        // Browser
        factory( jQuery, window, document );
    }
}
(function( $, window, document, undefined )
...

Excerpt from Slick.js

;(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {
...

I am getting this error while trying to map an array with the object.

Type 'unknown' is not assignable to type 'ReactNode'.
  Type 'unknown' is not assignable to type 'ReactPortal'.ts(2322)
index.d.ts(1353, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'

Here is my code.

const data = [
  {
    label: "CLIENT ID",
    value: "clientId",
  },
  {
    label: "BILLING CUSTOMER ID",
    value: "billingCustomerId",
  },
  {
    label: "EMAIL",
    value: "email",
  },
  {
    label: "PHONE NUMBER",
    value: "phoneNumber",
  },
  {
    label: "BUSINESS NAME",
    value: "businessName",
  },
  {
    label: "BILLING ADDRESS",
    value: "billingAddress",
  },
  {
    label: "TAX DETAILS",
    value: "taxDetails",
  },
  {
    label: "LOCATION",
    value: "location",
  },
  {
    label: "LANGUAGE",
    value: "language",
  },
];
const ProfileDetail = (props: any) => {
 

 
  const dispatch = useDispatch();
  useEffect(() => {
    if (clientId !== null && userMasterId !== null && accessToken !== null) {
     
      clientDetail(accessToken, clientId);
    }
  }, [clientId, userMasterId, accessToken]);
  const profileState: any = useSelector((state: any) => state.profileBilling);
  const clientDetail = async (aToken: string, cId: string) => {
    await dispatch(getClientDetailThunk(aToken, cId));
  };

  return (
    <div>
      {data.map((item: any, i: number) => {
        return (
          <Box marginY={2} key={item.label}>
            <Typography className={classes.menuTitle}>{item.label}</Typography>
            <p className={classes.menuSubtitle}>
              {item.value === Object.keys(profileState?.cDetail)[i].     // I tried to map the array value like this so that i don't have to repeat this block of code.
                ? Object.values(profileState?.cDetail)[i]
                :  null}
            </p>
          </Box>
        );
      })}
    </div>
  );
};

export default ProfileDetail;

I am not sure if i am doing it write or wrong. But the code is working on UI but it is showing the typescript error which i am not sure how to resolve.

This how profileState.cDetail looks like.

{
billingAddress: "Street2",
billingCustomerId: "cus_Kf4ylZZmyALR6f",
businessName: "xxxxxxx",
clientId: "67f3b1f6",
email: "[email protected]",
language: "English",
location: "xxxx",
phoneNumber: "1234123412",
taxDetails: "123",
}