Category: javascript

I have a custom Form element, the type of it requires a multipart argument, when it passes, the form will be a FormData form, if is not, it will be a JSON form, and I want to do it this way:

<CustomForm<DataFields> ...arguments>  (JSON FORM)
    ...
</CustomForm>

<CustomForm<DataFields> multipart ...arguments>  (MULTIPART FORM)
    ...
</CustomForm>

but it actually shows an typing error when I do the first one (JSON form), instead, I need to do this:

<CustomForm<DataFields> multipart={false} ...arguments>  (JSON FORM)
    ...
</CustomForm>

This is the error I get:

Type '{ children: Element[]; onSubmit: () => void; }' is not assignable to type 'IntrinsicAttributes & CustomFormProps<FieldValues>'.
  Property 'multipart' is missing in type '{ children: Element[]; onSubmit: () => void; }' but required in type '{ multipart: false | void | null | undefined; onSubmit: (data: FieldValues) => void; }'.ts(2322)
form.ts(12, 2): 'multipart' is declared here.

At first, this is what my Type looked like:

type CustomFormProps<T extends any> = {
    children?: ReactNode | ReactNode[]
    setMethods?: Function
    className?: string
} & ({
    multipart: true
    onSubmit: (data: FormData) => void
} | {
    multipart: false
    onSubmit: (data: T) => void
})

Then I though, “ok, it must be because when I don’t pass any value, the multipart property gets an ‘undefined'” so I changed it to this:

type CustomFormProps<T extends any> = {
    children?: ReactNode | ReactNode[]
    setMethods?: Function
    className?: string
} & ({
    multipart: true
    onSubmit: (data: FormData) => void
} | {
    multipart: false | undefined | null | void
    onSubmit: (data: T) => void
})

But it didn’t work either. What do I need to do to fix this?

I implemented the middleware that expires in 5 minutes, but how will the cache update? I also tried another approach with Pub/Sub using Redis, but when will it update? In the update function, I also tried something like this:

But this will I want to add everywhere when db is inserted, delted,updated then delete the cache key. Any other solution for this?

Redis implementation logic with better solution how to delete a cache when update delete insert in primary DB.

I have array1 and array2 in below data.i wanted to iterate all factoryId of array1 and need to check if same factoryid is present in array2.

if factoryId of array1 is matching with array2 factoryId , than i wanted to prepare new result array with array1 object and status field from array2 into new result array.

Expected output is a combination of array1 and array2 status field.

can anyone help me to do this

const array1 = [
    {
        "name": "Africa",
        "filterChildren": [
            [
                {
                    "name": "Agbara - Laundry",                  
                    "factoryId": "R_X001"                  
                },
                {
                    "name": "Agbara - Savoury",
                    "factoryId": "R_X002"
                }               
            ]
        ]
    },
    {
        "name": "X-Ekaterra",
        "filterChildren": [
            [
                {
                    "name": "Agbara - Tea",
                    "factoryId": "R_x903"                   
                }
            ]
        ]
    }
];


const array2 = [
    {
        "FactoryId": "R_X001",
        "Status": "Draft"
    },
    {       
        "FactoryId": "R_x903",
        "Status": "Submitted"
    }
]

Expected Output

Expected Result = [
    {
        "name": "Africa",
        "filterChildren": [
            [
                {
                    "name": "Agbara - Laundry",                  
                    "factoryId": "R_X001",
                    "Status": "Draft"
                },
                {
                    "name": "Agbara - Savoury",
                    "factoryId": "R_X002"
                }               
            ]
        ]
    },
    {
        "name": "X-Ekaterra",
        "filterChildren": [
            [
                {
                    "name": "Agbara - Tea",
                    "factoryId": "R_x903",
                    "Status": "Submitted"                  
                }
            ]
        ]
    }
];

I understand that it’s risky to consider this when it comes to security. However I am currently planning a project with the following ambitions:

Create a grammar using Nearley.js.

Use that grammar to store a function in my database for example:

