Category: javascript

I want to make a popup window and after clicking on one of multiple items. I figured that possibly the best solution would be to have the popup element in top level of dom rather than copy it to each of the list item. Was trying to figure out a way to change it’s state and would like to ask for help doing it.
Also would appreciate a suggestion on how I could handle popup buttons to have seperate handlers for each list item.

const { useState } = React;

function App() {
    return (
    <div>
      <Container/>
      <Popup />
    </div>
  )
}

function Container() {
    const setPopupVisible = () => {
    console.log('Popup should appear')
  }
    return (
    <ul>
      <li onClick={setPopupVisible}>Item 1</li>
      <li onClick={setPopupVisible}>Item 2</li>
    </ul>
  )
}

function Popup() {
    const [visible, setVisible] = useState(false) 
    return (
    visible ? <div>
      <h3>Popup</h3>
    </div> : ''
  )
}

ReactDOM.render(<App />, document.querySelector("#app"))

I’m having trouble clicking Load More button on the bottom of https://cointelegraph.com/tags/ethereum website. I am able to get 15 articles from the first page, but that’s about it. My Lua script looks like this:

function main(splash, args)
  splash.images_enabled = true
  assert(splash:go(args.url))
  assert(splash:wait(5))
  for i = 0,5,1
  do
    input_box = assert(splash:select("button[class='btn posts-listing__more-btn']"))
    assert(splash:wait(1))
    input_box:mouse_click()
    assert(splash:wait(5))
  end
  splash:set_viewport_full()
  return {
    png = splash:png(),
    html = splash:html(),
    har = splash:har(),
  }
end

What I also tried, is executing this code inside Lua Splash script:

assert(splash:runjs('document.querySelectorAll("button.btn.posts-listing__more-btn")[0].click()'))

What’s interesting is that document.querySelectorAll("button.btn.posts-listing__more-btn")[0].click() executed inside Chrome console clicks the button just fine. I am aware at this point that the website in question is doing something to prevent scraping or JS execution, but I can’t figure what. I also tried launching splash with --disable-private-mode, enabling settings like Flash, Local storage, HTML5, and anything else I found to be possible solution but nothing works. Initially my spider was scraping https://cointelegraph.com/search?query=ethereum but that URL doesn’t even load inside Splash any longer. Any hints, or help is greatly appreciated! Using Splash version: 3.5.

I’m running JavaScript/TypeScript chaincode from fabric-samples (asset-transfer-basic/chaincode-javascript) and I need the Node.js version to be 16 instead of 12.

I think that what is setting the Node.js version to 12.16.1 is the hyperledger/fabric-nodeenv image, but I don’t know how can I change it.
https://hub.docker.com/layers/fabric-nodeenv/hyperledger/fabric-nodeenv/2.4.1/images/sha256-53ec564ee28ed1fcee3be9ed1459bcc98a22fc0d81e5a707239425615641786a?context=explore

The documentation says that v2.4 modules use version 16.4.0 of Node.js and versions v2.2/2.3, 12.16.1. But I’m using the latest version of Fabric (2.4.2).
https://github.com/hyperledger/fabric-chaincode-node/blob/main/COMPATIBILITY.md

I use ./network.sh deployCC to deploy the chaincode.

I have extracted data into JSON dump / JSON format. Its a huge data of more than 90,000 lines in it. When I extracted, some characters are escaped and replaced. for example " is replaced by ".

I want to remove r completely and replace " to "

I dont want to use .replace method of javascript. Can anyone help me to replace the escaped characters " and r to their original form. I have tried JSON.parse and .replace methods but it seems to be not working.

Please if anyone have idea to replace them in nodejs, it would be really helpful. Thanks

one line from the json file:

{"time": "10:00", "date": "30-04-2022", "value": "{"number":"1", "data": {"score": "5", "team": "abc"}}r}

expected outcome:
{"time": "10:00", "date": "30-04-2022", "value": "{"number":"1", "data": {"score": "5", "team": "abc"}}r}

I’d like to create an array like this by code.

let arr = {
    'First': {
        'bg': 'a',
        'fg': 'b'
    },
    'Second': {
        'bg': 'c',
        'fg': 'd'
    }
};

This doesn’t work:

Uncaught TypeError: Cannot set properties of undefined (setting ‘bg’)

var arr = [];
arr['First']['bg'] = 'a';
arr['First']['fg'] = 'b';

arr['Second']['bg'] = 'c';
arr['Second']['fg'] = 'd';

I have a Flatlist that renders multiple posts, each post has a text section, the text can get very big so I’m using a show more method to expand/hide the text, and I’m handling the status of it using a state, however, when I click on a post to expand the text, it expands all posts in the Flatlist, I tried creating a dynamic Ref for each post, but I can’t figure out a way to change the text content accordingly, anything I’m missing?

here’s my code:

  const [showMore, setShowMore] = useState(false);

  const refs = useRef([]);




// Inside a Flatlist render item: 

    <View style={styles.postContainer}>
      {item.data.postText.length > 120 ? (
        showMore ? (
          <TouchableOpacity onPress={() => setShowMore(!showMore)}
           ref={(expandableText) => (refs.current[index] = expandableText)}>
            <Text style={styles.postDescription}>{item.data.postText}</Text>
            <Text style={styles.seeMore}>Show less</Text>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity onPress={() => setShowMore(!showMore)}>
            <Text style={styles.postDescription}>
              {`${item.data.postText.slice(0, 120)}... `}
            </Text>
            <Text style={styles.seeMore}>Show more</Text>
          </TouchableOpacity>
        )
      ) : (
        <Text style={styles.postDescription}>{item.data.postText}</Text>
      )}
    </View>

I am learning Nightwatch.
When I am executing the below I am facing error.I want to edit my script.js file to fix error but I am not sure what to do. Where my test.js file is

module.exports = {


     'Login': function (client) {
          client.page.script()
               .launchapp()
               .collection()
               .Checkdata()
               .notravel()
               .avail()
     },


};

And my script.js file is

const commands = {
    launchapp: function () {
        return this.init()
    },

    collection: function () {
        return this.click('@city')
            .waitForElementPresent('@cityInput')
            .setValue('@cityInput', 'hyd')
            .waitForElementPresent('@firstOption')
            .click('@firstOption')
    },
    Checkdata: function () {
      return this.waitForElementPresent('@checkin')
       .click('@checkin')
       .useXpath()
       .waitForElementPresent(`(//table[@class=' table-condensed']//tbody//tr//td[text()='2'])[1]`)
       .click(`(//table[@class=' table-condensed']//tbody//tr//td[text()='4'])[1]`)
       .useXpath()
       .click("//span[text()='Checkout']")
       .click("//input[@name='checkout']")
       .waitForElementPresent(`(//table[@class=' table-condensed']//tbody//tr//td[text()='3'])[2]`)
       .click(`(//table[@class=' table-condensed']//tbody//tr//td[text()='6'])[2]`)
       .click(`(//label[text()='Travellers']/parent::div/div/div/a)[1]`)

           
    },
    notravel: function () {
        //  some code goes here
        return this;
    },
     avail: function () {
        //  some code goes here
        return this.useXpath().click(`(//button[@id='submit']//span[text()=' Search'])[1]`)
    },
}
module.exports = {
commands: [commands],
elements: {
        city: '#select2-hotels_city-container',
        cityInput: "input[aria-controls='select2-hotels_city-results']",
        firstOption: "#select2-hotels_city-results li",
        checkin: '#checkin',
        checkOut: "#checkout"
    },
}

When I am executing this I am facing error either “Cannot read property ‘script’ undefined” or “Cannot read property ‘page’ undefined”

Kindly help me on this.

This code doesn’t throw an error, but does nothing (because string are immutable). I’m wondering why is it allowed in the first place, it seems like assigning to an r-value to me, which should throw a SyntaxError.

const str = 'some string';
str[2] = 'x';
// no error is being thrown

im looking for a way to asynchronous iterate over an array and update a variable and in the end return this variable.

export const test = async(
...
): Promise<number> => {
let highestAmount = 0;
    for (const entry of entries) {
        const check = async () => {
            let amount = 0
            try {
                newAmount = await getAmount(entry);
            } catch (e) {
                return;
            }
            if (newAmount > amount ) {
                highestAmount = newAmount;
           }
        }
        check()
    }
    return highestAmount;
}

In this current state i only get 0’s back because the function doesnt wait for its finish.
Is there a way that the function only returns if all processes inside the for are finished ?
Lets say the getAmount(entry) function takes 1 second to finish then i have to wait around entries.length seconds. Im trying to find a way to execute this in 1 second so getAmount is called for every entry asynchronously => function returns highest number

I added checkboxes to my treeview, but there is no relationship between the node (parent or child…) and the added checkbox

I want when I click on the node or at the input I checked checkbox and I open the list of children of this node at the same time,

and if I click again on the node (parent or child …) or input I uncheck input and I close the list of children of this node

Here is my code

$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
     var extra = $(".tree li.parent_li > span")
    .parent("li.parent_li")
    .find(" > ul > li");
  extra.hide("fast");
    
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});

