Category: javascript

I’m using HikaShop to build a webshop. For the filters i created a bootstrap accordion with radio buttons to select a filter to filter my products. Each accordion content card looks like the following:

<div class="col">
    <div class="multi-collapse collapse show" id="multiCollapseExample0" style="">
        <div class="card card-body">
            <div class="content" style="min-height:100px; float:left; width:99%;">
                <div class="hikashop_filter_Accessoires_7"><input onchange="window.hikashop.refreshFilters(this);" data-container-div="hikashop_filter_form_module_108" name="filter_Accessoires_7" type="radio" value="45" id="filter_7_45_module_108"><label class="filter_7_45_module_108" for="filter_7_45_module_108">Accessoires</label><br><span class="hikashop_filter_checkbox"><input onchange="window.hikashop.refreshFilters(this);" data-container-div="hikashop_filter_form_module_108" name="filter_Accessoires_7" type="radio" value="47" id="filter_7_47_module_108"><label class="filter_7_47_module_108" for="filter_7_47_module_108">Miners op voorraad</label></span><br><span class="hikashop_filter_checkbox"><input onchange="window.hikashop.refreshFilters(this);" data-container-div="hikashop_filter_form_module_108" name="filter_Accessoires_7" type="radio" value="52" id="filter_7_52_module_108"><label class="filter_7_52_module_108" for="filter_7_52_module_108">Pre-order</label></span><br><span class="hikashop_filter_checkbox"><input onchange="window.hikashop.refreshFilters(this);" data-container-div="hikashop_filter_form_module_108" name="filter_Accessoires_7" type="radio" value="53" id="filter_7_53_module_108"><label class="filter_7_53_module_108" for="filter_7_53_module_108">Combo deals</label></span><br></div>                            </div>
        </div>
        </div><br>
    </div>
</div>

Whenever you select a filter it will execute the function ‘refreshFilters’ which looks like the following:

refreshFilters: function (el, skipSelf) {
        "use strict";
        var d = document, t = this, o = window.Oby,
        container = null, data = null, containerName = el.getAttribute('data-container-div');

        if(containerName)
            container = d.forms[containerName];

        if(!container)
            return false;

        var url = container.getAttribute('action');
        var scrollToTop = container.getAttribute('data-scroll');

        // delay timer to avoid too many ajax calls
        if(t.filterRefreshTimer !== false) clearTimeout(t.filterRefreshTimer);
        t.filterRefreshTimer = setTimeout(function() {

            data = o.getFormData(container);
            data += '&tmpl=raw';
            o.xRequest(url, {mode:'POST', data: data}, function(xhr) {
                var resp = o.evalJSON(xhr.responseText);

                if(resp.newURL) {
                    var urlInHistory = resp.newURL.replace('tmpl=raw&', '', 'g').replace('filter=1&', '', 'g').replace('&tmpl=raw', '', 'g').replace('&filter=1', '', 'g');
                    window.history.pushState(data, d.title, urlInHistory);

                    window.addEventListener('popstate', function(e) {
                        if(window.location.href.includes('hikashop_url_reload=1')) {
                            window.location.href.replace('&hikashop_url_reload=1','').reload();
                        }
                    });
                }

                var refreshAreas = document.querySelectorAll('.filter_refresh_div');

                var triggers = o.fireAjax('filters.update', {el: el, refreshAreas : refreshAreas, resp: resp});
                if(triggers !== false && triggers.length > 0)
                    return true;

                var refreshUrl = null;
                t.refreshCounter = 0;
                for(let i = 0; i < refreshAreas.length; i++) {
                    var currentArea = refreshAreas[i];
                    if(skipSelf && currentArea.querySelector('#'+el.id))
                        continue;

                    if(resp.newURL && currentArea.getAttribute('data-use-url')) {
                        refreshUrl = resp.newURL;
                    } else {
                        refreshUrl = currentArea.getAttribute('data-refresh-url');
                        if(resp.params) {
                            refreshUrl += '&' + resp.params + '&return_url=' + encodeURIComponent(window.location.href);
                        }
                    }
                    if(!refreshUrl)
                        continue;
                    t.refreshCounter++;
                    var className = currentArea.getAttribute('data-refresh-class');
                    if(className) o.addClass(currentArea, className);
                    t.refreshOneArea(refreshUrl, currentArea, el, refreshAreas, resp);
                }

                if(scrollToTop) {
                    window.hikashop.smoothScroll();
                }
            });
            t.filterRefreshTimer = false;
        }, 300);
        return false;
    }

