Category: javascript

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" CssClass="patient-table" Width="100%" AllowPaging="False">
            <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                Registration
            </HeaderTemplate>
            <ItemTemplate>
                <%# Eval("Registration") %>
                <br></br>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                Name
            </HeaderTemplate>
            <ItemTemplate>
                <%# Eval("Patient_Name") %> <br></br>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                Gender
            </HeaderTemplate>
            <ItemTemplate>
                <%# Eval("Gender") %> <br></br>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                Date/time
            </HeaderTemplate>
            <ItemTemplate>
                <%# Eval("DateTime") %> <br></br>
                <%# Eval("Time") %> <br></br>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                Disease
            </HeaderTemplate>
            <ItemTemplate>
                <%# Eval("Disease") %> <br></br>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                Ward#
            </HeaderTemplate>
            <ItemTemplate>
                <%# Eval("BedNo") %> <br></br>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                Consultant
            </HeaderTemplate>
            <ItemTemplate>
                <%# Eval("DoctorName") %> <br></br>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                Options
            </HeaderTemplate>
            <ItemTemplate>
                <div class="option-icons" style="display:flex; justify-content:space-around;">
                    <asp:HiddenField ID="HiddenField_DiabMoniter" runat="server" Value='<%# Bind("DiabMoniter")%>' />
                    <asp:HiddenField ID="HiddenField_NutribMoniter" runat="server" Value='<%# Bind("NutribMoniter")%>' />
                    <asp:HiddenField ID="HiddenField_CritMoniter" runat="server" Value='<%# Bind("CritMoniter")%>' />
                    <asp:HiddenField ID="HiddenField_ExerbMoniter" runat="server" Value='<%# Bind("ExerbMoniter")%>' />
                    <asp:HiddenField ID="HiddenField_MedibMoniter" runat="server" Value='<%# Bind("MedibMoniter")%>' />

                   <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" OnClientClick="openInNewTab();"
                                        commandArgument='<%#Eval("VisitReg")%>'>
                                        <img src="../Nurseimg/11.1.png" alt="11.1.png" />
                                    </asp:LinkButton>
                                   <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click" OnClientClick="openInNewTab();"
                                        CommandArgument='<%#Eval("VisitReg")%>'><img src="../Nurseimg/10.png" alt="10.png" />
                                   </asp:LinkButton>

                                    <asp:LinkButton ID="LinkButton3" runat="server" OnClick ="LinkButton3_Click"
                                        CommandArgument='<%#Eval("VisitReg")%>'> <img src="../Nurseimg/11.png" alt="11.png" />
                                    </asp:LinkButton>

                                    <asp:LinkButton ID="LinkButton4" runat="server" OnClick ="LinkButton4_Click" CommandArgument='<%#Eval("VisitReg")%>' >
                                        <img src="../Nurseimg/7.png" alt="7.png" />
                                    </asp:LinkButton>
                                    <asp:LinkButton ID="LinkButton5" runat="server" OnClick ="LinkButton5_Click" CommandArgument='<%#Eval("VisitReg")%>'>
                                        <img src="../Nurseimg/4.png" alt="4.png" />
                                    </asp:LinkButton>
                                   <%-- <asp:LinkButton ID="LinkButton6" runat="server">
                                        <img src="../Nurseimg/5.png" alt="5.png" />
                                    </asp:LinkButton>
                                    <asp:LinkButton ID="LinkButton7" runat="server">
                                        <img src="../Nurseimg/3.1.png" alt="3.1.png" />
                                    </asp:LinkButton>
                                        <asp:LinkButton ID="LinkButton8" runat="server">
                                        <img src="../Nurseimg/2.png" alt="2.png" />
                                    </asp:LinkButton>
                                        <asp:LinkButton ID="LinkButton9" runat="server">
                                        <img src="../Nurseimg/1.1.png" alt="1.1.png" />
                                    </asp:LinkButton>--%>
                                </div>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>



<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        var gridViewContainer = document.querySelector('.table-container');
        var body = document.body;

        // Prevent body scroll while hovering over the grid view
        gridViewContainer.addEventListener('mouseenter', function () {
            body.style.overflow = 'hidden';
        });

        gridViewContainer.addEventListener('mouseleave', function () {
            body.style.overflow = 'auto';
        });

        // Lazy loading on scroll
        gridViewContainer.addEventListener('scroll', function () {
            if (gridViewContainer.scrollTop + gridViewContainer.clientHeight >= gridViewContainer.scrollHeight) {
                // Perform lazy loading when reaching the bottom
                __doPostBack('<%= UpdatePanel1.ClientID %>', 'ScrollPostBack');
                                    }
                                });
                            });
                        </script>
                    </ContentTemplate>
                </asp:UpdatePanel>

