Category: javascript

I’m creating an interactive SVG map and I need the elements to all be accessible via keyboard navigation. I added an onkeydown attribute to the <g> tag and it calls a function that loads an unordered list related to the county on the map that is currently focused via tabindex="0". Everything works fine in Chrome and Edge, but it does not work in Firefox. I’m not sure what I’m missing. I’ve looked online and everything seems to indicate that it should work in Firefox.

const loadList = (item) => console.log(item);
function enterPress(event, item) {
  if (event.key == "Enter") {
    loadList(item);
  } else {}
}

<g id="county" tabindex="0" onkeydown="enterPress(event, 'Clarendon')" onclick="loadList('Clarendon')">
  <title>Clarendon</title>
  <path d="M 467.13 316.21 473.2 310.11 474.26 306.22 476.31 302.12 480.36 302.25 481.2 297.45 484.26 297.28 485.11 300.11 483.71 302.55 490.79 301.78 489.92 295.54 489.87 291.35 510.85 287.54 513.47 283.96 523.43 276.91 533.36 270.89 535.67 270.71 546.49 263.17 555.76 257.4 560.02 255.12 563.84 265.52 564.92 267.15 572.16 266.47 576.64 267.18 570.16 280.55 567.21 282.16 565.31 282.28 556.87 290.81 560.5 300.03 557.39 303.48 552.89 315.23 547.41 327.93 539.64 345.09 535.64 344.02 535.36 345.85 531.24 348.82 534.62 351.7 532.59 352.84 531.91 354.54 527.33 354.83 526.43 353.64 524.05 355.65 519.54 355.87 515.08 354.59 511.91 357.09 510.42 355.29 505.95 356.68 502.59 358.49 497.4 358.68 490.8 355.63 490.14 354.68 483.54 349.26 484.03 347.19 482.61 344.3 478.35 341.67 478.42 339.61 480.82 340.24 481.71 336.79 480.97 335.71 478.21 336.69 477.15 334.34 475.41 332.92 473.53 333.24 472.22 330.95 470.34 330.01 472.32 326.63 469.56 325.49 469.24 321.67 466.09 319.39 467.94 318.04 467.13 316.21 Z"
    id="Clarendon" fill="#b3c4db" />
  <text text-anchor="middle" x="100" y="500" font-family="Verdana" font-size="35" fill="blue" text-anchor="middle">Clarendon</text>
</g>

I’m struggling to find any resources for creating an issue in JetBrain’s Space docs.

This is what I’m working with, mostly from their API playground:

function createIssue(apiData) {
        const { url, auth, title, description, assignee, status, imageData, customFields } = apiData;
        window.fetch(`${url}`, {
            method: 'POST',
            headers: {
                Authorization: `Bearer ${auth}`,
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                title: `${title}`,
                description: `${description}`,
                assignee: `${assignee}`,
                status: `${status}`,
                attachments: [
                    // image data here?
                ],
                    customFields: [
                {
                    fieldId: `${customFields[0].fieldId}`,
                    value: {
                        className: `${customFields[0].value.className}`,
                    },
                },
            ],
        }),
    });
}

api.imageData is currently being initialized with .toBase68Image('image/png', 1)

Given that this a data url, how can I include this in my request as an attachment? Or is this an XY problem and there is a better approach to take?

how i may implement exactly as youtube searchbar

how i may implement exactly as youtube searchbar with search suggestion with debounce and onclick on a list item it will take the place on input and also it will be controlled with react.js. Please suggest me to solve this issue.

I was trying to lodash debounce but problem is, I couldn’t control the input value

const text = (e) => {
    setSearchedText(e.target.value);
    setSearchDropdown(true);
  };
  const debounceOnChange = debounce(text, 500);

<input
    type="text"
     name=""
    value={searchedText}
    onChange={debounceOnChange}           
    placeholder="Search for a player"
 />