"IF(G.cells[id]!=NULL){INVALIDMOVE}, playerID->G.cells[id]"

That function gets translated in the following parser in the following way:

function translateAST(ast) {
  switch (ast.type) {
    case 'condition':
      return `
        if (${translateExpr(ast.condition)}) {
          return ${translateAction(ast.action)};
        }
      `;
    case 'assignment':
      return `
        ${ast.target} = ${translateExpr(ast.value)};
      `;
    default:
      throw new Error(`Unknown AST node type: ${ast.type}`);
  }
}

function translateExpr(expr) {
  switch (expr.type) {
    case 'notEqual':
      return `${expr.left} !== ${expr.right}`;
    case 'identifier':
      return expr.name;
    default:
      throw new Error(`Unknown expression type: ${expr.type}`);
  }
}

function translateAction(action) {
  switch (action.type) {
    case 'action':
      if (action.name === 'INVALID_MOVE') {
        return 'INVALID_MOVE';
      }
    default:
      throw new Error(`Unknown action type: ${action.type}`);
  }
}

Then after we have parsed this

function generateMoveFunction(code) {
  return function({ G, playerID }, id) {
    // Use a closure to safely execute the code
    const func = new Function('G', 'playerID', 'id', `
      ${code}
    `);
    return func(G, playerID, id);
  };
}


// Example usage
const moveString = "IF(G.cells[id]!=NULL){INVALIDMOVE}, playerID->G.cells[id]";
const ast = parseMove(moveString);
const code = translateAST(ast);
const moveFunction = generateMoveFunction(code);

Then pass this moveFunction as a move for a library

const moves = {
  clickCell: moveFunction,
};

// Boardgame.io game configuration
const MyGame = {
  setup: () => ({ cells: Array(9).fill(null) }),
  moves: moves,
};

Is this a bad idea?

I am trying to get an ID then use that id in another function, I get the error:

There has been a problem with your fetch operation: undefined

getPreferences()
  .then((id) => updatePreferences(id))
  .then(() => console.log('Success'))
  .catch(function (error) {
    console.log(
      'There has been a problem with your fetch operation: ' +
        error.message,
    );
    throw error;
  });

Async functions:

export const getPreferences = async () => {
  try {
    const response = await get(API_GET_PREFERENCES, null, null);
    return response;
  } catch (e) {
    logCustomException('Error getting preferences id', e);
    throw e;
  }
};


export const updatePreferences = async (id) => {
  try {

    const response = await put(API_UPDATE_PREFERENCES, null, id, null, false);

    return response;
  } catch (e) {
    logCustomException('Error getting preferences id', e);
    throw e;
  }
};

I have a column with data in google sheets like this:

col_name
A
A
A
B
B
C

I want to store this data in a dictionary where column value is a key and number of occurrences is a value:

dict = {A:3, B:2, C:1}

I tried to iterate through a list of values:

col_values = mySheet.getRange(2, col, last_row-1, 1).getValues();

With a function:

function count_occurances_in_col(col_values){
  let occurances_dict = new Map();
  for(var i=0;i<=col_values.length;i++){
    if(occurances_dict.has(col_values[i][0])){
      let value = occurances_dict.get(col_values[i][0]);
      occurances_dict.set(col_values[i][0], value+1);
    } else {
      occurances_dict.set(col_values[i][0], 1);
    }
  }
  return occurances_dict;
};

But the function returns undefined instead of a dictionary (perhaps) because keys are set dynamically (if I understood correctly the forums – I don’t know JS well, only python).

Can I obtain such a dict with some function or any other way?

Notice that getValues() method returns col_values in a form:

[[A], [A], [A], [B], [B], [C]]

<title>A-Frame Undo/Redo/Delete Example</title>



<style>

    .ui-button {

        position: absolute;

        padding: 10px 20px;

        background: #333;

        color: #fff;

        border: none;

        cursor: pointer;

        font-size: 18px;

    }

    .ui-button:hover {

        background: #555;

    }

    #delete-button {

        top: 20px;

        left: 20px;

    }

    #undo-button {

        top: 20px;

        left: 100px;

    }

    #redo-button {

        top: 20px;

        left: 180px;

    }

