Category: javascript

i retrieve data from a ajax call to populate a select element with options. While all works fine, i cannot fingure out why i get empty option tags after every populated row.

  function Countries(continent) {
    $('#countries').empty();
    $('#countries').append("<option>Loading...</option>");

    // init
    var ajaxRequest;

    var dataObject = {
        continent_name: continent
      };

    ajaxRequest = $.ajax({
      type: "POST",
      url:"/process/contact-divisions-countries/",
      dataType:"json",
      data: dataObject
    });

    ajaxRequest.done(function (data, textStatus, jqXHR){

       // THIS IS THE ITERATION WHERE IT GETS OBSCURE

       $.each(data,function (index, item) {
           $('#countries').append('<option value="'+ item.country_name +'">'+ item.country_title +'<option>');
       });

      // TRIED THIS WITH FOREACH ALSO,- SAME RESULT

      // data.forEach((item) => console.log(item));
      // data.forEach((item) => {
      // $('#countries').append('<option value="'+ item.country_name +'">'+ item.country_title +'<option>');
      });

    });

    ajaxRequest.fail(function (data, textStatus, jqXHR){
      console.log(data);
    });

  }

The data gets its result from the json return (/process/contact-divisions-countries/).

  // $_contacts is a array

  foreach($_contacts as $item) {
    $response[] = [
      'country_name' => $item['name'],
      'country_title' => $item['title']
    ];
  }

  $o = json_encode($response);

  echo $o;

Live Example (top of page): https://kubota.olafgleba.de/service/

Any help or hint is highly appreciated. Thx in advance and cheers.

I’m building a React Native/Expo app that uses a custom Dialog component based on @rn-primitives/dialog to display a modal. For most users, the dialog renders correctly. However, some users on certain Android devices (all large-screen or tablet-like devices, e.g. Samsung Galaxy S24+, Xiaomi Redmi Note 12, etc.) only see the dimmed background but not the dialog content.

Here’s the relevant code for my custom Dialog component:

import * as DialogPrimitive from "@rn-primitives/dialog";
import { StyleSheet, useWindowDimensions, View } from "react-native";
import { cn } from "@/utils";
import {
  type ComponentPropsWithoutRef,
  type ElementRef,
  forwardRef,
  type ReactNode,
} from "react";
import { IconX } from "@tabler/icons-react-native";
import { colors } from "@/styles";
import { MotiView } from "moti";

const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;

const DialogOverlay = forwardRef<
  ElementRef<typeof DialogPrimitive.Overlay>,
  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, children, ...props }, ref) => {
  return (
    <DialogPrimitive.Overlay
      style={StyleSheet.absoluteFill}
      className={cn(
        "z-50 flex bg-black/80 justify-center items-center p-2",
        className
      )}
      {...props}
      ref={ref}
    >
      <MotiView
        from={{ top: 16, opacity: 0 }}
        animate={{ top: 0, opacity: 1 }}
        transition={{ type: "spring" }}
      >
        {children as ReactNode}
      </MotiView>
    </DialogPrimitive.Overlay>
  );
});
DialogOverlay.displayName = "DialogOverlay";

const DialogContent = forwardRef<
  ElementRef<typeof DialogPrimitive.Content>,
  ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
    portalHost?: string;
    isBottomSheet?: boolean;
    hasCloseButton?: boolean;
  }
>(
  (
    {
      className,
      children,
      portalHost,
      isBottomSheet,
      hasCloseButton = true,
      ...props
    },
    ref
  ) => {
    const { width } = useWindowDimensions();

    return (
      <DialogPortal hostName={portalHost}>
        <DialogOverlay
          className={cn(isBottomSheet && "justify-end")}
          closeOnPress={hasCloseButton}
        >
          <DialogPrimitive.Content
            ref={ref}
            style={{ width: isBottomSheet ? width : undefined }}
            className={cn(
              "z-50 gap-4 p-6 items-center bg-white shadow-lg rounded-2xl",
              className
            )}
            {...props}
          >
            {isBottomSheet && (
              <View className="w-9 h-1 absolute top-2 rounded-full bg-gray-500" />
            )}

            {children}

            {hasCloseButton && (
              <DialogPrimitive.Close className="absolute right-4 top-4 items-center justify-center size-8 bg-gray-200 rounded-full">
                <IconX size={18} color={colors.gray[700]} />
              </DialogPrimitive.Close>
            )}
          </DialogPrimitive.Content>
        </DialogOverlay>
      </DialogPortal>
    );
  }
);
DialogContent.displayName = DialogPrimitive.Content.displayName;

/* Header, Footer, Title, Description omitted for brevity, 
   but they're just basic forwardRef wrappers around 
   DialogPrimitive components */

export {
  Dialog,
  DialogClose,
  DialogContent,
  /* ...other exports */
};

What happens on problematic devices:

• The dark overlay (background dim) does appear.
• The dialog content (white box and children) never appears, for any part of the app that calls this modal.
• These devices are typically labeled as Android Large or Android Tablet Small (e.g., Samsung Galaxy S24+ and Redmi Note 12).
• We can’t reproduce it on our own simulators or physical devices. Other users see the dialog just fine.

Has anyone encountered a similar issue where modal content won’t render on large-screen Android devices?

Could it be related to large layout constraints, a bug in @rn-primitives/dialog, or a style collision in Tailwind RN?
Are there any known quirks with Android large/tablet classification that break modal layering?

I’m using q-carousel to loop over slides, and each slide contains three images that are loaded from the database. The issue is that the images on the first slide are not visible on the initial load. However, as soon as I swipe to the next slide and back, the images appear.

Why is this happening, and how can I be sure the images load correctly?

Script:

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useStoreItems } from 'src/stores/useStoreItems';

const store = useStoreItems();
const activeSlide = ref(1);

const slideGroup = computed(() => {
    const img = store.featuredItems;

    return [
        [img[3], img[4], img[5]],
        [img[6], img[7], img[8]],
        [img[0], img[1], img[2]],
    ];
});

onMounted(async () => {
    await store.loadFeaturedItems();
});
</script>

Template:

<q-carousel
    :key="slideGroup.length"
    v-model="activeSlide"
    class="bg-transparent non-selectable"
    style="width: 81.25rem"
    transition-prev="slide-right"
    transition-next="slide-left"
    swipeable
    arrows
    height="24rem"
>
  <q-carousel-slide
      v-for="(slide, idx) in slideGroup"
      :key="idx"
      :name="`Slide ${idx + 1}`"
  >
      <div class="fit items-center row">
          <div
              v-for="(img, imgIdx) in slide"
              :key="imgIdx"
          >
              <q-img
                  :src="img.image_url"
              />
          </div>
      </div>
  </q-carousel-slide>
</q-carousel>

I am looking for a possible solution.

I tried to compare two array and get the match name from the second array.

var array1 = [2,10]
var array2 = [
  { id: 1, name: 'robin' },
  { id: 2, name: 'david' },
  { id: 3, name: 'john' },
  { id: 6, name: 'vinay' },
  { id: 10, name: 'ramdin' },
  { id: 15, name: 'vin' },
]

const intersection = array1.find(i => i == array2.site_id);
console.log(intersection);

Result array:

['david','ramdin']

I tried above code it produces undefined

There is skipTransition() method but how am i even supposed to call it since page is not interactive by design. So to skip active transition i have to actually do something which i cannot?

const el = document.querySelector("div");
const btn = document.querySelector("button");
let vt;

el.onclick = () => {
  vt = document.startViewTransition(() => {
    el.style.left = "500px";
  });
};

btn.onclick = () => {
  console.log("btn clicked");
  vt?.skipTransition?.();
};

div {
  position: absolute;
  background-color: peru;
  top: 50px;
  left: 0;
  width: 100px;
  height: 100px;
  view-transition-name: box;
}

::view-transition-group(*) {
  animation-duration: 5000ms;
}

<div></div>
<button>stop</button>

I have a service written in Vite, and for authentication, I use Okta (with the library "@auth0/auth0-react": "^2.2.4"). Some pages work without requiring the user to be logged in, while others require authentication. Everything functions as expected.

We need to embed our service into other websites. Due to company restrictions, this must be done without using an iframe. Therefore, we decided to use web components with Shadow DOM. We developed a working solution, and when the embedded page doesn’t require authentication, everything works fine.

If the host website doesn’t use routing (for example, a React app without a router) and the page requires authentication, it also works fine. However, issues arise when the host website has routing (which most websites do). In this case, it fails because, after the user is redirected from Okta back to the host website, the host tries to handle the /callback route. Since the host website doesn’t have a route matching /callback, it breaks.

The question is: how can we handle this situation?

I tried adding a /callback route on the host website that navigates back to the main page containing the embedded service. However, this didn’t solve the problem. When I attempt to interact with the embedded service, it immediately redirects me to the Okta login. Okta recognizes that I’m already logged in and redirects me back to the host website, creating an infinite redirect loop.

Interestingly, if I first log in to my standalone service and then refresh the page on the host website, everything works fine. I was thinking about using postMessage and tried to send messages to my web component, but I don’t know how to use that data.

I need to find a solution to either:

1. Pass the callback directly to the web component, or
2. Allow the web component to detect whether the user is authenticated on the host website.

The following post provides a solution for adding a horizontal scrollbar to the top of a table: R Shiny table with horizontal scrollbar both at the top and at the bottom. I replicate the solution code from that post at the bottom of this post.