I have a UIKit Slider that has a navigation button inside each of its 5 slider items. It works fine when you click to go to the 2nd slider up to the 5th slider. But when you click to go to the first slider, it slides back like a “previous” nav behavior instead of “next”. It’s an infinite slider so I’d like to force it to only navigate from right to left all the time.

My slider looks like this:

<div id="slider" class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
    <ul class="uk-slider-items uk-grid uk-grid-collapse">
        <li class="uk-width-auto" style="width: 30%">
            <div class="uk-panel">
                <div style="background-image:url('https://getuikit.com/docs/images/photo.jpg'); width: 100%; height: 400px;"></div>
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading 1</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                    <button class="uk-button uk-button-secondary slider-button" data-slide-index="0">Show</button>
                </div>
            </div>
        </li>
        <!-- Four more similar slider items here -->
    </ul>
</div>

And here’s my button navigation script (I use a custom button because I have other functions for it):

$(".slider-button").click(function() {
    var slideIndex = $(this).data("slide-index");
    UIkit.slider("#slider").show(slideIndex);
});

Here’s a codepen to demo it better.

I’m trying to web scrap things to do in Cartagena, Colombia from trip advisor using puppeteer in javascript.

https://www.tripadvisor.com/Attractions-g297476-Activities-c42-Cartagena_Cartagena_District_Bolivar_Department.html

I want to grab the title of each listing, the links, the photos and the descriptions. However, I’m still stuck on trying to retreieve the listing titles. I’m not sure if I inputing the wrong data or what, but I need help fixing my code, please. Also, I know there’s an trip adisor api. I don’t want to use that so don’t suggest that to me. I want to create my own scrapper, thank you.

Here’s my javascript
my code

Here’s the error message I keep getting.
error message

I want to web scrap the title of each listing, the links, the photos and the descriptions.

How can I get an custom image button to work like an on off button in Javascript?

Here is some of my code:

f.onclick = function (e) {
    if (e) {
        o.setAttribute('style', 'transform:rotate(45deg)')
    }
    if (e == false) {
        o.setAttribute('style', 'transform:rotate(0deg)')
    }
}

The first part of it works (rotate to 45 degrees) but the second part is what I am having trouble with… any ideas?

Here I am unable to click the button and open the dialog box once it has already been opened and to do so I need to go back and return or refresh the page. Initially the dialog box didn’t open after it has been opened once, I tried and debugged and not it is working ok for 2 times but the user is unable to change the location (via opening the dialog box) as many times as they want.
For the reference I am posting two code snippets HomeLocation/index.js and HomeLocationDialog/index.js

here is the code for HomeLocation/index.js

function HomeLocation({ onHomeLocationUpdated }) {

  const [selectedLocation, updateLocation] = useState();
  const [showDialog, setShowDialog] = useState(false);
  const [progressBar, setProgressBar] = useState(true);
  const [errorComponent, showErrorComponent] = useState(false);
  const [shouldResetDialog, setShouldResetDialog] = useState(false);

  useEffect(() => {
    fetchHomeLocation();
  }, []);

  useEffect(() => {
    onHomeLocationUpdated(selectedLocation);
  }, [selectedLocation]);

  const fetchHomeLocation = async () => {
    setProgressBar(true);
    showErrorComponent(false);
    ShippingData.getShippingHomeLocation().then((data) => {
      updateLocation(data);
    }).catch(() => {
      showErrorComponent(true);
    }).then(() => {
      setProgressBar(false)
    });
  }

  const openDialog = () => {
    setShowDialog(true)
    setShouldResetDialog(true)
  }

  const closeDialog = () => {
    setShowDialog(false)
  }

  return <div className='shippingItemContainer shippingHomeCityContainer' onClick={openDialog}>
    <CustomLabel value={'Home city'} />
    {
      progressBar ? <CircularProgress size={24} color="primary" style={{ marginTop: '8px' }} /> :
        errorComponent ? <CustomErrorComponent onRetryClick={fetchHomeLocation} /> : <div className='updateCityContainer'>
          {(selectedLocation || {}).name && <span className='city'>{selectedLocation.name}</span>}
          <ChangeText text={isNil((selectedLocation || {}).name) ? 'Select' : 'Change'} onClick={openDialog} />
        </div>
    }
    {showDialog && <HomeLocationDialog
      showDialog={shouldResetDialog}
      onClose={closeDialog}
      onSuccess={(location) => {
        updateLocation(location);
        setShouldResetDialog(false);
      }}
    />}
  </div>
}