</style>



<a-scene progressive-controls>

    <a-asset-item id="anotherchair" src="https://cdn.glitch.global/3c9342e0-0b69-45d0-b7e8-6f2e8cb53f2c/Chair.glb?v=1719489270451"></a-asset-item>

    <a-asset-item id="chair" src="https://cdn.glitch.global/3c9342e0-0b69-45d0-b7e8-6f2e8cb53f2c/Chair.glb?v=1719489270451"></a-asset-item>

    <a-asset-item id="sofa" src="https://cdn.glitch.global/3c9342e0-0b69-45d0-b7e8-6f2e8cb53f2c/Sofa.glb?v=1719489265917"></a-asset-item>

    <a-entity gltf-model="#anotherchair" class="clickable" position="-4 1 -3" grabbable></a-entity>

    <a-entity gltf-model="#chair" class="clickable" position="-2 1 -3" grabbable></a-entity>

    <a-entity gltf-model="#sofa" class="clickable" position="-6 1 -3" grabbable></a-entity>

    <a-camera position="0 1.6 0">

        <a-cursor></a-cursor>

    </a-camera>

</a-scene>

<button id="delete-button" class="ui-button">Delete</button>

<button id="undo-button" class="ui-button">Undo</button>

<button id="redo-button" class="ui-button">Redo</button>

<script>




    let actionHistory = [];
    let redoStack = [];
    let selectedEntity = null;
    const scene = document.querySelector('a-scene');

    // Serialize entity data including all necessary attributes

   

    function serializeEntity(entity) {
        const attributes = {};
        ['position', 'rotation'].forEach(attr => {
            const value = entity.getAttribute(attr);
            if (value) {
                attributes[attr] = value;
            }
        });

        return {
            id: entity.getAttribute('id'),
            type: entity.tagName.toLowerCase(),
            attributes: attributes
        };

    }

    // Create an entity from serialized data

    function createEntityFromData(data) {

        const entity = document.createElement(data.type);

        entity.setAttribute('id', data.id);

        Object.keys(data.attributes).forEach(attr => {

            entity.setAttribute(attr, data.attributes[attr]);

        });

        return entity;

    }

    // Handle deletion and store the state for undo

    function deleteEntity(entity) {

        const data = serializeEntity(entity);
        //data = position, rotation of entity add

        actionHistory.push({ action: 'delete', data: data });

        redoStack = []; // Clear redo stack on new action

        entity.parentNode.removeChild(entity);

        selectedEntity = null; // Clear selected entity after deletion

    }

    // Handle undo operation

    function undo() {

        if (actionHistory.length === 0) return;

        const lastAction = actionHistory.pop();

        redoStack.push(lastAction);

        if (lastAction.action === 'delete') {

            const restoredEntity = createEntityFromData(lastAction.data);

            scene.appendChild(restoredEntity);
            //restoreEntity . position, rotation

            restoredEntity.addEventListener('click', () => selectEntity(restoredEntity));

        }

    }

    // Handle redo operation

    function redo() {

        if (redoStack.length === 0) return;

        const lastRedo = redoStack.pop();

        actionHistory.push(lastRedo);

        if (lastRedo.action === 'delete') {

            const entity = scene.querySelector( lastRedo.data.id);

            if (entity) {

                entity.parentNode.removeChild(entity);

            }

        }

    }

    // Select an entity

    function selectEntity(entity) {

        selectedEntity = entity;

    }

    // Attach click event to all clickable entities

    document.querySelectorAll('.clickable').forEach((entity) => {

        entity.addEventListener('click', () => selectEntity(entity));

    });

    // Bind UI buttons for delete, undo, and redo

    document.getElementById('delete-button').addEventListener('click', () => {

        if (selectedEntity) deleteEntity(selectedEntity);

    });

    document.getElementById('undo-button').addEventListener('click', undo);

    document.getElementById('redo-button').addEventListener('click', redo);