Executing this function means for the accordion to collapse. Is there any way i can prevent this from happening?

so I have a csv File that looks something like this:

tokenId,address
0,0x3ec9c3cb29ed95a396a48a4fbdb6b8546d001d5a
1,0x3ec9c3cb29ed95a396a48a4fbdb6b8546d001d5a
2,0x3ec9c3cb29ed95a396a48a4fbdb6b8546d001d5a
3,0x3ec9c3cb29ed95a396a48a4fbdb6b8546d001d5a
4,0x3ec9c3cb29ed95a396a48a4fbdb6b8546d001d5a
0,0x7470ea065e50e3862cd9b8fb7c77712165da80e5
1,0x7470ea065e50e3862cd9b8fb7c77712165da80e5
2,0x7470ea065e50e3862cd9b8fb7c77712165da80e5
3,0x7470ea065e50e3862cd9b8fb7c77712165da80e5
4,0x7470ea065e50e3862cd9b8fb7c77712165da80e5

There is a variable that gets each of these values one by one as an object like this:

{tokenId: '0', address: '0x3ec9c3cb29ed95a396a48a4fbdb6b8546d001d5a'}

Now what I want is that after my task with this variable is done, I want to check the csv file for the matching value and remove just that row by appending it in the existing file. Will love your help. Thanks

I have a modal and I want to choose an image from this modal and when I click “ekle” button I want it to be shown in another div. I’m trying to do this with innerHTML but image src is undefined.
Is there a better way then innerHTML?
If there is no better way how can I fix this undefined problem.

function testFunction() {
    var imagesrc = document.getElementsByClassName("selected").src;
    document.getElementById("deneme").innerHTML = '<img src="' + imagesrc + '" >';
}

<div class="modal fade" id="hazirresim" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Kategori Hazır Resimleri</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="image" src="images/lol-1.jpg" class="selectable" height="250" width="250" style="padding-right: 3px;padding-bottom: 3px;">
                <input type="image" src="images/lol-1.jpg" class="selectable" height="250" width="250" style="padding-right: 3px;padding-bottom: 3px;">
                <input type="image" src="images/lol-1.jpg" class="selectable" height="250" width="250" style="padding-right: 3px;padding-bottom: 3px;">
                <input type="image" src="images/lol-1.jpg" class="selectable" height="250" width="250" style="padding-right: 3px;padding-bottom: 3px;">
                <input type="image" src="images/lol-1.jpg" class="selectable" height="250" width="250" style="padding-right: 3px;padding-bottom: 3px;">
                <input type="image" src="images/lol-1.jpg" class="selectable" height="250" width="250" style="padding-right: 3px;padding-bottom: 3px;">
            </div>
            <div class="modal-footer">
                <button onclick="testFunction();" type="button" class="btn btn-info btn-lg btn-block">EKLE</button>
            </div>
        </div>
    </div>
</div>

I’m currently creating a desktop app using electron, and what I would like to do is ensure that the app is automatically docked above all other applications/browsers when launched. (basically how the windows taskbar performs). Does anyone know if this is possible?

At the moment web browsers and apps sit behind the desktop app which makes it very inconvenient when users would like to close down/minimize other apps.

Below is the code I currently have:

function reasonsHorizontal() 
{
  sidebar = new BrowserWindow({height: 100, width:1300, titleBarStyle: 'none', frame:false, 
  resizable: false, backgroundColor: '#283243',  webPreferences: { nodeIntegration: true, 
  contextIsolation: false}})
  sidebar.loadFile('sidebar.html')
  sidebar.setPosition(0,100, true)
  sidebar.setMenuBarVisibility(false)
  sidebar.setAlwaysOnTop(true, 'floating') 

}