.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" id="theme" rel="stylesheet">
<div class="tree well">
    <ul>
        <li>
            <span>  <input type="checkbox" id="test1" name="test1">  Parent</span> 
            <ul>
                <li>
                    <span><input type="checkbox" id="test2" name="test2"> Child</span> 
                    <ul>
                        <li>
                            <span><input type="checkbox" id="test3" name="test3"> Grand Child</span> 
                          <ul>
                        <li>
                            <span><input type="checkbox" id="test3" name="test3"> Grand Grand Child</span> 
                           <ul>
                        <li>
                            <span><input type="checkbox" id="test3" name="test3"> Grand Grand Grand Child</span> 
                        </li>
                    </ul>
                        </li>
                    </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <span><input type="checkbox" id="test4" name="test4"> Child</span> 
                    <ul>
                        <li>
                            <span><input type="checkbox" id="test4" name="test4"> Grand Child</span> 
                        </li>
                        <li>
                            <span><input type="checkbox" id="test5" name="test5">Grand Child</span> 
                            <ul>
                                <li>
                                    <span><input type="checkbox" id="test6" name="test6"> Great Grand Child</span> 
                                    <ul>
                                        <li>
                                            <span><input type="checkbox" id="test7" name="test7">Great great Grand Child</span> 
                                        </li>
                                        <li>
                                            <span><input type="checkbox" id="test8" name="test8"> Great great Grand Child</span> 
                                        </li>
                                     </ul>
                                </li>
                                <li>
                                    <span><input type="checkbox" id="test9" name="test9">Great Grand Child</span> 
                                </li>
                                <li>
                                    <span><input type="checkbox" id="test10" name="test10"> Great Grand Child</span> 
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span><input type="checkbox" id="test11" name="test11"> Grand Child</span> 
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <span><input type="checkbox" id="test12" name="test12"> Parent2</span> 
            <ul>
                <li>
                    <span><input type="checkbox" id="test13" name="test13"> Child</span> 
                </li>
            </ul>
        </li>
    </ul>
</div>

Here’s a JSFiddle link :https://jsfiddle.net/daizdev/q5hwg0yj/13/

I am trying to use Material UI’s Avatar with images outside the website.

<Avatar
   src={'http://localhost:3030/images/a/1651325908227-Capture.PNG'}
/>

If I try using an online source(not my local server) it seems ok:

<Avatar
   src={'https://mui.com/static/images/cards/basement-beside-myself.jpeg'}
/>

Other images on the website load correctly from the same backend.

When i run cmd : npm run watch for my laravue project
it shows the error below : TypeError: Cannot set properties of undefined (setting ‘exclude’)

Error

Issue:
So if the page is refreshed or entered via a direct link the template initially displays v-else (spinner) and then the variable (hoursToday) as expected. However, if the page is entered via user navigation (NuxtLink) the v-else (spinner) is displayed infinitely. No method that I have tried updates the template correctly when using user navigation.

My code

Script:

    props: {
        hours: Array
    },

    computed: {
        hoursToday() {
            if (this.hours)
                var today = this.hours.find(date => date.item.day == this.$dateFns.format(new Date(), 'EEEE'))
            if (today)
                return today.item.opens + ' - ' + today.item.closes

        },

Template:

    <h4>Hours</h4>
     <h6 v-if="hoursToday">
      {{hoursToday}}
      </h6>
      <h6 v-else>
       <Spinner />
      </h6>

setInterval(() => {
      AFK1.setState(true)
      setTimeout(() => {
      AFK1.setState(false)
      AFK2.setState(true)
      setTimeout(() => {
      AFK2.setState(false)
      }, 250);
     }, 250);
}, 1000);

That Stupid code work only when there are not SetInterval

I’ve got a page at <url>/machines which lists the IP addresses of a set of machines on a network. I want to be able to click on one in the list and link to a page <url>/machines/<machineid> to render a new page which which show information about that specific machine. I want the value specified in the URL as <machineid> to be passed into the rendered page as a usable value, e.g. in a prop/param etc.

I’m having trouble configuring react router to achieve this, and am wondering if anyone can see what I’m doing wrong? I’ve been following the React Router V6 docs, however can’t seem to get it to work. When I render the page at <url>/machines/hello, I get a console error saying No routes matched location "/machines/hello". Can anyone see what I’m doing wrong?

I was initially thinking I’d just render a new page (using a different component) to render the Machine Info page, however looking at the React Router V6 docs, it seems like the <MachineInfo> component is now rendered as a child of <Machines>?

App.js

function App() {
  const value = useContext(Context);
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="machines" element={<Machines />}>
          <Route path="machines/:id" element={<MachineInfo />} />   // I've tried this using just path=":id" as well with no luck
        </Route>
        <Route path="topology" element={<Topology />} />
        <Route path="settings" element={<Settings />} />
      </Routes>
    </div>
  );
}

MachineInfo.js

export default function MachineInfo(props) {

    const [state, dispatch] = useContext(Context);
    let { id } = useParams<"id">([]);
    alert("info: " + id)
    
    return (
        <p>hello</p>
    );
}