</script>

Here is the code what i have tried and deleting is working fine but when i am clicking on undo it is placing at some other place.

I want to place the object at initial plosition

Initial Image before delete and undo

after deleting and undoing it is placing in different position

I need to fix this issue

I am working on webxr for learning i need to add undo and redo functionality so anyone please help me to fix it.

it is placing in differenct position from initial position it placing at position= {0, 0 ,0}, and rotation= {0, 0 ,0}

BEFORE RUNNING ABOVE FILE
PLEASE ADD THESE SCRIPTS IN HEAD TAG

sample data and postman req image I am sending “get” request on Postman. Unfortunately, there is no luck and I can’t find the mistake. Here is my factory.js :

exports.getOne = (Model, popOptions) =>
  catchAsync(async (req, res, next) => {
    console.log('GET ONE');
    let query = Model.findById(req.params.id);
    if (popOptions) query = query.populate(popOptions);
    const doc = await query;
    if (!doc) {
      return next(
        new AppError('No documents fond with that id', 404)
      );
    }
    res.status(200).json({
      status: 'success',
      data: {
        data: doc,
      },
    });
  });

controller :

exports.getTourById = factory.getOne(Tour, { path: 'reviews' });

I tried to change controller and at the end no luck ana here is sample data in my DB.

I am quite new to this so I hope my question makes sense.
I am trying to build a React app that allows users to input values and then return charts showing data from an API. Here is a simple explanation of how it should work using a weather forecast as an example:
The user chooses the day, hour, and location and submits the form.
These values are inserted into a URL that returns a JSON with the amount of rain expected for that time and place.
The user sees a Chart.js chart showing the amount of rain expected.

I have made some attempts and I have been able to fetch the data using Axios, but I am unable to make it work with the charts, also I feel that my work is not well structured and I would appreciate an overview of how this could best be done.

I fetched the data using axios and tried to assign the values in the data to variables that the charts will display. However, if I do this then the charts won’t show up at all, it seems I’m far from the correct solution.

I want to put the comment’s text underneath the user image like this layout:

this is the current html:

                                        <div class="custom-box">
                                            <div class="comments-container">
                                                <div
                                                    class="dropdown-container p"
                                                    onclick="toggleDropdown()"
                                                >
                                                    <span class="mt-1"
                                                        >التعليقات</span
                                                    >
                                                    <span class="arrow mt-1"></span>
                                                </div>
                                                <div
                                                    id="dropdownContent"
                                                    class="dropdown-content"
                                                >
                                                    <h3>إضافة تعليق</h3>
                                                    <div
                                                        class="comment-input-container"
                                                    >
                                                        <input
                                                            type="text"
                                                            id="commentText"
                                                            class="comment-input"
                                                        />
                                                    </div>
                                                    <button
                                                        onclick="addComment()"
                                                        class="add-comment-button"
                                                    >
                                                        أضف
                                                    </button>
                                                    <div id="commentsList"></div>
                                                </div>
                                            </div>
                                        </div>

and this is the styling:

