Category: javascript

I have a toggle button that changes isActive to true or false but it won’t change the button. I have to refresh the page to show the color change in the toggle button.
I’m new to vue.js. Please any advice? Thanks in advance!

async toggleNetworkGroup(audId, netId, turnOn)
        {

            let status = { isActive: turnOn };

            let url =  projConfig.apiRoot + `/s/groups/${audId}/network-groups/${netId}`;
            console.log(status);
            return axios.put(url, status)
                .then((res) =>
                {
                  
                    if(!this.isActive)
                    {
                        this.isActive = true;
                        
                        return { success: res };
                        
                    }
                    else if (this.isActive)
                    {
                        this.isActive = false;
                        return res;
                        
                    }
                    
                })
                .catch((error) =>
                {
                    console.log(error);
                    
                });

 <switcher
  :value="networkAudience.isActive"
  :disabled="loading"
  @input="(isChecked) => toggleNetworkGroup(isChecked, group.id, networkGroup.name, networkGroup.id)"
  />

Hello I’m trying to convert an initial object that i’m starting out with to the expected structured format. Any help is welcome, I know this will involve creating a recursive function. However, I’m a bit puzzled as to how to set it all up. Thank you in advance.

Initial

const x = {
 Id: { name: 'Id', fieldsByTypeName: {} },
 Subject: { name: 'Subject', fieldsByTypeName: {} },
 Profile: {
  Id: { name: 'Id', fieldsByTypeName: {} },
  Name: { name: 'Name', fieldsByTypeName: {} },
  CreatedBy: {
    name: 'CreatedBy',
    fieldsByTypeName: {
       CreatedBy: {
       Id: { name: 'Id', fieldsByTypeName: {} },
       Name: { name: 'Name', fieldsByTypeName: {} },
     }
    }
  },
  Record: {
     name: 'Record', 
     fieldsByTypeName: {
      Record: {
         Id: { name: 'Id', fieldsByTypeName: {} },
         Name: { name: 'name', fieldsByTypeName: {} },
      }
    }
  }
 }
}

Expected:

{
 Id: true,
 Subject: true,
 Profile: {
   Id: true,
   Name: true,
   CreatedBy: { 
      Id: true,
      Name: true
   },
   Record: {
    Id: true,
    Name: true
   }
 }
}

Given the excludes and items arrays, I want to return an array of objects from items that don’t contain a key, value pair corresponding to a key, value pair object in excludes. Is there a better way of solving this other than using nested for loops?

const excludes = [{key: "color", value: "Red"}, {key: "age", value:12}, {key:"score", value: 75}];

const items = [{color: "Red", score: 30, age: 12}, {color: "Blue", score: 100, age: 20}, {color: "Red", score: 75, age: 30}];

//Expected output: [{color: "Blue", score: 100, age: 20}]

I am trying to build a web app with login and signup in the nav-bar/header. When I open the web app using index.html, the login and signup option shows at the top (in nav-bar) but when I do python -m flask run, it never shows that login/signup option. I will attach a snippet of my app.py

First half of app.py

second half of app.py

So first I have a query that finds books that has been borrowed by user, it will search using the Borrow model

const bookqueryinitial = await Borrow.find({borrower_Id : String(_id), borrowStatus: req.query.status}).sort({"borrowDate": -1 }).skip(skip).limit(pageSize);

it will return results like this

[
   {
     _id: new ObjectId("628ebcc10944a1223397b057"),
     borrower_Id: '6278d1b6b4b7659470572e19',
     borrowedbook_Id: '62710ac63ad1bfc6d1703162',
     borrowStatus: 'pending',
     borrowDate: 2022-05-25T23:33:21.849Z,
     __v: 0
   },
   {
     _id: new ObjectId("628d9c0b9a3dc72f4aa72f1a"),
     borrower_Id: '6278d1b6b4b7659470572e19',
     borrowedbook_Id: '62710ac63ad1bfc6d170314d',
     borrowStatus: 'pending',
     borrowDate: 2022-05-25T03:01:31.416Z,
    __v: 0
    }
 ]

next is I will map through the borrowedbook_Ids of the result and store them in an array

const booksinsidequery = bookqueryinitial.map(bookids=>{
      return bookids.borrowedbook_Id
    })

then I will search the ids that is stored in array and search for those ids in the Book model

 const bookquery = await Book.find({ '_id': { $in: booksinsidequery } });

\and the result is somethign like this

 [
   {
    _id: new ObjectId("62710ac63ad1bfc6d170314d"),
     title: "Girl who kicked the Hornet's Nest",
     author: 'Larsson, Steig',
     genre: [ 'fiction' ],
     publisher: '',
     dateOfPublication: 2017-10-25T00:00:00.000Z,
     noOfCopies: 14,
     type: 'Article',
     form: 'Fiction',
     isbn: '978-69793-4824559-56755-9',
     dateAdded: 2003-04-23T00:00:00.000Z,
     noOfBookmarks: [ [Object] ],
     noOfLikes: [],

   },
   {
     _id: new ObjectId("62710ac63ad1bfc6d1703162"),
     title: 'We the Nation',
     author: 'Palkhivala',
     genre: [ 'philosophy' ],
     publisher: '',
     dateOfPublication: 2011-11-22T00:00:00.000Z,
     noOfCopies: 94,
     type: 'Book',
     form: 'Non-fiction',
     isbn: '978-65685-4156343-802140-8',
     dateAdded: 2010-06-08T00:00:00.000Z,
     noOfLikes: [],
     noOfBookmarks: []
   }
 ]

Now before sending the result of the query to the client side, I want to bind my initial queries from Borrow model to my Book model and the final result should be like this

 [
   {
    _id: new ObjectId("62710ac63ad1bfc6d170314d"),
     title: "Girl who kicked the Hornet's Nest",
     author: 'Larsson, Steig',
     genre: [ 'fiction' ],
     publisher: '',
     dateOfPublication: 2017-10-25T00:00:00.000Z,
     noOfCopies: 14,
     type: 'Article',
     form: 'Fiction',
     isbn: '978-69793-4824559-56755-9',
     dateAdded: 2003-04-23T00:00:00.000Z,
     noOfBookmarks: [ [Object] ],
     noOfLikes: [],

     //added properties based on matched condition  (Borrow.borrowedbook_Id === Book._id)
     borrowStatus: 'pending',
     borrowDate: 2022-05-25T03:01:31.416Z,
   },
   {
     _id: new ObjectId("62710ac63ad1bfc6d1703162"),
     title: 'We the Nation',
     author: 'Palkhivala',
     genre: [ 'philosophy' ],
     publisher: '',
     dateOfPublication: 2011-11-22T00:00:00.000Z,
     noOfCopies: 94,
     type: 'Book',
     form: 'Non-fiction',
     isbn: '978-65685-4156343-802140-8',
     dateAdded: 2010-06-08T00:00:00.000Z,
     noOfLikes: [],
     noOfBookmarks: [],
     
   //added properties based on matched condition  (Borrow.borrowedbook_Id === Book._id)
     borrowStatus: 'pending',
     borrowDate: 2022-05-25T23:33:21.849Z,
   }
 ]

How can I attain these results?

Having space between string in Value of a checkbox input like Item Two I am not able to set the checkbox to be checked.

<input type="checkbox" id="item2" name="check" value="Item Two">Item Two
$(":checkbox[value=Item Two]").prop('disabled', true);

Is there any way to fix this without changing the value of the input?

$(":checkbox[value=ItemOne]").prop("checked", "true");
$(":checkbox[value=Item Two]").prop('disabled', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="item1" name="check" value="ItemOne">Item One
<input type="checkbox" id="item2" name="check" value="Item Two">ItemTwo

I have simple XMLHttpRequest.

  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText);
    }
  };

  xhr.send();