export default withRouter(HomeLocation);

HomeLocationDialog/index.js

export default function ({ showDialog, onClose, onSuccess }) {

    const noResultTextWhenCharLessThanThree = 'Type full city name';
    const noResultText = 'No results found.';

    const [cities, setCities] = useState([]);
    const [updatedLocation, setUpdatedLocation] = useState(null);

    const [progressBar, setProgressBar] = useState(false);
    const [loadingData, setLoadingData] = useState(false);

    const [closeDialog, setCloseDialog] = useState(false);
    const [errorMessage, setErrorMessage] = useState(null);
    const [noOptionText, setNoOptionText] = useState(noResultTextWhenCharLessThanThree);
    const [shouldResetDialog, setShouldResetDialog] = useState(false); 

    useEffect(() => {
        if (showDialog && shouldResetDialog) {
          setShouldResetDialog(false);
        }
      }, [showDialog,shouldResetDialog]);

    const handleHomeLocationChange = (event, values) => {
        setUpdatedLocation(values);
    };

    const fetchCities = async (e) => {
        const content = (e.target.value).trim();
        if (!isNil(content) && content.length > 2) {
            setErrorMessage(null);
            setLoadingData(true);
            ShippingData.getAllCities(e.target.value).then((allCities) => {
                const sortedCities = sortBy(allCities, o => o.name);
                if (sortedCities.length === 0) {
                    setNoOptionText(noResultText);
                }
                setCities(sortedCities);
            }).catch((err) => {
                onApiFailure(err)
            }).then(() => {
                setLoadingData(false)
            });
        } else {
            setNoOptionText(noResultTextWhenCharLessThanThree);
            setCities([]);
        }
    }

    const updateHomeCity = async () => {
        setProgressBar(true);
        setErrorMessage(null);
        setUpdatedLocation(updatedLocation);
        ShippingData.updateShippingHomeLocation({ cityId: updatedLocation.cityId }).then(() => {
            CacheRequest.deleteCacheForKeys([CacheKeys.shippingZonesCacheKey]);
            onApiSuccess();
            setShouldResetDialog(true);
        }).catch((err) => {
            onApiFailure(err)
        }).then(() => {
            setProgressBar(false)
        });
    }

    const onApiSuccess = () => {
        setCloseDialog(true);
        onSuccess(updatedLocation);
    }

    const onApiFailure = (error) => {
        setErrorMessage(error);
    }

    return showDialog && <DialogBox
        type={"simple"}
        dialogId={'#select-city'}
        show={showDialog}
        width={300}
        primaryBtnText={'SAVE'}
        onSuccess={updateHomeCity}
        onClose={onClose}
        disabledPrimaryButton={isNil(updatedLocation)}
        showProgressBar={progressBar}
        closeDialog={closeDialog}
    >
        <Fragment>
            <div className='cityDialogContent'>
                <p className='dialogTitle'>Select city</p>
                <Autocomplete
                    loading={loadingData}
                    noOptionsText={noOptionText}
                    onChange={handleHomeLocationChange}
                    id="autocomplete-city-select"
                    options={cities}
                    getOptionLabel={(option) => option.name + ', ' + option.state}
                    renderInput={(params) => <TextField 
                        onChange={fetchCities} 
                        autoFocus {...params} 
                        placeholder={'Type atleast 3 characters'} 
                        margin="normal"
                        InputProps={{
                            ...params.InputProps,
                            endAdornment: (
                              <React.Fragment>
                                {loadingData ? <CircularProgress color="inherit" size={18} /> : null}
                                {params.InputProps.endAdornment}
                              </React.Fragment>
                            ),
                          }} />}
                />
                {errorMessage && <CustomErrorComponent errorMessage={errorMessage} />}
            </div>
        </Fragment>
    </DialogBox>
}