.comments-container {
    padding-bottom: 0px !important;

    .dropdown-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        cursor: pointer;
        font-weight: 900;
    }

    .dropdown-container:hover {
        opacity: 0.8;
    }

    .dropdown-container .arrow {
        padding: 15px;
        border-radius: 3px;
        height: 50px;
        color: black;
        padding-right: 30px;
        font-size: 14px;
        position: relative;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        border: none;
        background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>")
            no-repeat;
        background-position: right 5px top 50%;
    }

    .dropdown-content {
        display: none;
        padding: 20px;
        border-radius: 8px;
        margin-top: 10px;
    }

    .dropdown-content.show {
        display: block;
    }

    .comment-card {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        background-color: white;
        padding: 10px;
        border-radius: 15px;
        margin-top: 10px;
        margin-left: 10px;
        border: 1px solid #ddd;
    }

    .comment-card img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-left: 10px;
    }

    .comment-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-left: 10px;
    }

    .comment-header .user-name {
        font-size: 14px;
        font-weight: 900;
        color: #000;
    }

    .comment-header .comment-date {
        font-size: 12px;
        color: #888;
    }

    .comment-text {
        margin-top: 5px;
        font-size: 16px;
        padding-left: 10px;
    }

    .add-comment-button {
        padding: 10px 20px;
        background-color: #0056b3;
        color: white;
        border: none;
        border-radius: 35px;
        width: 150px;
        height: 42px;
        cursor: pointer;
        margin-top: 20px;
        margin-left: 10px;
    }

    .add-comment-button:hover {
        background-color: #004494;
    }

    .comment-input-container {
        display: flex;
        align-items: center;
        margin-top: 10px;
    }

    .comment-input {
        flex-grow: 1;
        border-radius: 10px;
        border: 1px solid #ddd;
        padding: 10px;
        margin-left: 10px;
        height: 60px;
    }
}

and the javascript :

            <script>
document.addEventListener("DOMContentLoaded", function () {
    addDefaultComment(); // Add a default comment when the page loads
    keepDropdownOpen();  // Keep the dropdown open by default
});

function toggleDropdown() {
    const dropdownContent = document.getElementById("dropdownContent");
    dropdownContent.classList.toggle("show");
}

function keepDropdownOpen() {
    const dropdownContent = document.getElementById("dropdownContent");
    dropdownContent.classList.add("show"); // Keep the dropdown open by default
}

function addComment() {
    const commentText = document.getElementById("commentText").value;
    if (commentText.trim() === "") return;

    createCommentElement(commentText, "زائر"); // Replace "زائر" with actual user name if available

    document.getElementById("commentText").value = "";
}

function createCommentElement(commentText, userName) {
    const commentList = document.getElementById("commentsList");
    const newComment = document.createElement("div");
    newComment.classList.add("comment-card");

    const userImage = document.createElement("img");
    userImage.src = "https://via.placeholder.com/40"; // Placeholder image
    newComment.appendChild(userImage);

    const commentContent = document.createElement("div");
    commentContent.classList.add("comment-content");

    const commentHeader = document.createElement("div");
    commentHeader.classList.add("comment-header");

    const userNameElement = document.createElement("span");
    userNameElement.classList.add("user-name");
    userNameElement.innerText = userName;
    commentHeader.appendChild(userNameElement);

    const commentDate = document.createElement("span");
    commentDate.classList.add("comment-date");
    const date = new Date();
    commentDate.innerText = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
    commentHeader.appendChild(commentDate);

    commentContent.appendChild(commentHeader);

    // Add a line break after the comment header
    const lineBreak = document.createElement("br");
    commentContent.appendChild(lineBreak);

    const commentTextElement = document.createElement("div");
    commentTextElement.classList.add("comment-text");
    commentTextElement.innerText = commentText;

    commentContent.appendChild(commentTextElement);
    newComment.appendChild(commentContent);

    commentList.appendChild(newComment);
}


function addDefaultComment() {
    const defaultCommentText = "هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!";
    createCommentElement(defaultCommentText, "زائر"); 
}

document.getElementById("commentText").addEventListener("keypress", function (event) {
    if (event.key === "Enter") {
        event.preventDefault(); // Prevents the default action of the Enter key
        addComment();
    }
});

            </script>

what should I do to get the required output like the image?

the comment’s text should start underneath the user image , my output is showing the comment’s text next to it not underneath it , what is the problem? or what did I miss? please point me to the right approach

We are building a native JS web component library (Foo Web Components, or FWC), and we are trying to use it in an Angular application (for now, without a wrapper).

• We are packing it as an NPM package, and installing it as a dependency through npm i @foo/foo-web-components.
• We are importing the necessary components in a brand new Angular 18 application in a module.
• We are attempting to use two components (Input and Datepicker) in a simple app.component.

Our relevant files now look as follow:

app.component.ts:

import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from '@angular/core';