As you can see that I’m printing this.responseText in the console which outputs something like following

({ "status": "success", "data": { "title": "Post1" })

How can I get the JSON inside. I am totally aware of JSONP concepts but I don’t want $.ajax in jQuery, I’m trying to achieve this via javascript. Thanks

Need a little guidance with conditional rendering in react

class Car extends React.Component {
id = '123456'

  render() {

   if("id".includes("1") === true){

    return <h2>$$${id}</h2>;

}
else{
         return <h2>{id}</h2>;
  }
}

For rendering $$$ for certain condition , apart from using if else and rendering
is there any way to conditionally render ???
a better way and the return can be quite long in big applications
is there a way to write conditional and return the value according to it?

I know I might be asking something quite simple but for the life of me I can’t seem to get my head around this and I’m definitely overseeing something simple but I don’t know what. Any help would be very appreciated.

I’m generating a static site using Hugo. On one of my pages, I want to create something like a progress bar, using a variable which I need to get from a file from a Github Gist.

Say this is the gist: https://gist.github.com/bogdanbacila/c5a9683089c74d613ad17cdedc08f56b#file-thesis-words-txt

The file only has one number, that’s it. What I’m asking is how to get that number from the gist and store it in hugo or at least just display it in some raw html. I want to mention that I’m not looking to use the provided embedded text, I’d rather just get the raw value. At the end of the day all I need is to read and display the number from the raw link here: https://gist.githubusercontent.com/bogdanbacila/c5a9683089c74d613ad17cdedc08f56b/raw/8380782afede80d234209293d4c5033a890e44b6/thesis-words.txt

I’ve asked this question on the Hugo forum and that wasn’t very helpful, instead of providing me with some guidance I got sent here. Here was my original question: https://discourse.gohugo.io/t/get-raw-content-from-github-gist-to-a-variable/38781

Any help would be greatly appreciated, I know there’s something very obvious which I’m not seeing, please guide me to the right direction, this doesn’t feel like it should be that complicated.

Best,
Bogdan

I have this graph and I want the first xAxis label to start at the beginning of the last horizontal line (Please see image). I want letter “N” from November to start at the beginning of the line. Can someone point me in the right direction, please? Thanks a lot in advance!

This is what my simple graph looks like:

 <div style={{ paddingTop: '16px', marginRight: '0px' }}>
      <ResponsiveContainer width="100%" height={400}>
      <LineChart
        margin={{
          top: 15,
          right: 45,
          left: 0,
          bottom: 24,
        }}
        data={points}
      >
        <CartesianGrid stroke={palette.border.primary} vertical={false} />
        <XAxis
          type="number"
          dataKey="date"
          tickLine={false}
          tickFormatter={unixDateFormatter}
          stroke={palette.border.primary}
          tickCount={6}
          ticks={generateTicks(points, 6)}
          domain={['dataMin', 'dataMax']}
          tick={{ fill: palette.text.primary }}
          fontSize={11}
          dy={5}
        />
        <YAxis
          dataKey="score"
          tickLine={false}
          axisLine={false}
          domain={[0, 1000]}
          tickCount={11}
          tick={<RiskScoreAxisTick />}
        />

and this my Graph:

I have an issue with my navbar,the weird thing is it works properly on desktop screen but start misbehaving on mobile,the nav bar moves a bit before getting fixed instead of being fixed immediately user starts scrolling,a screenshot of the behaviour below:

In the screenshot you can see the first content that seems to partly scroll with the whole content,that’s the navbar,after scrolling to that point it then assumes a fixed position making only half of the navbar visible.I use styled components for my styling below is the code for the navbar component:

export const  NavWrapper=styled.div`
color:#686869;
width:100%;
background:#ffffff;
top:0;
left:0;
position:sticky;
z-index: 100;
margin-bottom:10px;
box-shadow: -1px 5px 16px -10px rgba(0,0,0,0.63);
-webkit-box-shadow: -1px 5px 16px -10px rgba(0,0,0,0.63);
-moz-box-shadow: -1px 5px 16px -10px rgba(0,0,0,0.63);
@media only screen and (max-width: 480px) {
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  }
`;

export const Wrapper = styled.div`
width:93%;
padding-left:15px;
padding-right:15px;
display:flex;
justify-content:space-between;
align-items:center;
top:0;
left:0;

@media only screen and (max-width: 480px) {
  padding-top:8px;
  padding-bottom:8px;
  }

`;

I also tried to check if the contents where allowing an horizontal overflow,but i made sure i’m using border-boxing and the other components in the parent component had width less than 100%
this the styled component for the parent component :

export const Wrapper= styled.div`
position:relative;
width:100%;
background:#f2f2f2;
min-height:750px;




:after{
    
    opacity:0.5;
}

@media only screen and (max-width: 480px) {
  padding:0;
  box-sizing: border-box;
}
`;



export const  ContentWrapper=styled.div`
width:100%;
padding:0;
`;

export const HomeContent=styled.div`
display:flex;
width:100%;

`;

export const ContentOne=styled.div`
width:26%;
@media only screen and (max-width: 480px) {
  display:none;  
}
`;

export const GigContent=styled.div`
width:40%;
padding:2%;
@media only screen and (max-width: 480px) {
   width:98%;
   padding:1px;
   
}
`;

export const Loader=styled.div`
margin-left:230px;
@media only screen and (max-width: 480px) {
 margin-left:170px;   
}
`;

the jsx:

<Wrapper>
            <NavBar image={profileImage}/>
                {state.clientGig==0?<DialogBox display={"block"} message={NO_GIGS}/>:<></>}
                {error?<DialogBox display={"block"} message={error}/>:<></>}
        <ContentWrapper>
            <HomeContent>
                <ContentOne></ContentOne>
                <GigContent>
                    {
                     loading?
                     <Loader><ClipLoader color={'#36D7B7'} loading={loading}  size={25} /> </Loader>
                     :
                    <> {state.isClient==1?<FormGig profileId={profileId}/>:<></>}
                 {
                  state.Gigs.map((item)=>(
                     <Gig  title={item.title} senderImage={profileImage} 
                     isClient={state.isClient} id={item.id} profileId={profileId} 
                     userId={item.client} tags={item.tags} 
                     body={item.about} bids={item.bids} closed={item.closed}/> 
                  ))
                 }</>
                    }
                    
                 
                </GigContent>
                <ContentOne></ContentOne>
            </HomeContent>
            </ContentWrapper>
        </Wrapper>

styling and jsx for the gig component which is also a child component in the parent component:

export const Wrapper=styled.div`
display:${(props)=>props.display || "block"};
position:relative;
width:90%;
background:#ffffff;
min-height:200px;
padding:5%;
border:1px solid #c7c7c9;
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
font-family:'Ubuntu',sans-serif;
box-shadow: -1px 3px 5px -2px rgba(0,0,0,0.63);
-webkit-box-shadow: -1px 3px 5px -2px rgba(0,0,0,0.63);
-moz-box-shadow: -1px 3px 5px -2px rgba(0,0,0,0.63);
:hover{
    background:#f7faf9;
}
`;

export const Header=styled.div`
width:100%;
display:flex;
justify-content:space-between;
margin-bottom:17px;
`;

export const Title=styled.div`
width:90%;
font-size:20px;
font-weight:bold;
`;

export const CancelIcon=styled.div`
width:10%;
font-size:20px;
font-weight:bold;
`;

export const Body=styled.div`
width:100%;
margin-bottom:10px;
`;

export const Bids=styled.div`
margin-bottom:7px;
font-size:12px;
color:#49494a;
`;

export const TagsSection=styled.div`
display:flex;
width:100%;
padding:5px;
margin-bottom:17px;
`;

export const Tag=styled.div`
font-size:13px;
border-radius:25px;
background:#9c9ca1;
color:#ffffff;
margin-right:6px;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
`;

export const Message=styled.button`
margin-top:5px;
margin-bottom:7px;
font-size:12px;
padding:6px 10px 6px 10px;
background:#3251fc;
color:#ffffff;
border:none;
border-radius:8px;
`;

export const ClosedDiv=styled.div`
color:#e34b50;
font-size:11px;
margin-bottom:7px;
`;

export const BidButton=styled.button`
width:70%;
padding:15px;
border-radius:25px;
font-size:13px;
border:none;
background:#5c5cff;
color:#ffffff;
margin-left:70px;

:hover{
    background:#4373f7;
    
}
@media only screen and (max-width: 480px) {
  margin-left:40px;  
}

`;

<Wrapper display={removeGig}>
                <Header>
                <Title>{props.title}</Title> 
                {
                   props.profileId==props.userId && props.isClient?
                   <CancelIcon onClick={()=>deleteGig()}>
                       <i class="fa fa-times" aria-hidden="true"></i>
                   </CancelIcon> 
                   :
                   <>
                   </>
                }
                </Header>
                <Body>{props.body}</Body>
                {
                    props.profileId==props.userId && props.bids.length !=0 && props.isClient ?
                <Link to={"/bidders"}
                 state={{bids:props.bids,id:curUserId,username:curUserName,senderImage:props.senderImage}}>
                <Bids>{props.bids.length} bids already</Bids>
                </Link>
                :
                <Bids>{bids.length} bids already</Bids>
                }
                {
                    props.isClient && props.profileId==props.userId?
                    <Message onClick={closeGig}>{closed}</Message>
                    :
                    <>
                    {props.closed?
                       <ClosedDiv>closed</ClosedDiv>
                       :
                       <></>
                    }
                    </>
                }
                <TagsSection>
                  {
                      props.tags.map((item)=>(
                          <Tag>{item.name}</Tag>
                      ))
                  }  
                </TagsSection>
                <>{props.isClient==0 && !props.closed?<BidButton onClick={(e)=>bidGig(e,props.id,props.userId)}>{loading?<ClipLoader color={'#36D7B7'} loading={loading}  size={20} />
                
                :<>{bidVal}</>}</BidButton>:<></>}</>
            </Wrapper> 

I’m making a chrome extension to gather data from a webpage. When I try to use document.querySelectorAll() it gets the DOM from the popup, not the current webpage. I tried using chrome’s messaging system to request and send back the HTML but it doesn’t work and gives me errors.

Here’s the important files:

manifest.json

{
  "name": "Name",
  "description": "Description",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["storage", "activeTab", "scripting", "tabs"],
  "host_permissions": [
    "*://*.website.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["*://*.website.com/*"],
      "js": ["content_script.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "32": "/images/icon.png"
    }
  },
  "icons": {
    "32": "/images/icon.png"
  }
}

popup.js (runs inside popup.html)

function fetchData() {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {greeting: "fetchData"}, (response) => {
      console.log(response);
    });
  });
}