I almost tried to debug it for not less than 10 hours but couldn’t solve it, thanks in advance. point out the logical error and help me solve this.

I have a csv file where i have complete detail for upcoming posts upto 5000, They real question is: Is there any automation tool for blogger where it post my blogs because it will take me years to do manually?

I want an expert to solve my blogger API issue

Mohon bantuannya, saya telah membuat codingan untuk export data dalam bentuk pdf menggunakan php. Namun hasil yang saya peroleh masih dalam bentuk teks, dan saya ingin mengubah hasil export tersebut dalam bentuk tabel. Apakah ada solusinya?enter image description here enter image description here
Terima kasih..

Mohon bantuannya, saya telah membuat codingan untuk export data dalam bentuk pdf menggunakan php. Namun hasil yang saya peroleh masih dalam bentuk teks, dan saya ingin mengubah hasil export tersebut dalam bentuk tabel. Apakah ada solusinya?

enter image description here

https://play.google.com/store/apps/details?id=com.android.alive

How can find it bug report please someday error this application

I want a bug report in this application please help and now at least for bug report in this msg please confirm enter image description here

For bug analysis report EOD Please help me

• I tried to use window.open(‘url’, ‘_blank’) with setTimeout() and window.onload() to set the new tab title, but it is not wordked very well, and the new tab will be blocked by some user’s browser. So, i tried another way that clicking the ‘a’ tag to open my new tab, but i can not set the tab title now.
• Then i tried the way that add a ‘iframe’ tag , it seemed useful , but it also need using window.open() that maybe blocked by user’s brower.
• I want to name the new tab title with a ‘file name’ because of the new tab will load the file stream.

            // create the url for blob
            // let pdfUrl = URL.createObjectURL(blob);
            // preview the file with new tab
            // let newTabTitle = gDocName + " - " + gDocSubPath;
            // let win = window.open(pdfUrl, '_blank'); 
            // win.document.title = newTabTitle;

            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.target = '_blank';
            link.rel = 'noopener noreferrer';
            link.click();
            window.URL.revokeObjectURL(link.href);
            link.remove();

To find a stable and effective solution to set the new tab title…

in this code when I am passing a value using an on the openModal function but when I am passing string and an int it shows an error “time.php:1 Uncaught SyntaxError: missing ) after argument list” but when I am using response[i].event_id for the second value that I will pass to the openModal it will be doing just fine.

here’s my code:

eventsList += '<li>' + response[i].event_name + ' <span class="delete-button" onclick="deleteEvent(' + response[i].event_id + ')">Delete</span> <span class="delete-button" onclick="openModal(' + response[i].event_id + ',' + response[i].event_name +')">Edit</span></li>';

function:

function openModal(value1, value2) {
var modal = $("#myModal");
modal.css("display", "block");

var input = document.getElementById('eventId');
input.value = value1;

var input2 = document.getElementById('eventName');
input2.value = value2;
}

