Category: javascript

I have a strange problem. I am trying to write code that groups strings that end with the longest same substring.

For example, I have a collection of strings:

["samsung.phone.com", "lg.phone.com", "phone.com", "camera.dsrl.nikon.com", "amd.gpu.com", "intel.cpu.com" ]

I want to create a dictionary where they will be grouped by the longest-ending string (excluding the last part – .com).

The dictionary should look like this:

["phone.com" - "lg.phone.com", "samsung.phone.com"],
["camera.dsrl.nikon.com" - ""], 
["amd.gpu.com" - ""], 
["intel.cpu.com" - ""]

And if I add "cpu.com" to the collection, the new dictionary should look like this:

["phone.com" - "lg.phone.com", "samsung.phone.com"],
["camera.dsrl.nikon.com" - ""], 
["amd.gpu.com" - ""], 
["cpu.com" - "intel.cpu.com"]

Any ideas ?

i just write

<h1>Hello World</h1>

in react and my file is already 140Kb in size. whereas libraries like terser can detect useless variables and functions. is there any nodejs library which can remove unused function library? so that my files are smaller and the website is lighter

var view = new ol.View({
    projection: 'EPSG:4326',
    center: [10.70, 36.50],
    zoom: 5,

});
var view_ov = new ol.View({
    projection: 'EPSG:4326',
    center: [10.70, 36.50],
    zoom: 7,
});


var base_maps = new ol.layer.Group({
    'title': 'Base maps',
    layers: [
        new ol.layer.Tile({
            title: 'Satellite',
            type: 'base',
            visible: true,
            source: new ol.source.XYZ({
                attributions: ['Powered by Esri',
                    'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'
                ],
                attributionsCollapsible: false,
                url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                maxZoom: 23
            })
        }),
        new ol.layer.Tile({
            title: 'OSM',
            type: 'base',
            visible: true,
            source: new ol.source.OSM()
        })


    ]
});

var OSM = new ol.layer.Tile({
    source: new ol.source.OSM(),
    type: 'base',
    title: 'OSM',
});

overlays = new ol.layer.Group({
    'title': 'Overlays',
    layers: []
});

var secteurs = new ol.layer.Image({
            title: 'secteurs',
             extent: [-180, -90, -180, 90],
             
            source: new ol.source.ImageWMS({
                url: 'http://localhost:8080/geoserver/wms',
                params: {
                    'LAYERS': 'cc:batiment'
                },
                ratio: 1,
                serverType: 'geoserver',
                visible: true, 
            })
        });

map = new ol.Map({
    target: 'map',
    view: view,
     
});



map.addLayer(base_maps);
map.addLayer(overlays);
overlays.getLayers().push(secteurs);

enter image description here

I tried changing the map visibility
tried changing its position in the code so the “secteurs” layer is added after the base map layers and any other overlay layers

ps: I can add it wfs?request=getCapabilities and it works properly

console log :

Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

Deprecated Feature Used

I’m in a project where users can design widgets in no code and display them on their sites by embed a js file. Sometimes my js codes (depending on user’s site) don’t work. I want to isolate my JS file (eg shadow dom) and add it to the site. How can I do that?

I am adding web support for in react native app using react native web.
I followed CRA ( create react app ) approach with react native web and react scripts start to build web build for react native.

But during compilation I am getting errors in node modules like :

I am unable to understand what is going wrong. Even if I am not using this in my entry component which is just a button. Still it is giving error. any idea?

I tried changing webpack and babel configuration and still getting error.
I attached only 2 screen shots but I am getting errors in multiple node modules. Any idea what approach should I follow

I want to open an external app from React Native in IOS if the app is installed go to an app other view and go to APP Store. I am done with that in Android using react-native-send-intent
works fine in Android but not working in ios.

const openExternalApp = item => {
    // console.log('item bank', item);
    if (Platform.OS == 'android') {
      if (item) {
        SendIntentAndroid.isAppInstalled(item.BundelID).then(suport => {
          if (suport) {
            SendIntentAndroid.openApp(item.BundelID);
          } else {
            Linking.canOpenURL(item.androidAppLink).then(suport => {
              if (suport) {
                Linking.openURL(item.androidAppLink);
              }
            });
          }
        });
      }
    } else {
      // console.log('ios');
      AppLink.maybeOpenURL(item?.ios?.url, {
        appName: item?.ios?.name,
        appStoreId: item?.ios?.appId,
        appStoreLocale: {appStoreId: item?.ios?.appId},
        // playStoreId,
      })
        .then(() => {
          // do stuff
        })
        .catch(err => {
          // handle error
        });
    }
  };