I have an issue with my ASPX code. When I retrieve data from the database and implement lazy loading functionality in the GridView (so that as I scroll down, more data keeps loading), the icons in the GridView—which are meant to redirect to a new tab—stop working. I want the data to load on demand as I scroll, while also ensuring that when I click the icons, the page successfully redirects to a new tab.

I’m currently working with the Amadeus Flight Search API and have a question regarding the response format.

When I receive flight information in the form of an array, can I expect all entries to be unique? Specifically, is there a chance of receiving multiple prices for the same flight, particularly when different amenities are involved?

Understanding this aspect is crucial for my integration process. Any insights or experiences would be greatly appreciated!

Thank you!

I have been exploring the Amadeus Flight Search API documentation to understand the structure of the response data. I’ve tested several queries to see how flight information is returned, specifically looking at the array of flight entries.

I expected to see unique flight entries in the response, but I’m curious if there’s a possibility of receiving multiple prices for the same flight, especially when variations in amenities are considered. I want to clarify if the API supports multiple fare options for identical flights or if it guarantees unique results for each entry.

If anyone has insights or experiences regarding this, I would greatly appreciate your input!

I have two tables students and classes. These two have a relationship student_id. I want to get classes data using search values which will query students db. Here is what I tried

 supabase.from("classes")
        .select(`*, students:student_id(*)`)
        .or(`first_name.ilike.%${search_value}%,last_name.ilike.%${search_value}%`)  
        .eq("user_id",user?.id)

I’m getting the following error

{
    "code": "PGRST100",
    "details": "unexpected "f" expecting "not" or operator (eq, gt, ...)",
    "hint": null,
    "message": ""failed to parse logic tree ((students..first_name.ilike.%komichi%,students.last_name.ilike.%komichi%))" (line 1, column 13)"
}

I tried querying in reverse instead of from “classes” I do from “students” and it works, I just want to understand if the solution I tried initially can be fixed, is there a different character which I can use instead of . to show I’m querying a referenced table.

First of all, sorry for my bad title.

My goals is to detect a click outside of the components using this custom hook:

  const useOutsideClick = (callback) => {
    const reference = useRef();

    useEffect(() => {
      const handleClick = (event) => {
        if (reference.current && !reference.current.contains(event.target)) {
          console.log(reference.current);
          console.log(event.target);

          callback();
        }
      };

      document.addEventListener("click", handleClick);

      return () => {
        document.removeEventListener("click", handleClick);
      };
    }, [reference]);

    return reference;
  };

I have an <HeaderSearch /> custom component which looks like this:

  const HeaderSearch = ({ screenWidth }) => {
   
    function checkInput(event) {
      if (event.keyCode !== 13) {
        setSearch(event.target.value);
      }
    }
    const mobileRef = useOutsideClick(test);
    const ref = useOutsideClick(test);

    if (location.pathname !== "/") {
      if (screenWidth == "mobile") {

        return (
          <div id="search-header" className="search-header mob" ref={mobileRef}>
            <FontAwesomeIcon
              className="search-icon"
              id="search-icon"
              icon={faSearch}
              onClick={() => toggleSearchInput()}
            />
            <input
              id="search-input"
              className={searchActive ? "search-input active" : "search-input"}
              type="text"
              value={search}
              onKeyDown={(e) => checkInput(e)}
              onChange={(e) => setSearch(e.target.value)}
              // ref={searchInputRef}
              // onClick={() => searchReqClientSide()}
              placeholder="Search..."
            />
            <button></button>
          </div>
        );
      } else {

        return (
          <div id="search-header" className="search-header desk" ref={ref}>
            <FontAwesomeIcon
              className="search-icon"
              id="search-icon"
              icon={faSearch}
              onClick={() => toggleSearchInput()}
            />
            <input
              id="search-input"
              className={searchActive ? "search-input active" : "search-input"}
              type="text"
              value={search}
              onKeyDown={(e) => checkInput(e)}
              onChange={(e) => setSearch(e.target.value)}
              // ref={searchInputRef}
              // onClick={() => searchReqClientSide()}
              placeholder="Search..."
            />
            <button></button>
          </div>
        );
      }
    } else {
      return null;
    }
  };