I have a Legacy system using DES Encryption and Decryption.
Encryption code as below, I want to write appropriate JavaScript code for decrypting the C# encrypted code.

   public string EncryptData(string strData, string strKey)  
   {  
      byte[] key = { }; //Encryption Key  
      byte[] IV = { 10, 20, 30, 40, 50, 60, 70, 80 };  
      byte[] inputByteArray;

    try  
    {  
        key = Encoding.UTF8.GetBytes(strKey);  
        // DESCryptoServiceProvider is a cryptography class defind in c#.  
        DESCryptoServiceProvider ObjDES = new DESCryptoServiceProvider();  
        inputByteArray = Encoding.UTF8.GetBytes(strData);  
        MemoryStream Objmst = new MemoryStream();  
        CryptoStream Objcs = new CryptoStream(Objmst, ObjDES.CreateEncryptor(key, IV),           CryptoStreamMode.Write);  
        Objcs.Write(inputByteArray, 0, inputByteArray.Length);  
        Objcs.FlushFinalBlock();  

       return Convert.ToBase64String(Objmst.ToArray());//encrypted string  
    }  
    catch (System.Exception ex)  
    {  
       throw ex;  
    }  
}   


     public string DecryptData(string strData, string strKey)  
     {  
     byte[] key = { };// Key  
     byte[] IV = { 10, 20, 30, 40, 50, 60, 70, 80 };  
     byte[] inputByteArray = new byte[strData.Length];

    try  
    {  
        key = Encoding.UTF8.GetBytes(strKey);  
        DESCryptoServiceProvider ObjDES = new DESCryptoServiceProvider();  
        inputByteArray = Convert.FromBase64String(strData);  

        MemoryStream Objmst = new MemoryStream();  
        CryptoStream Objcs = new CryptoStream(Objmst, ObjDES.CreateDecryptor(key, IV), CryptoStreamMode.Write);  
        Objcs.Write(inputByteArray, 0, inputByteArray.Length);  
        Objcs.FlushFinalBlock();  

        Encoding encoding = Encoding.UTF8;  
        return encoding.GetString(Objmst.ToArray());  
    }  
    catch (System.Exception ex)  
    {  
        throw ex;  
    }  
}   

Tried writing below JavaScript code to decrypt. But outputs as empty string.

  var key = '!#$a54?3'
  var ciphertextB64url = 'zcQeSzEKYEc%ed'
  var ciphertextB64 = toBase64(ciphertextB64url);

  var keyUtf8 = CryptoJS.enc.Utf8.parse(key)
  var sha1KeyVal = CryptoJS.SHA1(keyUtf8)
  var keyDES = CryptoJS.lib.WordArray.create(sha1KeyVal.words.slice(0, 8 / 4));

  var bytes  = CryptoJS.DES.decrypt(ciphertextB64, keyDES, { iv: keyDES });
  var originalText = bytes.toString(CryptoJS.enc.Utf8);
  console.log('Message: ', originalText); // Message:  The quick brown fox jumps...

 function toBase64(b64url){
   var b64withoutPadding = b64url.substring(0, b64url.length - 1).replace(/-/g, '+').replace(/_/g, '/')
  var numberPaddingBytes = parseInt(b64url.substring(b64url.length - 1))
  var b64 = b64withoutPadding.padEnd(b64withoutPadding.length + numberPaddingBytes, '=');
  return b64
 }

Can someone please help to understand how this can be achieved using CryptoJS npm

I’m trying to call commitStyles() after an animation is complete so that the styles are retained at the end (by adding to the inline styles) in a way that is performant. However, nothing seems to happen from calling commitStyles, the element just returns to its initial styles after the animation.

document.querySelector("button").addEventListener("click", function(evt) {
  var a = document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], 1000);
  a.finished.then(() => a.commitStyles());
});

<div id="target">I can move</div>
<button>Move it</button>

Good morning, I have the following curl from the picwish.com website.

curl -k 'https://techhk.aoscdn.com/api/tasks/visual/segmentation' -H 'X-API-KEY: {YOUR_API_KEY}' -F 'sync=1' -F 'image_file=@/path/to/image.jpg'

This web is to remove the background of an image, the problem is that the API they have does not allow to load multiple images, only one image, one image, one response.

Is it possible to make a development in javascript, node.js or php where I can get multiple responses and thus be able to load multiple images? has anyone done something similar to help me?