import { FWCInput, FWCDatepicker } from '@foo/foo-web-components';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {
  public today: Date = new Date();
  //@ts-ignore
  @ViewChild("datepicker") datepicker: ElementRef<FWCDatepicker>;
  //@ts-ignore
  @ViewChild("input") input: ElementRef<FWCInput>;

  constructor() { }

  ngAfterViewInit(): void {
    console.log(this.datepicker);
    console.log(this.input);
  }
}

app.component.html:

Datepicker: <fwc-datepicker #datepicker [date]="today" label="Datepicker"></fwc-datepicker>
Input: <fwc-input #input placeholder="placeholder" value="From Template" label="Input"></fwc-input>

With this configuration, the page looks like this:

No errors in the console or build process, but the components aren’t in the DOM or rendered.

However, if we add a single line in the constructor of the app.component.ts as so:

  constructor() {
    var foo = new FWCInput();
  }

Suddenly the components appear:

I’m assuming it’s got to do with something related to when Angular actually loads an import… If it’s “not actually used” (as perceived by the framework) it won’t load it.
However, when we import just ONE of the members from the library (in this case, the FWCInput), the whole library gets pulled-in and everything works (including the FWCDatepicker which wasn’t referenced in a new variable).

Why is this, and how would we go about as library designers to allow users to just “use” our components without instantiating disposable variables?

EDIT: Removed the fwc.module.ts file since it wasn’t needed (came from previous tests…).

everyone,
I’m trying to create a pdf file with jsPDF but I need a logo at the top of the page.
I’ve tried a .jpg and a .png file bu I always get the erro that the file is not a .jpg file or a .png file.
I’ve tried everything I can remember and I cant’t make it work and it’s a pity because jsPDF is very straight forward to use.
Can anyone help?
Thank you in advance

I tried several different images and expected the image to appear in the created pdf.

I’m currently tracking my website activity (url’s visited, google search). I want to construct a connected graph with these URL’s. What is the best approch to do that?

What I have tried:
storing web activites in the below format

{ 
  timestamp: 2024-05-25, 16:13:43, 
  parent_url: https://www.reddit.com, 
  type: visit, 
  url: https://www.reddit.com/t/animals_and_pets/
}.

I’m extracting parent URL using

console.log(document.referrer)

Sometimes the parent URL is empty and other time its incorrect. For example if I have visited site_1 -> site_2 -> site_3. It’s showing parent URL for site_3 as site_1 instead of site_2.

I’m expecting the correct way for getting parent URL’s and structuring my logs.

I have created a HTML file with a button that get the tags from a xml file placed in the same directory as the HTML file. I am wondering if there is any way to turn this button into an uploading button to upload any XML file (from the desktop, for example) and fill the divs at the same time. Here is the code:

    <input type="button" value="Get XML data" id="users" onclick="xmlOpen()">
    
    <div id="red" style="color: red"></div>
    <div id="violet" style="color:violet"></div>
    <div id="blue" style="color:blue"></div>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};

function xmlOpen() {
xhttp.open("GET", "document.xml", true);
xhttp.send();
}

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName('title')[0];
    var y = x.childNodes[0];
    document.getElementById("red").innerHTML =
    y.nodeValue; 
    
    var x = xmlDoc.getElementsByTagName('ProjectID')[0];
    var y = x.childNodes[0];
    document.getElementById("violet").innerHTML =
    y.nodeValue; 
    
    var x = xmlDoc.getElementsByTagName('VendorName')[0];
    var y = x.childNodes[0];
    document.getElementById("blue").innerHTML =
    y.nodeValue;
}
</script>

Thanks!

I have javascript popup.

My application server is localhost:8023 and opens the page on localhost:8024

it opens the window at first,

var win = window.open('http://localhost:8024/dummy?id=test1',"_blank",'status=yes,width=500,height=500');

then, I want to reload in the same popup such as

window.open('http://localhost:8024/dummy?id=test2',win,'status=yes,width=500,height=500');

However this doesn’t open.

Is there any method to do this?