The HeaderSearch Component is rendered conditionally due to css classes. If parent header element has class active: change display of header without active to display none.

However when I click outside of the component. The custom hook is still being called for both of the HeaderSearch components. See screenshot below:

How can I make it that only the <HeaderSearch/> which is active calls the useOutsideClick hook instead of both firing every click?

EDIT: I forgot to add the Test callback(its a simple log):

function test() {
    console.log("clicked outside");
  }

I have a library jQuery Terminal where I’m extending the jQuery object, and I’m adding new methods.

This is part of d.ts file:

declare module 'jquery.terminal' {

  export namespace JQueryTerminal {
    type interpreterFunction = (this: JQueryTerminal, command: string, term: JQueryTerminal) => any;
    type terminalObjectFunction = (this: JQueryTerminal, ...args: (string | number | RegExp)[]) => (void | TypeOrPromise<simpleEchoValue>);
    type ObjectInterpreter = {
      [key: string]: ObjectInterpreter | terminalObjectFunction;
    }
    type Interpreter = string | interpreterFunction | ObjectInterpreter;
    ...
  }
  export interface JQueryTerminal<TElement = HTMLElement> extends JQuery<TElement> {
    set_command(command: string): JQueryTerminal;
    id(): number;
    ...
  }
  const JQTerminal: (window: Window, JQuery: JQueryStatic) => void;
  export default JQTerminal;
}

There are a lot of types, because this is quite complex library. The problem I have is that I can’t use jQuery methods on object typed as JQueryTerminal.

import type { JQueryTerminal } form 'jquery.terminal';

const interpreter: JQueryTerminal.Interpreter = {
  size(num: string) {
    this.css('--size', num);
  }
};

Got error:

Property 'css' does not exist on type 'JQueryTerminal<HTMLElement>'

But it should work, since JQueryTerminal<HTMLElement> extends JQuery<TElement>.

The update to types are not yet published to NPM. I’m working on new documentation, and I’ve installed the library from GitHub branch.

Let me know if you want a simplified example that you can play with. I will add one when there are no obvious mistakes in my code.

I’m trying to get the results from a JSONata expression to print out using HTML and Javascript, but I’m not having any luck. The expression works in the JSONata playground and produces the array I expect, but I don’t get any output when I include it in a javascript function.

Here is the expression I wrote:

items.{"Release Year":$number(($toMillis($.track.album.release_date))~>$fromMillis('[Y]')),"Track":track.name,"Artist(s)":$join($map(track.artists.name,$string),", "),"Album":track.album.name,"Genre":"","URL":$join(['https://song.link/s/',track.id]),"Release Date":track.album.release_date,"Duration":track.duration_ms,"Popularity":track.popularity,"SpotifyID":track.id,"Added to Playlist On":$toMillis($.added_at)~>$fromMillis('[M]/[D]/[Y] at [h]:[m] [P]')}

This expression is used in the following HTML. Because this is an iOS shortcut, the variable apiResponse2 is filled through a different series of commands. I know I’m getting the appropriate response from the API:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/jsonata/jsonata.min.js"></script>
</head>
<body>
    
<script>

var jsonata = require("jsonata");
function evaluateJsonata() {
    var apiData = apiResponse2;
    var expression = jsonata(items.{"Release Year":$number(($toMillis($.track.album.release_date))~>$fromMillis('[Y]')),"Track":track.name,"Artist(s)":$join($map(track.artists.name,$string),", "),"Album":track.album.name,"Genre":"","URL":$join(['https://song.link/s/',track.id]),"Release Date":track.album.release_date,"Duration":track.duration_ms,"Popularity":track.popularity,"SpotifyID":track.id,"Added to Playlist On":$toMillis($.added_at)~>$fromMillis('[M]/[D]/[Y] at [h]:[m] [P]')});
    var result = expression.evaluate(apiData);
    document.write(JSON.stringify(result)) 
}
</script>

</body>
</html>

You can see a sample of the JSON returned by the Spotify API at this link. The API JSON is also in the JSONata playground.

Because this is an iOS shortcut, I post the above in a text block, then do the following:

Screenshot of Used Shortcut Actions

But, I don’t get the expected array back. In fact, I get nothing back. I’m hoping my error is with the Javascript.

Any help debugging this would be greatly appreciated.