I have attempted to use some of the built in functions such as “moveTop() and setTopBrowserView()” but none of them work. What I’ve also noticed is that there aren’t many resources online for electron, which makes it even harder to figure out if this is even possible.

Does anyone know or have a solution for this? thanks.

I do all the stuff which I found on stackoverflow.. but it doesn´t work for me..

I will show you an example ..

I do this in my package.json in Frontend :

  "scripts": {
    "start": "set HTTPS=true && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

And that would be my userAction Login but it doesn´t work:

export const login = (userID, password) => async (dispatch) => {
  try {
    dispatch({ type: USER_LOGIN_REQUEST });

    const url = "https://localhost/authenticate/";
    const response = await axios.post(
      url,
      {
        withCredentials: true,
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      },
      {
        auth: {
          username: userID,
          password,
        },
      }
    );

    const config = {
      auth: {
        username: userID,
        password,
      },
    };

In my backend it would be this way and it works :

###
POST https://localhost:443/authenticate/
Authorization: Basic YWRtaW46MTIz

I’m using react-router version 6.2.1. My router is setup like so in a Routes component:

const routes = isLoggedIn => [
  {
    path: '/',
    element: isLoggedIn ? <DashboardLayout /> : <Navigate to={LOGIN} /> ,
    children: [
      // redirect to homepage on null route (e.g. localhost:3000 with no trailing '/')
      { path: '', element: <Navigate to = {HOME} /> },
      { path: HOME, element: <Home /> },
      { path: LIBRARY,
        element: <Library/>,
        children: [
          {
            path: ':itemId',
            element: <ItemView/>
          }
        ] 
      }
  }
]

export default function Routes(props) {
  const loginStatus = props.loginStatus === LOGGED_IN;
  const routing = useRoutes(routes(loginStatus));

  return (
    <>
      {routing}
    </>
  );
}

I would like to access the itemId param in the url from a component that is in the Library component which is a parent route to the itemId. If i call the useParams hook from that parent route I do not see the itemId param. Why is this the case? Am i using the wrong version of react-router? According to this github pr I believe parent routes should have access to all params:
https://github.com/remix-run/react-router/pull/7963

I have the following object keys and the key of each object is Description. I need the key to be Brand to be able to add the total Quantity of Brand. Prro I need to do it inside the Object.Key that I already have to be able to send the result of that sum to a table.

OBJECT

JAVASCRIPT

I’m searching about a React JS library or even Javascript to allow to users design their own flowchart to make some actions like this website tool

Flowchart example screenshot

Anyone can guide me 🙂

What im trying to do is to get only the source from the elastic search query in order to skip the processing on the javascript, so i could squize some more performance gains.Is it possible to do so?

So here is what i currenly do, i just get the data from the elastic search and iterate every one of those objects in order to construct an array that only contains the what’s inside of _source:

const { body } = await this.elsticSearchService.search<any>({
 index: this.configService.get('ELASTICSEARCH_INDEX'),
 body: {
 query: {
    match_all: {},
    },
    size: 10000,
  },
});

const hits = body.hits.hits;

return hits.map((item: any) => item._source);

So my question is, is there a way to only get the _source from the elastic search, in order
to skip the processing on the JavaScript?
So the object returned from the elastic search would look like this

[
0:{ "key": "value"}, // key,value from _source object
1:{ "key": "value"}, // key,value from _source object
2:{ "key": "value"}, // key,value from _source object
]

so without all of the other fields like hits, took etc…

I have two identical codes as start exactly the same in Google sheets. The time differ 6 hours between them. Can anyone explain it? And can I add 6 hours to the row rowData[1]….
(I’m in Sweden so GMT is +1)

function doGet(e) {

  Logger.log(JSON.stringify(e)); // view parameters

  var result = 'Ok'; // assume success

  if (e.parameter == 'undefined') {

    result = 'No parameters';
  } else {

    var sheet_id = '1GmZEd4skdjZCJUnS-vvIJQNqrAMJrvO0-Prh1vBpmVw'; // Spreadsheet ID 

    var sheet = SpreadsheetApp.openById(sheet_id).getActiveSheet(); // get Active sheet

    var newRow = sheet.getLastRow() + 1;

    var rowData = [];

    d = new Date();

    rowData[0] = d; // Timestamp in column A

    rowData[1] = d.toLocaleTimeString([], {
      hour: '2-digit',
      minute: '2-digit'
    }); // Timestamp in column B


    for (var param in e.parameter) {

      Logger.log('In for loop, param=' + param);

      var value = stripQuotes(e.parameter[param]);

Currently I have a list of options in the dropdown list and I want to remove selected value after it is selected.

Any idea? Sorry I am new to google sheets and still trying to learn

Dropdown list

For example I already selected Test 1 from the dropdown list and I do not want to appear again in the dropdown list

I want to clear the browser cache (chrome) with a reload button for the users to click it and reload the page. I tried

location.reload(true);

This works fine in Firefox. But not in chrome. I searched for this if its possible. A lot of people write that i need the change meta tags but this do not work for me. I want that the users cache the site and only if they hit the reloaded button it should clear the cache.

I do not use a serviceworker so this

Cache.delete()

could not help me.

If it doesnt work for chrome or other browsers this would help me too. Thanks!

I want to conditionally style a button.
If an array contains some value I want a button to be contained, otherwise outlined.

This code works fine:

let [selectedFilters, setFilter] = React.useState([]);

<Button className="quiz-button" variant={selectedFilters.includes('button1') ? 'contained' : 'outlined' }
                                    
>Button 1</Button>

But when I try to convert this button to a component a Type error occurs TypeError: filters.includes is not a function
Code with an error is below

FilterButton.propTypes = {
    filters: PropTypes.array,
    buttonId: PropTypes.string,
    filtersUpdate: PropTypes.func,
};

function FilterButton(filters, buttonId, filtersUpdate) {
    return (
        <Button variant={filters.includes(buttonId) ? 'contained' : 'outlined' }
        >Button 1</Button>
    )
}
export default function Quiz() {
   let [selectedFilters, setFilter] = React.useState([]);
   return (
      <FilterButton
          filters = {selectedFilters}
          buttonId = {'button2'}
          filtersUpdate = {setFilter}
      />
   )
}

Any help is massively appreciated 🙂

im having a little trouble getting an alert warning to show up on a page when the user inputs a string into a form that is less than some number of characters. The code is working except for actually displaying the error on the actual page. the main app.js has the following function to handle the input error

app.post('/register', 
  body('name').isLength({ min: 5 })
, (req, res)=> {
  const errors = validationResult(req)
  if(!errors.isEmpty()) {

      const alert = errors.array()

      app.get('/store', function(req, res){
        fs.readFile('items.json', function(error, data){
            if(error){
                res.status(500).end()
            }
            else {
                res.render('store.ejs', {
                    items: JSON.parse(data),
                    alert
                })
            }
        })
      })

      console.log('--> length error')
  }
})

The main app.js already has a (below) function to start the store page upon request also.

app.get('/store', function(req, res){ ...

in the store.ejs i have:

        <% if(typeof alert != 'undefined') { %>
            <% alert.forEach(function(error) { %>
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <%= error.msg %>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            <% }) %>
        <% } %>

By default (at least if you are using Expo) it seems that if you try to .get() something from Firestore with no internet connection, the data will be returned from cache, even if the local persistence is not implemented in the browser.

You can see this behavior on Expo, with the original firebase sdk, if you run this method without connection:

async function performSomeQuery(query, limit) {
  const querySnapshot = await query.limit(limit).get();

  if (querySnapshot.metadata.fromCache) {
    throw new Error("It is from cache!");
  }

  if (querySnapshot.empty) {
    return [];
  }

  const result = querySnapshot.docs.map(parseDoc);

  return result;
}

For me, this behavior is a little confusing… because if you try to enable the Firestore local persistence in your Expo app, you will get the error code: unimplemented

firebase.firestore().enablePersistence()
  .catch((err) => {
      console.log(err.code); // unimplemented for Expo
  });

How can I receive exceptions instead of “cached” data when the internet is not connected??