[GPT] Error in googletag.display: could not find div with id “div-gpt-ad-Programizcom36787” in DOM for slot: /8095840,68410703/.2_A.36787.4_Programiz.com_tier1.

am expecting to excute this but it not working and not giving anyoutput

I’m working on a Chrome extension that moves data between websites so it can be used for things like auto filling forms. It does this by handling all data processing in the context of the site the data originates from so that no cross-site requests or scripting happen (ie. taking a spreadsheet of data, crunching it down to just the parts I need, and storing that in an object or map for transport).

I have two options for how I can do this (that I’m aware of):

1. Use chrome.local.storage along with onEvent listeners to have one context write the data to local storage, then have the other see the change, take the data, and immediately set the storage variable back to null after processing.

2. Have the first context send a message with the data to the other via chrome.runtime.sendMessage where the message is then received and handled as needed.

I’ve used both methods of moving data in the past when working with script injectors, but I want be sure I’m using the most secure, even if the data being moved will usually be arbitrary.

Thanks in advance!

im trying to make by inventory software with accurance and updated crossing stock after action done
but it tack upt 20sec to complete update so ineed this process done without affect client process iam using php and javascript web worker but still client process pending until worker.js finish process

  <script>
 //main.js
var worker = new Worker('worker.js')
worker.postMessage('fund.php')
worker.addEventListener('message', function(e) {
data = e.data
})
</script>       





<script>
   //worker.js
 function asyncAddCounter() {
 var xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
 if (this.readyState == 4) {
 counter++;
}
};
xhttp.open("GET", "fund.php", true);
 xhttp.send();
}

asyncAddCounter();
</script>     `       


   <?php 
   //fund.php
     $query5=mysqli_query($con,"SELECT * FROM user WHERE name='$name' and user_id='$idzz'")or die(mysqli_error($con));
         
        $row5=mysqli_fetch_array($query5);
        $branch=$row5['branch_id'];
         $company=$row5['man_id'];
$request = 1;
if(isset($_GET['request']) && ($branch>0 || $company>0)){
$request = $_GET['request'];
}
// DataTable data
if(($request == 1) && ($branch>0 || $company>0)){

$empQuery = "SELECT *, price.retail as reja, pprice.retail as nunuzi from product inner join            category on (product.cat_id=category.cat_id) inner join price on (price.proid=product.prod_id) inner   join pprice on (pprice.proid=product.prod_id)    WHERE 1 and product.branch_id='$branch' and product.man_id='$company' and price.branch_id='$branch' and price.man_id='$company'and pprice.branch_id='$branch' and pprice.man_id='$company' and product.deleted='0' ";


   $empRecords = mysqli_query($con, $empQuery);
  $data = array();
 $nn=0;
while ($row = mysqli_fetch_assoc($empRecords)) {
     $pp=$row['prod_id'];
      $pri=$row['prod_id'];
 
 
     //shop qty
 $sold=mysqli_query($con,"SELECT SUM(qty) as psum from sales inner join  sales_details on (sales_details.sales_id=sales.sales_id)  inner join price on (sales_details.prod_id=price.pid) inner join product on (product.prod_id=price.proid) where sales.status='0' and sou='0' and product.prod_id='$pri'")or die(mysqli_error($con));
$rowsold = mysqli_fetch_assoc($sold);
$total_sold1=number_format($rowsold['psum']);

$sin=mysqli_query($con,"SELECT SUM(qty) AS ssum FROM stockin INNER join product on (stockin.prod_id=product.prod_id)  WHERE product.prod_id='$pri' and desti='0'")or die(mysqli_error($con));
$rowsin = mysqli_fetch_assoc($sin);
$total_in=number_format($rowsin['ssum']);

$sou=mysqli_query($con,"SELECT SUM(qty) AS sout FROM stockout INNER join product on (stockout.pro_id=product.prod_id)  WHERE product.prod_id='$pri' and sosi=0")or die(mysqli_error($con));
$rowsou = mysqli_fetch_assoc($sou);
$total_sout=number_format($rowsou['sout']);

$tin=mysqli_query($con,"SELECT SUM(qtyy) as tinsum FROM transfer_s INNER join trantem on (transfer_s.ttrid=trantem.trid) WHERE trantem.prid='$pri' and destine='0'")or die(mysqli_error($con));
$rowtin = mysqli_fetch_assoc($tin);
$total_transin=number_format($rowtin['tinsum']);

$tou=mysqli_query($con,"SELECT SUM(qtyy) as tousum FROM transfer_s INNER join trantem on (transfer_s.ttrid=trantem.trid) WHERE trantem.prid='$pri' and source='0'")or die(mysqli_error($con));
$rowtou = mysqli_fetch_assoc($tou);
$total_transou=number_format($rowtou['tousum']);

$tex=mysqli_query($con,"SELECT SUM(pqty) as exsum FROM extend WHERE prid='$pri' and sid=0")or die(mysqli_error($con));
$rowext = mysqli_fetch_assoc($tex);
$total_extend=number_format($rowext['exsum']);
      

      $shop=$start+$total_in-$total_sold1-$total_sout+$total_transin-$total_transou+$total_extend;
       $qqq=$shop;
       $re=$row['reorder'];
       $tex=mysqli_query($con,"INSERT INTO shop_stock(prod, stockin, stockout, train, traout, sold, adju, closing) VALUES ('$pri','$total_in','$total_sout','$total_transin','$total_transou','$total_sold1','$total_extend','$shop')")or die(mysqli_error($con));
       
   } ?>    `