Its shocking that react-native-geolocation package is unable to show the real-time heading of an android device despite the lat and lng are updated in real-time and the device moves. I refrain from using onLocationChange which is built into google maps it self because it will put a blue circular icon which I have not way of getting around that. I prefer to use my own marker icon. I have followed the instruction on the github page and still the heading does not update. I resulted to use the sensors on the device only to use my two devices and they all don’t have magnetometer. I have to gracefully exit and handle if the device has no magnetometer. I tried to go around using gyroscope but my devices don’t have that either. I was shocked part two, because there are hardware modules available for a long time. I am back at fixing geolocation or if there is a way of removing the blue icon that comes with onLocationChange. Regardless examine my code and see if there are any gaps.

React.useEffect(() => {
    Geolocation.requestAuthorization(() => {});
    if (!origin && !destination && !recordingMode) {
      if (watchId !== null) {
        Geolocation.clearWatch(watchId);
        setWatchId(null);
      }
      const noSaveWatchId = Geolocation.watchPosition(
        (position) => {
          const {
            latitude,
            longitude,
            altitude,
            accuracy,
            speed,
            heading: geoHeading,
            altitudeAccuracy,
          } = position.coords;
          setCurrentPosition({
            coordinate: { latitude, longitude },
            altitude: altitude as number,
            timestamp: position.timestamp,
            accuracy: accuracy,
            speed: speed as number,
            heading: heading || (geoHeading as number),
            altitudeAccuracy: altitudeAccuracy as number,
            isFromMockProvider: (position as any).mocked,
          });
        },
        (error) => console.log(error),
        {
          enableHighAccuracy: true,
          distanceFilter: 0,
          interval: 5000,
          fastestInterval: 2000,
        }
      );
      setWatchId(noSaveWatchId);

      return () => {
        if (noSaveWatchId !== null) {
          Geolocation.clearWatch(noSaveWatchId);
        }
      };
    } else if (origin && destination && recordingMode) {
      if (watchId !== null) {
        Geolocation.clearWatch(watchId);
        setWatchId(null);
      }
      const saveWatchId = Geolocation.watchPosition(
        (position) => {
          const {
            latitude,
            longitude,
            altitude,
            accuracy,
            speed,
            heading: geoHeading,
            altitudeAccuracy,
          } = position.coords;
          const bearing: number = calculateBearing(
            latitude,
            longitude,
            destination.latitude,
            destination.longitude
          );
          setCurrentPosition({
            coordinate: { latitude, longitude },
            altitude: altitude as number,
            timestamp: position.timestamp,
            accuracy: accuracy,
            speed: speed as number,
            heading: heading || bearing || (geoHeading as number),
            altitudeAccuracy: altitudeAccuracy as number,
            isFromMockProvider: (position as any).mocked,
          });
          if (
            state &&
            state.location.lat !== latitude &&
            state.location.lng !== longitude
            // state.location.heading !== heading
          ) {
            dispatch({
              type: Types.SetLocation,
              payload: {
                lat: latitude ?? 0,
                lng: longitude ?? 0,
                heading: heading ?? 0,
              },
            });
          } else return;
          makeLogEntry({
            latitude,
            longitude,
            heading: heading || undefined,
          })
            .then(() => console.log("Log made successfully"))
            .catch((error) => console.log("Error making log entry:", error));
        },
        (error) => console.log(error),
        {
          enableHighAccuracy: true,
          distanceFilter: 0,
          interval: 5000,
          fastestInterval: 2000,
        }
      );
      setWatchId(saveWatchId);

      return () => {
        if (saveWatchId !== null) {
          Geolocation.clearWatch(saveWatchId);
        }
      };
    }
  }, [origin, destination, recordingMode]);

I am creating a web extension which “scans” the page and uses results to form a response, here is my code:

function scanAndSummarizeWebpage() {
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    const activeTab = tabs[0];
    chrome.scripting.executeScript({
      target: { tabId: activeTab.id },
      function: getWebsiteContent
    }, function(results) {
      const websiteContent = results[0].result;
      console.log(websiteContent);
      alert (websiteContent);

       const endpoint = 'https://api.openai.com/v1/chat/completions';
       const data = {
         messages: [
           { role: 'system', content: 'You are a helpful assistant.' },
           { role: 'user', content: websiteContent },
           { role: 'assistant', content: 'Summarise this webpage.'}
         ],
         max_tokens: 282,
         temperature: 0.3,
         model: 'gpt-3.5-turbo',
         n: 1,
      };

I’ve tried running it through postman and it only shows an error message: “We could not parse the JSON body of your request. (HINT: This likely means you aren’t using your HTTP library correctly. The OpenAI API expects a JSON payload, but what was sent was not valid JSON. If you have trouble figuring out how to fix this, please contact us through our help center at help.openai.com.)”

I have enabled row click functionality in a Material React Table to redirect users to a details page. I also want to implement a switch component to enable or disable the user. However, when I click the switch, the row click event is also triggered. How can I prevent this from happening?

const columns = [
columnHelper.accessor('status', {
header: 'Status',
size: 50,
Cell: ({ cell }) => {
    const isActive = cell.getValue()
      const checked = isActive === 'ACTIVE'
      return (
        <Tooltip
          title={isActive === 'ACTIVE' ? 'Active' : 'Inactive'}
          placement="left-end"
          arrow
          TransitionComponent={Zoom}
        >
          <Switch
            checked={checked}
            onChange={handleStatusChange}
            inputProps={{ 'aria-label': 'controlled' }}
          />
        </Tooltip>
      )
    },
  }),
  columnHelper.accessor('name', {
    header: 'Name',
  }),
  columnHelper.accessor('code', {
    header: 'Code',
  }),
  columnHelper.accessor('description', {
    header: 'Description',
  }),
  columnHelper.accessor('conflictResolution.priority', {
    header: 'Priority',
  }),
  columnHelper.accessor('createdBy', {
    header: 'Created By',
  }),
]
const table = useMaterialReactTable({
    ...defaultMRTOptions,
    columns,
    data: offers || [],
    onPaginationChange: setPagination,
    state: { pagination, isLoading },
    rowCount: totalRecords,
    muiTableBodyRowProps: ({ row }) => ({
      onClick: () => {
        navigate(`/view/${row.id}`)
      },
      sx: {
        cursor: 'pointer',
      },
    }),
  })

I cant find any information about getting gas (fee) before create a transaction, with JS Tronweb.

Im trying chat-gpt, and google, but nothing works, and nothing found. Can anyone give a link to docs about that if that possible. Or give some examples?

The client wants us to use Mysql for his ecommerce website and as we are doing with the backend. For now I’m using mysql and when about to deployment we will migrate to some provider

This is the sequlize snippet of how we are initializing the db

const { Sequelize } = require("sequelize");

// Create a Sequelize instance
const sequelize = new Sequelize("[db_name]", "[username]", "[password]", {
  host: "localhost", // Replace with your MySQL host, e.g., '127.0.0.1'
  dialect: "mysql", // Choose the database dialect (MySQL in this case)
  port: 3306, // Default MySQL port is 3306

  // Pool configuration used to manage connections
  pool: {
    max: 5, // Maximum number of connection in pool
    min: 0, // Minimum number of connection in pool
    acquire: 30000, // Maximum time (ms) that pool will try to get connection before throwing error
    idle: 10000, // Maximum time (ms) that a connection can be idle before being released
  },

  // Optional logging configuration (can be a function or boolean)
  logging: false, // Set to 'console.log' to see SQL queries
});

// Test the connection
sequelize
  .authenticate()
  .then(() => {
    console.log("Connection has been established successfully.");
  })
  .catch((err) => {
    console.error("Unable to connect to the database:", err);
  });


module.exports = sequelize;

Previously I was not interesting in hard-coding the preferences models inserted in some models but just to make the models and use them as they should but it was not helping anyhow also moreover only the preference model which is initialized in some models are not created

require("dotenv").config();
const sequelize = require("../config/database"); // Assuming you've created the Sequelize instance in config/database.js
const User = require("../models/user");
const Address = require("../models/address");
const Merchant = require("../models/merchant");
const Product = require("../models/product");
const Cart = require("../models/cart");
const CartItem = require("../models/cartitem");
const Order = require("../models/order");
const Review = require("../models/review");
const Wishlist = require("../models/wishlist");

const setupDB = async () => {
  try {
    // Test the MySQL connection using Sequelize
    await sequelize.authenticate();
    console.log("x1b[32m%sx1b[0m", "✓ MySQL Connected!"); // Green color for success message

    // Sync the models with the database
    await sequelize.sync({ alter: true }); // Change to { force: true } if you want to drop existing tables
    console.log("x1b[32m%sx1b[0m", "✓ Database tables synced!"); // Success message for syncing

    // Set up associations
    User.hasMany(Address, { foreignKey: "userId", as: "addresses" });
    Address.belongsTo(User, { foreignKey: "userId", as: "users" });

    Merchant.hasMany(Product, { foreignKey: "merchantId", as: "products" });
    Product.belongsTo(Merchant, { foreignKey: "merchantId", as: "merchants" });

    User.hasMany(Cart, { foreignKey: "userId", as: "carts" });
    Cart.belongsTo(User, { foreignKey: "userId", as: "users" });

    Cart.hasMany(CartItem, { foreignKey: "cartId", as: "items" });
    CartItem.belongsTo(Cart, { foreignKey: "cartId", as: "carts" });
    CartItem.belongsTo(Product, { foreignKey: "productId", as: "products" });

    User.hasMany(Order, { foreignKey: "userId", as: "orders" });
    Order.belongsTo(User, { foreignKey: "userId", as: "users" });
    Order.belongsTo(Cart, { foreignKey: "cartId", as: "carts" });

    Product.hasMany(Review, { foreignKey: "productId", as: "reviews" });
    Review.belongsTo(Product, { foreignKey: "productId", as: "products" });
    User.hasMany(Review, { foreignKey: "userId", as: "reviews" });
    Review.belongsTo(User, { foreignKey: "userId", as: "users" });

    User.hasMany(Wishlist, { foreignKey: "userId", as: "wishlists" });
    Wishlist.belongsTo(User, { foreignKey: "userId", as: "users" });
    Wishlist.belongsTo(Product, { foreignKey: "productId", as: "products" });
  } catch (error) {
    console.log(
      "x1b[31m%sx1b[0m",
      "✗ Unable to connect to the database:",
      error
    ); // Red color for error message
    return null;
  }
};

module.exports = setupDB;

Also I want some help as im using hostinger (I don’t want to but my boss wanted to use the hostinger for some reason) now I want to deploy mysql db online so what can I use for it?

I’m working on an ASP.NET web application that uses WCF services to handle AJAX requests. When I enable Web Application Firewall (WAF) in Detect Mode on Azure, some of the WCF service calls are being flagged, and the requests are detected as suspicious. Specifically, the issue occurs when a user signs up, and we call the GetUsers() function via the WCF service.

Here’s an overview of the setup:

Page: user.aspx
JavaScript: user.js
In user.js, I call a WCF service using GetAjaxService() to retrieve user data:

$(document).ready(function () {
    GetUsers();
});


function GetUsers() {
    GetAjaxService().GetUsers(function (result) {
        if (result != null) {
            // Process result
        }
    });
}

After enabling WAF detect mode, the call to GetUsers() through GetAjaxService() is being flagged by WAF.

What I’ve Tried:
1.Verified that the WCF service works without WAF enabled.
2.Checked for any abnormal headers or missing headers that could cause WAF to flag the request.
3.Debugged WAF logs, and I noticed it’s being detected as a bot or as a missing Accept header.

My Questions:
1.How can I modify my WCF service calls or client-side code to prevent WAF from flagging these requests?
2.Are there specific rules or headers I should add to avoid detection by WAF?
3.Is there a best practice to handle WCF service calls with WAF enabled in an ASP.NET web application?

Log info:-

message :-‘Other bots’
ruleId_s:- ‘300700’
ruleroup_s:- ‘UnkownBots’
Action:-‘Detected’
details_data_s :-‘{ found within [REQUEST_HEADERS:]}’

Any insights on how to resolve this issue would be greatly appreciated.

I’m trying to rotate a parent circle and negate the effect on its children.
I tried to negate the effect by using

transform: translate(-50%, -50%)
           rotate(calc(var(--i) * -60deg))
           translateY(150px)
           rotate(calc(var(--i) * 60deg - var(--rotation)))

but the children will rotate 60deg at the start of the transition. How to prevent them from rotating completely duration the transition?

const circle = document.getElementById('circle');
let deg = 0;

function rotate() {
  deg += 60;
  circle.style.cssText = `--rotation: ${deg}deg`;
}

.circle {
  border: 2px solid #ccc;
  border-radius: 50%;
  height: 300px;
  margin: 40px auto 0;
  transform: rotate(var(--rotation));
  transition: transform 1000ms ease;
  position: relative;
  width: 300px;
}

.item {
  align-items: center;
  background: red;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  height: 30px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * -60deg)) translateY(150px) rotate(calc(var(--i) * 60deg - var(--rotation)));
  width: 30px;
}

.btn {
  align-items: center;
  background: lawngreen;
  display: flex;
  height: 30px;
  justify-content: center;
  width: 100px;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="circle" id="circle" style="--rotation: 0deg">
  <div class="item" style="--i: 0">1</div>
  <div class="item" style="--i: 1">2</div>
  <div class="item" style="--i: 2">3</div>
  <div class="item" style="--i: 3">4</div>
  <div class="item" style="--i: 4">5</div>
  <div class="item" style="--i: 5">6</div>
</div>

<div class='btn' onclick="rotate()">rotate</div>

I’m trying to build a basic “BG Color Changer Chrome Extension” using React.JS.
On selecting a color from the background color picker I want that color to instantly apply to all the elements of webpages except the code blocks & media related elements (like images, thumbnails, videos, of Facebook, YouTube etc.).
My Current Approach:
Here’s my content.js file:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "changeBgColor") {
    changeBackgroundColor(message.bgColor);

    // Storing the selected color in Chrome storage
    chrome.storage.local.set({ backgroundColor: message.bgColor }, () => {
      console.log("Background color saved");
    });

    sendResponse({ success: true });
  }
  return true;
});