content_script.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.greeting === "fetchData") {
      sendResponse(document.querySelectorAll(".class"));
    }
  }
);

The error I get from the message sending is “Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.”

When I turn the NodeList to an array, there are no console errors, but it returns a list of “[object Object]”.

Please let me know if there’s a way to do this. I’m just using vanilla js.

For the following code I receive the immediate following errors:

Code:

const { Builder } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

(async function firstScript() {
    let driver, service;
    service = new chrome.ServiceBuilder('../config/chromedriver.exe');
    driver = await new Builder().forBrowser('chrome').setChromeService(service).build();
})();

Error

[28396:19016:0525/185240.960:ERROR:device_event_log_impl.cc(214)] [18:52:40.966] USB: usb_device_handle_win.cc:1049 Failed to read descriptor from node connection: A device attached to the system is not functioning. (0x1F)
[28396:19016:0525/185240.960:ERROR:device_event_log_impl.cc(214)] [18:52:40.966] USB: usb_device_handle_win.cc:1049 Failed to read descriptor from node connection: A device attached to the system is not functioning. (0x1F)

I have a bootstrap table where I’ve set my columns to use data-filter-control="select". When I try to filter a column that contains a special character like < or >. It returns No matching records found. However for other characters like &, = or etc. It works fine without any issues. Is there a way to ignore those special characters when using the filter?

Example code is on https://live.bootstrap-table.com/code/rsquare31/11608

Does anyone know of a window alert script (browser message) that would make an alert appear when a user right-clicks on an image? The idea is to warn someone that the image is copyrighted, or that they need to cite the source if they want to use it, etc. If such a script exists, is it possible to do this for just a specific image or images on the page, rather than a right-click anywhere on the page? Thanks for any help.