i expecting this process to running background without affect my crient

I am successfully using HTMX to create and edit content without reloads on my pages (I am following this method: https://blog.benoitblanchon.fr/django-htmx-modal-form/).

For my model, I use django-autocomplete-light to select multiple colors conveniently. This works fine the first time. However, when I close the modal and re-open it (recreate it with an HTMX get request), the multi-select element is shown twice, once how it is not supposed to be shown and once as expected, see screenshot here: https://i.stack.imgur.com/eArEE.png.

I fixed similar JS issues by re-initiating relevant Javascript code with the htmx.onLoad(function(content) { function.

Can you help me understand what I need to put there to re-initiate the django-autocomplete-light element?

Thanks a lot!

I’m trying to create a sticky aside element that stays on top of other items within the same container when scrolling. However, I’m facing some issues with the implementation.
The code below attempts to create a sticky aside element that should stay on top of other items in the container when scrolling. However, the aside element either doesn’t stick or overlaps with other items.

I want the sticky aside element to stick at the top of the container and scroll with the page until it reaches the end of the container, where it should stop scrolling. It should not overlap with other items within the container.

Here’s the code I’ve tried:

window.addEventListener('scroll', function() {
  var stickyAside = document.getElementById('sticky-aside');
  var container = stickyAside.closest('.container');
  var containerTop = container.offsetTop;
  var containerBottom = containerTop + container.offsetHeight;
  var asideHeight = stickyAside.offsetHeight;

  if (window.pageYOffset > containerBottom - asideHeight) {
    stickyAside.classList.add('sticky');
  } else {
    stickyAside.classList.remove('sticky');
  }
});

#sticky-aside {
  width: 100%;
  top: 0;
}

.row {
  position: relative;
}

.sticky {
  position: fixed;
  width: 100%;
  top: 0;
}

<div class="container mt-5">
  <div class="row">
    <!-- My posts section -->
  </div>
</div>

<div class="container mt-5">
  <div class="row mt-5 border-top border-dark pt-5">
    <aside class="col-sm-4" id="sticky-aside">
      <!-- Sticky aside content -->
    </aside>
  </div>
</div>

I have a very big number that is being used as id in the third party service, which i dont access to.

In a request to that service, i have to pass id as number as there is a type check.

For eg 3302883882261053909

I am trying to use +3302883882261053909 and parseInt() but both are rounding it off to 3302883882261054000

I tried using toFixed() but that is converting it to something else totally 3302883882261053952

I have tried using string and BigInt but both and not type compatible. What else can i do?

I have an Angular Material app that where I am trying to show all the customers that I get from an API call… My app compiles but in the browser console I keep getting this error:

ERROR Error: Uncaught (in promise): TypeError:
columnDef._columnCssClassName is not iterable (cannot read property
undefined) TypeError: columnDef._columnCssClassName is not iterable
(cannot read property undefined)

What am I doing wrong? I suspect it has something to do how I’m feeding the data to table columns

I have created an interface called Customers with the following structure:

export interface Customers {
  _links: {
    first: {
      href: string;
    };
    last: {
      href: string;
    };
    next: {
      href: string;
    }
    self: {
      href: string;
    };
  };
  _embedded: {
    customers: [
      {
        id: string;
        internal_id: string;
        name: string;
        name2: string;
        address: string;
        address_post_nr: string;
        phone: string;
        email: string;
        gdpr: string,
        mailing: string,
        tags: string;
      }
    ]
  };
  page: number;
  page_count: number;
  page_size: number;
  total_items: number;
}

then I have created a component where I would like to show my customers in a table with these columns: Id, name, address, email, mailing, gdpr, tags

here is the component.ts file code:

export class CustomersComponent implements OnInit, OnDestroy{

  displayedColumns: string [] = ['Id', 'name', 'address', 'email', 'mailing', 'gdpr', 'tags'];
  public dataSource: MatTableDataSource<Customers["_embedded"]>;

  private customerSubscription: Subscription;

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  private dataArray: any;
  constructor(
    private customersServcice: CustomersService,
  )
  { }

  ngOnInit() {
    this.getAllCustomers();
  }

  getAllCustomers() {
    this.customerSubscription = this.customersServcice.getAllCustomersList().subscribe(
      (res) => {
        console.log('res: ', res);
        this.dataArray = res;
        this.dataSource = new MatTableDataSource<Customers["_embedded"]>(this.dataArray);
        console.log('this.dataSource: ', this.dataSource);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
  }

  ngOnDestroy() {
    if(this.customerSubscription) {
      this.customerSubscription.unsubscribe();
    }
  }
}

And here is the components html table code:

  <table mat-table [dataSource]="dataSource" class="crm-table mat-elevation-z0">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> Id </th>
      <td mat-cell *matCellDef="let element" class="left-text"> {{element.id}} </td>
    </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element" class="left-text"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef="address">
      <th mat-header-cell *matHeaderCellDef> Address </th>
      <td mat-cell *matCellDef="let element" class="left-text"> {{element.address}} </td>
    </ng-container>
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> Email </th>
      <td mat-cell *matCellDef="let element" class="left-text"> {{element.email}} </td>
    </ng-container>
    <ng-container matColumnDef="mailing">
      <th mat-header-cell *matHeaderCellDef> Mailing </th>
      <td mat-cell *matCellDef="let element" class="left-text"> {{element.mailing}} </td>
    </ng-container>
    <ng-container matColumnDef="gdpr">
      <th mat-header-cell *matHeaderCellDef> GDPR </th>
      <td mat-cell *matCellDef="let element" class="left-text"> {{element.gdpr}} </td>
    </ng-container>
    <ng-container matColumnDef="tags">
      <th mat-header-cell *matHeaderCellDef> Tags </th>
      <td mat-cell *matCellDef="let element" class="left-text"> {{element.tags}} </td>
    </ng-container>
    <ng-container matColumnDef="">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell class="left-text"> + </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
  </table>

I’m attempting to create a network plot in VEGA using a force-directed layout that displays labels for each node. One possible approach was mentioned in this question. By referring to the Vega Editor, we can observe that the labels are present, but there are some issues with overlapping and visual clutter.

Consequently, I was wondering if would be possible achieving a result similar to this example, where the label appears when hovering over a node and remains highlighted and fixed within the chart.

I’ve tried some changes in ‘text’ field but I guess it can be more complex than that.

When I tried to auto fill single row . Its work fine. where as when I add row dynamically by using java script, autofill do not work properly. For example : When I write id, Name automatically come in next field.

id Name
1 Umar

But when I add more row dynamically by using java script, than following things happen
id Name
1 Umar
When I try to insert 2nd record . for instance id 2, than instead of giving name in this row, Name of first row chnaged. Can any body explain how can i handle this issue ?????

I tried different techniques but failed