function changeBackgroundColor(bgColor) {
  // Selecting all elements
  const allElements = document.querySelectorAll("*");

  // Selecting code & media elements to exclude
  const mediaElements = document.querySelectorAll(
    "code, img, video, iframe, canvas, object, picture"
  );

  // Set to store excluded elements
  const excludedElements = new Set();

  // Applying "transparent" bg color to media elements
  mediaElements.forEach((mediaElement) => {
    if (!excludedElements.has(mediaElement)) {
      mediaElement.style.setProperty(
        "background-color",
        "transparent",
        "important"
      );
      excludedElements.add(mediaElement);
    }
  });

  // Applying the selected bg color to non-excluded elements
  allElements.forEach((el) => {
    if (!excludedElements.has(el)) {
      el.style.setProperty("background-color", bgColor, "important");
    }
  });
}

Here’s my App.jsx file:

export default function App() {
  const [bgColor, setBgColor] = useState("#000000");

  const changeBgColor = (color) => {
    chrome.tabs.query({}, (tabs) => {
      tabs.forEach((tab) => {
        chrome.tabs.sendMessage(
          tab.id,
          { action: "changeBgColor", bgColor: color },
          (response) => {
            if (chrome.runtime.lastError) {
              console.error(chrome.runtime.lastError);
            } else if (response && response.success) {
              console.log("Bg color changed successfully");
              chrome.storage.local.set({ backgroundColor: color });
            }
          }
        );
      });
    });
  };

  return (
    <div>
      <input
        type="color"
        value={bgColor}
        onChange={(e) => {
          const selectedColor = e.target.value;
          setBgColor(selectedColor);
          changeBgColor(selectedColor);
        }}
      />
    </div>
  );
}