I am trying to implement the same horizontal scrollbar to the top of the wellPanel in the below code but can’t get it to work. I did copy the JavaScript file (as referenced in that post and below) to the www subdirectory correctly. I am trying to use the namespace module structure per the code below, and it’s important that the 3 columns rendered in the wellPanel appear side-by-side, as they do on this image below when running the code:

Any suggestions for a adding a top horizontal scrollbar to the below wellPanel, while retaining the bottom horizontal scrollbar? The reason I need this is in the full code this is intended for, the rendered objects are very long vertically and it will help the user greatly to be able to scroll from both the top and the bottom.

Here is the code in which I am trying to insert add a top horizontal scrollbar:

library(shiny)

mod30_B_ui <- function(id) {
  ns <- NS(id)
  tagList(
    tags$head(
      tags$style(HTML(paste0("
        #", ns("waterfallWellPanel"), " {
        }
        .custom-col {
          display: inline-block;
        }
        .col-width-1, .col-width-2, .col-width-3 {
          width: 300px;
        }
      ")))
    ),
    br(),
    div(
      id = ns("wideContainer"),
      style = "overflow-x: auto; white-space: nowrap; padding-left: 0px;",
      wellPanel(
        id = ns("waterfallWellPanel"),
        style = "display: inline-block; 
                width: auto;",
        uiOutput(ns("groupUI"))
      )
    )
  )
}

mod30_B_server <- function(id) {
  moduleServer(id, function(input, output, session) {
    ns <- NS(id)
    
    output$groupUI <- renderUI({
      fluidRow(
        div(class = "custom-col col-width-1", tableOutput(ns("table1"))),
        div(class = "custom-col col-width-2", tableOutput(ns("table2"))),
        div(class = "custom-col col-width-3", tableOutput(ns("table3")))
      )
    })
    
    output$table1 <- renderTable(mtcars[1:12,1:3]) 
    output$table2 <- renderTable(iris[1:12,1:2])   
    output$table3 <- renderTable(airquality[1:12,1:3])
  })
}

ui <- fluidPage(mod30_B_ui("mod30_B"))

server <- function(input, output, session) {
  mod30_B_server("mod30_B")
}

shinyApp(ui, server)

Below is the solution code from the above mentioned post that successfully adds a top horizontal scrollbar. Download the file jquery.doubleScroll.js from https://raw.githubusercontent.com/avianey/jqDoubleScroll/master/jquery.doubleScroll.js. Put it in the www subfolder of your shiny app and run the below code, it should run fine:

library(shiny)
library(DT)

wideTable <- as.data.frame(matrix(rnorm(1000), nrow = 10, ncol = 100))

js <- "
$(document).ready(function(){
  $('#dtable').on('shiny:value', function(e){
    setTimeout(function(){
      $('#dtable table').wrap('<div id="scrolldiv"></div>');
      $('#scrolldiv').doubleScroll({
        contentElement: $('table'),
          scrollCss: {                
              'overflow-x': 'scroll',
              'overflow-y': 'hidden'
          },
          contentCss: {
              'overflow-x': 'scroll',
              'overflow-y': 'hidden'
          },
        resetOnWindowResize: true
      });
      setTimeout(function(){$(window).resize();}, 100);
    }, 0);
  });
});
"

CSS <- "
.doubleScroll-scroll-wrapper {
  clear: both;
}
"

ui <- fluidPage(
  tags$head(
    tags$script(src = "jquery.doubleScroll.js"),
    tags$script(HTML(js)),
    tags$style(HTML(CSS))
  ),
  br(),
  DTOutput("dtable")
)

server <- function(input, output, session){
  
  output[["dtable"]] <- renderDT({
    datatable(wideTable)
  })
  
}

shinyApp(ui, server)

I am trying to update the renewOn date from state.form.renewOn when the user selects but the default value for that would be one month ahead from the startOn date.

The initial value for startOn and renewOn has been set to null. Whenever I try to set the renewOn to greater than one month, the function gets called and resets to one month. Since this is in new payment model, the startOn date is supposed to be set to last renewOn date and the renewOn date should be set to one month ahead by default. The user should be able to update the renewOn date more than one month but whenever I try to call this function, it keeps looping and resetting back to the default date.

const setPaymentData = (data: GetPaymentSummaryResponse) => {
    let startOn = state.form.Start_On;
    let renewOn = state.form.Renew_On;
    console.log("Initial Start On:", startOn);
    console.log("Initial renew On:", renewOn);
    
    if (data.results.paymentSummary)
    {
      console.log("Payment Summary Data:", JSON.stringify(data.results.paymentSummary));
      if (data.results.paymentSummary.startOn && data.results.paymentSummary.renewOn)
      {
        startOn = localIsoString(data.results.paymentSummary.renewOn).slice(0,10);
        renewOn = addMonths(new Date(startOn), 1).toISOString().slice(0, 10);
      } else if (data.results.paymentSummary.startOn) {
        startOn = localIsoString(data.results.paymentSummary.startOn).slice(0,10);
        renewOn = addMonths(new Date(startOn), 1).toISOString().slice(0, 10);
      } 
    } else {
      //New Members startOn date and renewOn date
      startOn = new Date().toISOString().slice(0,10);
      renewOn = addMonths(new Date(), 1).toISOString().slice(0,10);
    }
    console.log("Start On:", startOn);
    console.log("renew On:", renewOn);

const initialState = {
  Type: [] as IType[],
  Start_On: new Date().toISOString().slice(0, 10),
  Renew_On: addMonths(new Date(), 1).toISOString().slice(0, 10),
  Payment_Mode: "cash",
  Funding_Option: [] as IFundingOption[],
  Optional_Member: [] as IHealthyMemberDifference[],
  PaymentSummary: {
    plan_Price: {
      price: 0,
      currency: "",
      month: "",
    },`your text`
    active_Members: 0,
    options: 0,
    duration: 0,
    costs: 0,
    total_Cost: 0,
    deductions: 0,
    offset_Difference: 0,
    offset_Payment: 0,
    currency: "",
    startOn: null as string | null | undefined,
    renewOn: null as string | null | undefined,
  },
  Members_List_Payment: [] as CreatePaymentBody["members_List_Payment"],
  SMSToLeader: false,
};

this is initial state.

Dispatch:

 dispatch({
      type: "set_form",
      payload: {
        PaymentSummary: {
          plan_Price: data.results.paymentSummary.plan_Price,
          active_Members: data.results.paymentSummary.active_Members,
          options: data.results.paymentSummary.options,
          duration: data.results.paymentSummary.duration,
          costs: data.results.paymentSummary.costs,
          total_Cost: data.results.paymentSummary.total_Cost,
          deductions: data.results.paymentSummary.deductions,
          offset_Difference: data.results.paymentSummary.offset_Difference,
          offset_Payment: data.results.paymentSummary.offset_Payment,
          currency: data.results.paymentSummary.currency,
          startOn: data.results.paymentSummary.startOn,
          renewOn: data.results.paymentSummary.renewOn,
        },
        Members_List_Payment: data.results.members_List_Payment.map((mp) => ({
          member_Id: mp.member_Id,
          memberName: mp.memberName,
          memberPlan: mp.memberPlan,
          transaction_type: mp.transaction_type,
        })),
        Type:
          data.results.type?.map((type) => ({
            id: type.id,
            name: type.name,
          })) ?? [],
        Start_On: startOn,
        Renew_On: renewOn,

        Funding_Option:
          data.results.funding_Option?.map((fo) => ({
            Member_Id: fo.member_Id,
            Type: {
              id: fo.type.id,
              name: fo.type.name,
            },
            Amount: fo.amount,
          })) ??
          state.form.Funding_Option ??
          [],
        Optional_Member:
          data.results.optional_Member?.map((om) => ({
            Member_Id: om.member_Id,
            Quantity: om.quantity,
            Amount: om.amount,
          })) ??
          state.form.Optional_Member ??
          [],
        Payment_Mode: data.results.payment_Mode ?? "cash",
      },
    });
  };

I’m creating a BPMN modeler based on the bpmnjs library and bpmnio. My project consists on building it with custom elements. But I cant make this specific class work.
I have this class

import { assign, bind } from 'min-dash';
import { is } from 'bpmn-js/lib/util/ModelUtil';
import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
import { myConnectionElements, aggreagatedElements } from './Types';
import { isDifferentType } from 'bpmn-js/lib/features/popup-menu/util/TypeUtil';
import PPINOTModeling from './PPINOTModeling';

export default class PPINOTContextPadProvider extends ContextPadProvider {
  constructor(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate, appendPreview) {
    // Call the base provider constructor with the full parameter list.
    super(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate, appendPreview);

    // Store injected services.
    this._contextPad = contextPad;
    this._popupMenu = popupMenu;
    this._canvas = canvas;
    this._modeling = modeling;
    this._elementFactory = elementFactory;
    this._connect = connect;
    this._create = create;
    this._translate = translate;
    this._config = config;

    // Register this provider on the contextPad.
    contextPad.registerProvider(this);

    // Determine autoPlace if enabled.
    let autoPlace = config.autoPlace;
    if (autoPlace !== false) {
      autoPlace = injector.get('autoPlace', false);
    }
    this._autoPlace = autoPlace;

    // Cache the original getContextPadEntries binding, if any.
    this._cachedGetContextPadEntries = bind(this.getContextPadEntries, this);
  }

  appendAction(type, className, title, options) {
    if (typeof title !== 'string') {
      options = title;
      title = this._translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
    }
    const elementFactory = this._elementFactory;
    const create = this._create;
    const autoPlace = this._autoPlace;

    const appendStart = (event, element) => {
      const shape = elementFactory.createShape(assign({ type: type }, options));
      create.start(event, shape, { source: element });
    };

    const append = autoPlace
      ? (event, element) => {
          const shape = elementFactory.createShape(assign({ type: type }, options));
          autoPlace.append(element, shape);
        }
      : appendStart;

    return {
      group: 'model',
      className: className,
      title: title,
      action: {
        dragstart: appendStart,
        click: autoPlace ? append : appendStart
      }
    };
  }

  appendConnectAction(type, className, title) {
    if (typeof title !== 'string') {
      title = this._translate('Append {type}', { type: type.replace(/^PPINOT:/, '') });
    }
    const connect = this._connect;
    const elementFactory = this._elementFactory;
    const connectStart = (event, element, autoActivate) => {
      connect.PPINOTStart(event, element, type, elementFactory, autoActivate);
    };

    return {
      group: 'connect',
      className: className,
      title: title,
      action: {
        dragstart: connectStart,
        click: connectStart
      }
    };
  }

  getContextPadEntries(element) {
    let actions = this._cachedGetContextPadEntries ? this._cachedGetContextPadEntries(element) : {};
    const businessObject = element.businessObject;

    if (isAny(businessObject, aggreagatedElements) && element.type !== 'label') {
      assign(actions, {
        'connect1': this.appendConnectAction(
          'PPINOT:AggregatedConnection',
          'icon-aggregates',
          'Connect using aggregates connection'
        ),
        'connect2': this.appendConnectAction(
          'PPINOT:IsGroupedBy',
          'icon-isGroupedBy',
          'Connect using isGroupedBy connection'
        )
      });
    }

    if (
      is(businessObject, 'PPINOT:StateConditionAggregatedMeasure') ||
      is(businessObject, 'PPINOT:StateCondAggMeasureNumber') ||
      is(businessObject, 'PPINOT:StateCondAggMeasurePercentage') ||
      is(businessObject, 'PPINOT:StateCondAggMeasureAll') ||
      is(businessObject, 'PPINOT:StateCondAggMeasureAtLeastOne') ||
      is(businessObject, 'PPINOT:StateCondAggMeasureNo') ||
      is(businessObject, 'PPINOT:StateConditionMeasure') ||
      is(businessObject, 'PPINOT:CountMeasure') ||
      is(businessObject, 'PPINOT:CountAggregatedMeasure') ||
      is(businessObject, 'PPINOT:TimeMeasure') ||
      is(businessObject, 'PPINOT:TimeAggregatedMeasure') ||
      is(businessObject, 'PPINOT:DataMeasure') ||
      is(businessObject, 'PPINOT:DataAggregatedMeasure')
    ) {
      if (element.type !== 'label') {
        assign(actions, {
          'connect3': this.appendConnectAction(
            'PPINOT:DashedLine',
            'icon-dashed-line',
            'Connect using dashed line'
          )
        });
      }
    }

    if (
      is(businessObject, 'PPINOT:TimeMeasure') ||
      is(businessObject, 'PPINOT:TimeAggregatedMeasure') ||
      is(businessObject, 'PPINOT:CyclicTimeMeasure') ||
      is(businessObject, 'PPINOT:CyclicTimeMeasureSUM') ||
      is(businessObject, 'PPINOT:CyclicTimeMeasureMAX') ||
      is(businessObject, 'PPINOT:CyclicTimeMeasureMIN') ||
      is(businessObject, 'PPINOT:CyclicTimeMeasureAVG') ||
      is(businessObject, 'PPINOT:CyclicTimeAggregatedMeasure') ||
      is(businessObject, 'PPINOT:CyclicTimeAggregatedMeasureSUM') ||
      is(businessObject, 'PPINOT:CyclicTimeAggregatedMeasureMAX') ||
      is(businessObject, 'PPINOT:CyclicTimeAggregatedMeasureMIN') ||
      is(businessObject, 'PPINOT:CyclicTimeAggregatedMeasureAVG')
    ) {
      if (element.type !== 'label') {
        assign(actions, {
          'connect7': this.appendConnectAction(
            'PPINOT:ToConnection',
            'icon-toConnector',
            'Connect using To connection'
          ),
          'connect8': this.appendConnectAction(
            'PPINOT:FromConnection',
            'icon-fromConnector',
            'Connect using From connection'
          )
        });
      }
    }

    if (
      is(businessObject, 'PPINOT:CountMeasure') ||
      is(businessObject, 'PPINOT:CountAggregatedMeasure') ||
      is(businessObject, 'PPINOT:CountAggregatedMeasureSUM') ||
      is(businessObject, 'PPINOT:CountAggregatedMeasureMAX') ||
      is(businessObject, 'PPINOT:CountAggregatedMeasureMIN') ||
      is(businessObject, 'PPINOT:CountAggregatedMeasureAVG')
    ) {
      if (element.type !== 'label') {
        assign(actions, {
          'connect10': this.appendConnectAction(
            'PPINOT:StartConnection',
            'icon-startConnector',
            'Connect using Start connection'
          ),
          'connect11': this.appendConnectAction(
            'PPINOT:EndConnection',
            'icon-endConnector',
            'Connect using End connection'
          )
        });
      }
    }

    if (is(businessObject, 'bpmn:DataObjectReference') && element.type !== 'label') {
      assign(actions, {
        'connect12': this.appendConnectAction(
          'PPINOT:RFCStateConnection',
          'icon-dashed-line',
          'Connect using RFC state connection'
        )
      });
    }

    if (isAny(businessObject, myConnectionElements) && element.type !== 'label') {
      assign(actions, {
        'connect13': this.appendConnectAction(
          'PPINOT:MyConnection',
          'bpmn-icon-connection',
          'Connection between PPINOT elements'
        )
      });
    }

    return actions;
  }
}

PPINOTContextPadProvider.$inject = [
  'config.contextPad',
  'injector',
  'eventBus',
  'contextPad',
  'modeling',
  'elementFactory',
  'connect',
  'create',
  'popupMenu',
  'canvas',
  'rules',
  'translate',
  'appendPreview'
];

But i keep geting this error
enter image description here
The function is defined and exists. It inherits from

**
 * BPMN-specific context pad provider.
 *
 * @implements {BaseContextPadProvider}
 *
 */
export default class ContextPadProvider implements BaseContextPadProvider {
  static $inject: string[];

  /**
   * @param config
   * @param injector
   * @param eventBus
   * @param contextPad
   * @param modeling
   * @param elementFactory
   * @param connect
   * @param create
   * @param popupMenu
   * @param canvas
   * @param rules
   * @param translate
   * @param appendPreview
   */
  constructor(config: ContextPadConfig, injector: Injector, eventBus: EventBus, contextPad: ContextPad, modeling: Modeling, elementFactory: ElementFactory, connect: Connect, create: Create, popupMenu: PopupMenu, canvas: Canvas, rules: Rules, translate: Translate, appendPreview: AppendPreview);

  /**
   * @param elements
   *
   * @return
   */
  getMultiElementContextPadEntries(elements: Element[]): ContextPadEntries;

  /**
   * @param element
   *
   * @return
   */
  getContextPadEntries(element: Element): ContextPadEntries;
}

type Injector = import("didi").Injector;
type EventBus = import("diagram-js/lib/core/EventBus").default;
type ContextPad = import("diagram-js/lib/features/context-pad/ContextPad").default;
type Modeling = import("../modeling/Modeling").default;
type ElementFactory = import("../modeling/ElementFactory").default;
type AppendPreview = import("../append-preview/AppendPreview").default;
type Connect = import("diagram-js/lib/features/connect/Connect").default;
type Create = import("diagram-js/lib/features/create/Create").default;
type PopupMenu = import("diagram-js/lib/features/popup-menu/PopupMenu").default;
export type Canvas = any;
type Rules = import("diagram-js/lib/features/rules/Rules").default;
export type Translate = typeof import("diagram-js/lib/i18n/translate/translate").default;
type Element = import("../../model/Types").Element;
type ModdleElement = import("../../model/Types").ModdleElement;
type BaseContextPadProvider = import("diagram-js/lib/features/context-pad/ContextPadProvider").default<Element>;
type ContextPadEntries = import("diagram-js/lib/features/context-pad/ContextPadProvider").ContextPadEntries;
type ContextPadEntry = import("diagram-js/lib/features/context-pad/ContextPadProvider").ContextPadEntry;

export type ContextPadConfig = {
    autoPlace?: boolean;
};

and from diagram js

import type { Element } from '../../model/Types';

import type { ContextPadTarget } from './ContextPad';

export type ContextPadEntryAction<ElementType extends Element = Element> = (
  event: Event,
  target: ContextPadTarget<ElementType>,
  autoActivate: boolean
) => any;

export type ContextPadEntry<ElementType extends Element = Element> = {
  action:
    | Record<string, ContextPadEntryAction<ElementType>>
    | ContextPadEntryAction<ElementType>;
  className?: string;
  group?: string;
  html?: string;
  imageUrl?: string;
  title?: string;
};

export type ContextPadEntries<ElementType extends Element = Element> = Record<
  string,
  ContextPadEntry<ElementType>
>;

export type ContextPadEntriesCallback<ElementType extends Element = Element> = (
  entries: ContextPadEntries<ElementType>
) => ContextPadEntries<ElementType>;

/**
 * An interface to be implemented by a context menu provider.
 */
export default interface ContextPadProvider<
  ElementType extends Element = Element
> {
  /**
   * Returns a map of entries or a function that receives, modifies and returns
   * a map of entries for one element.
   *
   * The following example shows how to replace any entries returned by previous
   * providers with one entry which alerts the ID of the given element when
   * clicking on the entry.
   *
   * @example
   *
   * ```javascript
   * getPopupMenuEntries(element) {
   *   return function(entries) {
   *     return {
   *       alert: {
   *         action: (event, target, autoActivate) => {
   *           alert(element.id);
   *         },
   *         className: 'alert',
   *         title: 'Alert element ID'
   *       }
   *     };
   *   };
   * }
   * ```
   *
   * @param element
   */
  getContextPadEntries?: (
    element: ElementType
  ) => ContextPadEntriesCallback<ElementType> | ContextPadEntries<ElementType>;

  /**
   * Returns a map of entries or a function that receives, modifies and returns
   * a map of entries for many elements.
   *
   * The following example shows how to replace any entries returned by previous
   * providers with one entry which alerts the IDs of the given elements when
   * clicking on the entry.
   *
   * @example
   *
   * ```javascript
   * getMultiElementContextPadEntries(elements) {
   *   return function(entries) {
   *     return {
   *       alert: {
   *         action: (event, target, autoActivate) => {
   *           elements.forEach(element => alert(element.id));
   *         },
   *         className: 'alert',
   *         title: 'Alert element IDs'
   *       }
   *     };
   * }
   * ```
   *
   * @param elements
   */
  getMultiElementContextPadEntries?: (
    elements: ElementType[]
  ) => ContextPadEntriesCallback<ElementType> | ContextPadEntries<ElementType>;
}

I tried doing a function instead of a class and patching the functionality but can not fix it.

I have tried to hide the “+ New” buttons on myy subgrids using Javascript.

I attempted to hide the button using JavaScript with the following methods:

querySelectorAll(“button[id^=’subgrid_addNew’]”)
querySelectorAll(“li[id^=’subgrid_addNew’]”) (hiding the

I’m trying to integrate CKEditor 5 inside a Bootstrap modal, but even though the editor initializes without any errors, I’m unable to type in the text field. The editor is rendered, but it behaves as if it is in a “read-only” mode.

I show you screenshots and run my code directly in the console because I think it will be more comfortable for you to see it.

First, open the modal, which already comes with a textarea that is fully editable.

$("#modal_editar_html").modal();

Then I run ClassicEditor.create to replace the textarea with the CKeditor 5 editor

ClassicEditor.create($("#texto_contenido")[0], {
    licenseKey: 'eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3NDA1Mjc5OTksImp0aSI6ImNiNjk1OTZhLTM4YzUtNDc2YS1iM2UxLTFmOWU1OTNlMDQ0MCIsInVzYWdlRW5kcG9pbnQiOiJodHRwczovL3Byb3h5LWV2ZW50LmNrZWRpdG9yLmNvbSIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsiY2xvdWQiLCJkcnVwYWwiLCJzaCJdLCJ3aGl0ZUxhYmVsIjp0cnVlLCJsaWNlbnNlVHlwZSI6InRyaWFsIiwiZmVhdHVyZXMiOlsiKiJdLCJ2YyI6IjA4Y2QwYjJiIn0.283faOBt808tzYbU44p9td1uQgmOyNFeVsV_tYEGywdfUZqNXFgzQuKKXm12u9RJoz7WOuEKHoxi_O0zxew0hA',
    toolbar: { items: ["bold", "italic", "|", "alignment", "|", "undo", "redo"] },
    plugins: [Alignment, Bold, Italic, Paragraph, Undo],
    language: "es"
})
.then(editor => { window.editorInstance = editor; })
.catch(error => { console.error(error); });

And it is impossible to write in the editor, if the text area is edited beforehand, it does take the text, but it is still impossible to edit anything at all. I show an example screenshot

Any ideas on what might be causing this issue or how to solve it?

[Why i fetching this type of problem
`

after installing
npm install react-native-reanimated
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack
npm install @react-navigation/native
those ](https://i.sstatic.net/Hl93Jn4O.png)
in react-native i fetching this problem to create nav bar . i can’t found my mistake

I am doing a project where I need to make some filters that change images, and 2 of the filters need to change the colour space. All the other functions that are very similar to this one work perfectly fine, but trying to run this on just makes the image completely black if the alpha is 255. Essentially its just making the whole image one colour with darkness based on the alpha value.

After debugging and looking through the reported pixel colours, it seems it is looping over the function twice, doing fine the first time, but then the second time setting all the RGB values to 0. I cannot for the life of me figure this out, but that is what I understand is happening.

Here is the code:

//CMYK Colour space conversion
function rgbToCMYK(imgIn)
{
    var imgOut = createImage(imgIn.width, imgIn.height);
    
    imgOut.loadPixels();
    imgIn.loadPixels();
    
    //Loop through pixels
    for (var x=0; x<imgIn.width; x++){
        for (var y=0; y<imgIn.height; y++){
            var index = (x + (y * imgIn.width)) * 4;
            
            var r = imgIn.pixels[index +0];
            var g = imgIn.pixels[index +1];
            var b = imgIn.pixels[index +2];
            var a = imgIn.pixels[index +3];
            
            //Just checking that the program is reading the pixel info correctly
            console.log(r, "  ", g, "  ", b, "  ", a);
            
            //Convert rgb to CMY
            var computedC = 1 - (r/255);
            var computedM = 1 - (g/255);
            var computedY = 1 - (b/255);
            
            console.log(computedC, "  ", computedM, "  ", computedY);
            
            //Compute min CMY
            var minCMY = Math.min(computedC, Math.min(computedM, computedY));
            
            //Complete Conversion
            computedC = (computedC - minCMY) / (1 - minCMY);
            computedM = (computedM - minCMY) / (1 - minCMY);
            computedY = (computedY - minCMY) / (1 - minCMY);
            
            console.log(computedC, "  ", computedM, "  ", computedY);
            
            //K is not used yet
            var k = minCMY;
            
            imgOut.pixels[index + 0] = computedC;
            imgOut.pixels[index + 1] = computedM;
            imgOut.pixels[index + 2] = computedY;
            imgOut.pixels[index + 3] = 125;
        }
    }
    imgOut.updatePixels();
    return imgOut;
}

The code only runs this function once, and the function takes an image as the arg, computes the colour space change (at least it’s meant to), and then returns the changed image.

I am very new to this colour space conversion stuff, and I dont even know if I have the right approach.

type here<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <h1 id="buy"></h1>
    <h1 id="qw"></h1>
    <button id="btncars" type="button" onclick="addfunction()" class="btn"><img src="img like/like.svg" width="300 130"
            alt=""></button>
    <script src="main/main.js"></script>
</body>

</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.btn {
    margin-left: 30rem;
    margin-top: 10rem;
     /* background-color: #72a3d4;  */
   
}

JAVASCRIPT

const likemebtn = document.getElementById("btncars")
let result = ""

for (let x = 0; x < result; likemebtn.style.background < " #e5e8eb") {
    result += likemebtn.style.background = " #72a3d4" + result[x] > " #e5e8eb"
    likemebtn.classList.toggle()
}



document.getElementById("buy").innerHTML = result

I’m want that, change color when use click button. How like button in twitter, only just like,

help me create button please. Thank you, only need create this, method for or if wanna for………………………………………………………………………………………………………………………………………………………………..

Im trying to create a GDPR cookie banner. The html and css look right but as I don’t know javascript I have lifted from youtube so some code isn’t right. Im struggling to see my errors. Appreciate comment.

    <div class="wrapper">
    <div class="data">
    <p>This website uses cookies to ensure you get the best experience.
    <ahref="terms.html#privacy"> Learn more.</a></p>
    </div>
       <div class="cookie-btns">
         <button id="accept-btn">Accept</button>
         <button id="reject-btn">Reject</button>
       </div>
     </div>

.wrapper{
    position: fixed;
    padding: 10px 30px 10px 30px;
    width: 100%;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1; 
    transition: bottom 0.2s ease;
}
    .wrapper .show{
        bottom: 20px;
    }
    .wrapper .data{
        margin-top:10px;
    }
    .wrapper .data p{
        color: #72848C;
        font-size: 16px;
    }
    .data p a{
        color: darkorange;
        text-decoration: none;
    }
    .data p a:hover{
        text-decoration: underline;
    }
    .wrapper .cookie-btns{
        margin-top: 10px;
        width: 100%;
        display: flex;
        align-items: center;
        column-gap: 10px;
        justify-content: flex-end;
    }
    .cookie-btns #accept-btn,#reject-btn{
        border: 1px solid darkorange;
        color: darkorange;
        font-size: 0.8rem;
        font-family: inherit;
        width: 80px;  
        padding: 8px 0;
        border-radius: 4px;
        background-color: black;
        cursor: pointer;
        transition:all 0.2s ease;
    }
    #accept-btn, #reject-btn:hover{
       color: #72848C;
    }

The javascript was taken from online source so does not match my html – not sure where it is wrong.

    window.onload = function() {
    // Check if the user has already given consent
    if (!localStorage.getItem('gdpr-consent')) {
    document.getElementById('wrapper').style.display = 'block';
    }
    // Accept button click handler
    document.getElementById('accept-btn').onclick = function() {
    localStorage.setItem('gdpr-consent', 'accepted'); 
    // Store consent in localStorage
    document.getElementById('wrapper').style.display = 'none';
    };
    // Reject button click handler
    document.getElementById('reject-btn').onclick = function() {
    localStorage.setItem('gdpr-consent', 'rejected'); 
    // Store rejection in localStorage
    document.getElementById('wrapper').style.display = 'none';
    };
    };