Problems:

1. When I select a color from the background color picker, the selected background color instantly applies to all elements including code blocks and media related elements (like images, videos, thumbnails etc.) and then after refreshing the page, code blocks & media related elements are excluded from the background color along with some other non-code, non-media elements such as divs & anchor links etc.
2. Every time I reload the page, I experience a random inconsistent behavior (don’t know how to explain it). Sometimes the background color is applying to all the elements including code blocks & media related elements as well while at other times it excludes them along with some other non-code, non-media elements.

What I tried:
First, I attempted to select all the HTML elements whose background color I wanted to change by explicitly mentioning their names (e.g., body, div, span, button, input, etc.). However, this didn’t work, as many elements on websites like YouTube and Facebook remained uncolored despite naming them.
Next, I tried selecting all elements while excluding code blocks and media-related elements, without applying any inline (!important) styling to the excluded elements. Unfortunately, this also failed, as selecting a color from the background color picker instantly applied it to all elements, without excluding code blocks and media-related elements.

To refund money from Phone Pe for a wrong transaction, you should immediately contact Phone Pe’s customer support:083-09-78-33-36and (available 24/7) report the issue.

To refund money from Phone Pe for a wrong transaction, you should immediately contact Phone Pe’s customer support:083-09-78-33-36and (available 24/7) report the issue.fyfft