Category: javascript

Category Added in a WPeMatico Campaign

How can I create button by using FTD? FTD is created by FifthTry – https://ftd.dev

While using FTD a new front-end language created by Fifthtry(https://www.fifthtry.com). Its easy to use for its non-technical users. Even if you don’t have any prior knowledge of html, css1 OR JavaScript you can write magical code.

Even they have collection of icons, which can be used inside button and you can create button with icons. Octicons in FTD

Package Name: https://fifthtry.github.io/button/

e.g.

  1. Primary Button
-- button: PRIMARY
role: primary
large: true
  1. Secondary Button
-- button: SECONDARY
role: secondary
large: true
  1. Button with icon
-- button: BUTTON
role: primary
large: true
icon-left: true
icon: icon.info:

Buttons created by using FTD language

FTD buttons with icon

How to define overlayMode for easyMDE?

I’ve tried to define custom mode for highlight custom markdown syntax with easyMDE like this:

CodeMirror.defineMode("mymode", function () {
  return {
    token: function (stream, state) {
      if (stream.match("aaa")) {
        return "style1";
      } else if (stream.match("bbb")) {
        return "style2";
      } else {
        stream.next();
        return null;
      }
    },
  };
});

window.easyMDE = new EasyMDE({
  element: $('#textarea')[0],
  parsingConfig: {
    allowAtxHeaderWithoutSpace: true,
  },
  overlayMode: {
    mode: CodeMirror.modes.mymode(),
    combine: true,
  },
});

Actually, CodeMirror don’t return mymode by CodeMirror.getMode('mymode') so may be there mistake in declaration by CodeMirror.defineMode in my code.

How to show and hide loader while using fetch in JavaScript?

I’m using JavaScript Fetch to access an API and I want to show a loader while the fetch is in progress. I’m using the following code…

      async function fetchStates() {
            showLoader();
            await fetch('https://localhost:7123/locations/states?token=@{@HttpContext.Session.GetString("sessionToken")}')
            .then(response => response.json())
            .then(states => {
                for (let i = 0;i < states.length;i++){
                    let option = document.createElement('option');
                    option.text = states[i].name;
                    option.value = states[i].id;
                    ddlCAStates.appendChild(option)
                }
                /*hideLoader(1);
                scrollToTop(1);*/
            })
            .catch(error => {
                divErrors.style.display = "block";
                let errorName = GetHttpErrorName(error.toString());
    
                txtErrors.textContent = 'The server responded with error: ' + error + ' ' + errorName;
                /*hideLoader(2);
                scrollToTop(2);*/
            })
            .finally(() => {
                hideLoader();
                scrollToTop();
            });
        }

    function showLoader() {
        document.getElementById('loader').style.display = 'block';
    }

    function hideLoader() {
        document.getElementById('loader').style.display = 'none';
    }

    function scrollToTop() {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    }

The loader displays for a split second and then hides way before the fetch is completed. The loader should be visible until either the fetch successfully loads data or it fails for any reason. What I’m doing wrong here?

Failed to traverse DOM while rendered inside iframe with section tags

I facing a situation which i can’t traverse the dom inside iframe. My code is as follows. When i am trying to accessing childNodes of body tag, console will show there are no childNodes inside the body tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <iframe id="container"
        src="./resources/c07.xhtml"
        frameborder="0"></iframe>
    <style>
        #container {
            width: 100%;
            height: 800px;
        }
    </style>
    <script src="index.js"></script>
</body>
</html>

c07.xhtml

<!DOCTYPE html>
<html>
<body>

<h1>The section element</h1>

<section>
  <h2>History</h2>
  <p>The World Wide Fund for Nature (WWF)</p>
</section>

<section>
  <h2>Symbol</h2>
  <p>The Panda has become the symbol of WWF.</p>
</section>

</body>
</html>

//index.js

const parentNode = document.querySelector("#container");
const iframeBody =  iframeRef(parentNode);
console.log(element.childNodes[0].getElementsByTagName('section')); //prints HTMLCollection[] and length is 0

function iframeRef( frameRef ) {
    return frameRef.contentWindow
        ? frameRef.contentWindow.document
        : frameRef.contentDocument
}

How can i resolve this?

How to make smooth animation?

I want to make smooth animation of appearing and disappearing a block of text. It appears smoothly but disappears very fast. How can I make it smooth?

Here is the CSS code:

.question-header > * {
  margin-bottom: 15px;
}

.question-header > * {
  margin-top: 20px;
}
.question-header {
  position: relative;
  border-bottom: 1px solid #e0e0e0;
}

.question-header.add-padding {
  padding-bottom: 30px;
}

.add-padding {
  padding-bottom: 30px;
}

.question-header h3 {
  width: 701px;

  font-weight: 600;
  font-size: 25px;
  line-height: 130%;
  color: #101828;
}

.plus-sign {
  position: absolute;
  right: 0;
  top: -20px;
  cursor: pointer;
}

.answer-to-questions.display {
  max-width: 630px;
  position: sticky;
  opacity: 1;
  transform: translateY(5%);
}

.answer-to-questions {
  position: absolute;
  opacity: 0;
  transform: translateY(-20%);
  transition: all 0.2s ease-in;
}
const answer = document.querySelector(".answer-to-questions");

const plusSign = document.querySelector(".plus-sign");

const questionHeader = document.querySelector(".question-header");

// plusSign.forEach((item)=>{

//     // item.addEventListener('click',()=>{
//     //     answer.classList.toggle('display');
//     // })

// })

plusSign.addEventListener("click", () => {
  answer.classList.toggle("display");
  questionHeader.classList.add("add-padding");

  if (answer.classList.contains("display")) {
    plusSign.src = "../images/plus-close.svg";
  } else {
    plusSign.src = "../images/plus.svg";
    questionHeader.classList.remove("add-padding");
  }
});

And my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="question-header">
      <h3>Have you built an App similar to mine?</h3>
      <img class="plus-sign" src="./images/plus.svg" alt="" srcset="" />

      <div class="answer-to-questions">
        <p>
          Since 2010, we've successfully implemented 160+ projects for
          industries like E-Commerce, the Internet of Things, Digital music
          distribution, E-Learning, and many more. Since 2010, we've
          successfully implemented 160+ projects for industries like E-Commerce,
          the Internet of Things, Digital music distribution, E-Learning, and
          many more.
        </p>
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

Here is the link to code sandbox https://codesandbox.io/s/cocky-monad-se1m22?file=/index.html:0-1010 .

Hopefully, I made this clear. Thank you everyone in advance!

get Firebase database

I am trying to get and show my data from the firebase database to the HTML page in a table form, but no output showing. I attached a screenshot of my database below. I have been trying for like days and can’t solve it. Can someone help me to point out what my problem is? For security purposes, I erased the details of my firebase configuration there.

    <body>

        <table>
            <thead>
                <th>Sno</th>
                <th>First Name</th>
                <th>Second Name</th>
                <th>Email</th>
                <th>LastLogin</th>
                <th>Confirm Password</th>

            </thead>
            <tbody id="tbody1">
        
            </tbody>
        </table>
        <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
        <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js"></script>

        <script id="MainScript">

                    var firebaseConfig = {
                    apiKey: "",
                    authDomain: "",
                    projectId: "",
                    storageBucket: "",
                    messagingSenderId: "",
                    appId: "",
                    measurementId: ""
                    };

                    firebase.initializeApp(firebaseConfig);

        
//---------------------GET ALL DATA-------------------------------//

        function SelectAllData(){
            firebase.database().ref('admins').once('value',
            function(AllRecords){
                AllRecords.forEach(
                    function(CurrentRecord){
                        var firstName = CurrentRecord.val().first_name;
                        var secondName = CurrentRecord.val().second_name;
                        var  email= CurrentRecord.val().email;
                        var lastLogin = CurrentRecord.val().last_login;
                        var conpassword = CurrentRecord.val().confirm_password;
                        AddItemsToTable(firstName,secondName,email,lastLogin,conpassword);
                    }
                );
            });
        }

        window.onload = SelectAllData;
//------------------filling the table-------------------//
        var stdNo = 0;
        function AddItemsToTable(firstName,secondName,email,lastLogin,conpassword){
            var tbody = document.getElementById('tbody1');
            var trow = document.createElementById('tr');
            var td1 = document.createElementById('td');
            var td2 = document.createElementById('td');
            var td3 = document.createElementById('td');
            var td4 = document.createElementById('td');
            var td5 = document.createElementById('td');
            var td6 = document.createElementById('td');

            td1.innerHTML= ++stdNo;
            td2.innerHTML= firstName;
            td3.innerHTML= secondName;
            td4.innerHTML= email;
            td5.innerHTML= lastLogin;
            td6.innerHTML= conpassword;

            trow.appendChild(td1); 
            trow.appendChild(td2); 
            trow.appendChild(td3); 
            trow.appendChild(td4); 
            trow.appendChild(td5);
            trow.appendChild(td6);
            


            tbody.appendChild(trow);
            
        }

    </script>
    </body>

enter image description here

The way I pushed the data into database

// Set up our register function
  function register () {
    // Get all our input fields
    email = document.getElementById('email').value
    password = document.getElementById('password').value
    first_name = document.getElementById('first_name').value
    second_name = document.getElementById('second_name').value
    confirm_password = document.getElementById('confirm_password').value
  
    // Validate input fields
    if (validate_email(email) == false || validate_password(password) == false) {
      alert('Email or Password is Outta Line!!')
      return
      // Don't continue running the code
    }
    if (validate_field(first_name) == false || validate_field(second_name) == false || validate_field(confirm_password) == false) {
      alert('One or More Extra Fields is Outta Line!!')
      return
    }
   
    // Move on with Auth
    auth.createUserWithEmailAndPassword(email, password)
    .then(function() {
      // Declare admin variable
      var user = auth.currentUser
  
      // Add this admin to Firebase Database
      var database_ref = database.ref()
  
      // Create Admin data
      var user_data = {
        email : email,
        first_name : first_name,
        second_name : second_name,
        confirm_password : confirm_password,
        last_login : Date.now()
      }
  
      // Push to Firebase Database
      database_ref.child('admins/' + user.uid).set(user_data)
  
      // DOne
      alert('Admin Account Created!!')
      window.location = "login.html";
      
    })
    .catch(function(error) {
      // Firebase will use this to alert of its errors
      var error_code = error.code
      var error_message = error.message
  
      alert(error_message)
    });

}

Why is the background color of my MUI TextField changing after I enter data and how do I prevent that?

I have a TextField inside a FormControl inside a Styled Control (Paper) that looks like this:

const StyledPaper = styled(Paper)(({ theme }) => ({
  backgroundColor: "#99d6ff",
  width: '90%',
  justify: 'center',
  textAlign: 'center'
}));
...
<StyledPaper square={false} >
  <FormControl variant="filled" fullWidth>
    <TextField
      id="loginInput"
      label="Login"
      InputLabelProps={{ shrink: true }}
      value={login}
      onChange={() => handleInputChange("loginInput")} />
  </FormControl>
</StyledPaper>

The problem I’m having here is that when you select the TextField and fill it with an autocomplete, the background changes to white (the color of the autocomplete background). If I just type and don’t use the autocomplete the background remains as I intended from the StyledPaper. How can I prevent the background color change?

Using spread operator to update dictionary value which is an object array

I am trying to save an API payload to a dictionary. The API data model has the attributes “category”, “id” and “name”.

let apiPayload = [];

(async () => {
  let fetchValue = await
  fetch('https://asia-southeast1-citric-pager-319712.cloudfunctions.net/gcp-simple-api').then(response => {
    if (response.ok) {
      return response.json();
    }
    throw response;
  }).then(data => {
    return data;
  }).catch(error => console.log(error));

  console.log('fetchValue', fetchValue);

  let dictionary = Object.assign({}, ...fetchValue.map((x) => ({
    [x.category]: [x]
  })));
  console.log('dictionary', dictionary);
})();

How do I append new category object in my dictionary so that it is sorted by category with category objects, e.g.

HTML: [{
  category: "HTML",
  id: "blog-post",
  name: "Blog Post"
}, {...}, {...}],
JavaScript: [{
  category: "JavaScript",
  id: "curry",
  name: "Curry"}, {...}, {...}]

jQuery Ajax Response works only once until page refresh

this is simple subscriber form submit with jQuery Ajax, everything is working fine but alert response show only one time until page refresh.

Please Help me how to fix it.

Here is my view code

$(document).ready(function () {

$(“#ssubmit”).click(function (e) {
e.preventDefault();

let subscriber = $("#subscriber").val()

subscriberdata = {subscriber: subscriber,}

$.ajax({
  type: "POST",
  url: "form-process.php",
  data: JSON.stringify(subscriberdata),
  success: function (response) {

    subscribersucess = "<div class='alert alert-success text-center mt-3'>" + response + "</div>";
    $("#alerts").html(subscribersucess);

    setTimeout(function(){
      $('#alerts').fadeOut("slow");
    },5000)

    $("#subscriberform")[0].reset();

  }

});

})

});

How to re-enable disabled dropdowns disabled by selecting value from the initial dropdown

GOAL: Create a script that disables other dropdown select lists using the same class (“selectClass”) if an item is selected from one of the dropdowns selects. Or, if the item is unselected, then all dropdown selects became selectable again to allow for people who change their minds/didn’t understand at first what would happen.

The goal is to allow a user to only be able to select one item (total) from X amount of lists possible – you can have apples, or oranges, or pairs, but you can only have one type of fruit (for this example)

PROBLEM: I am unable to get the list to be selectable again after a selection has been made even if the default no value option is selected.

EFFORTS: I’ve put a few hours into this script and have gotten as far as I can it seems. I’ve looked through Stack, Googled, and searched other forums and bulletin boards, and Reddit. I’ve found some things I hoped would help me reach my goal, but I wasn’t able to understand them due to my newb-ness, or they weren’t applicable enough to help me reach my goal. I have run the script through javascript validators to make sure I’ve got the syntax correct, etc. I’ve managed to get pretty far towards my goal (goal was just deactivating the other dropdowns), but I’d like to make the user experience top-notch, and to me that means allowing for a sure to change their mind without needing to reload a page and lose all their unsubmitted data.

THE ASK: I am hoping for help and guidance to make everything re-selectable again by unselecting the selected item from the list that disabled the other dropdown selects; The lists will be generated dynamically.

THE CODE:

<select class="selectClass">
    <option  value="">Apples</option>
    <option value="1">1 Apple</option>
    <option value="2">2 Apple</option>
    <option value="3">3 Apple</option>
</select>
<select class="selectClass">
    <option  value="">Oranges</option>
    <option value="1">1 Orange</option>
    <option value="2">2 Orange</option>
    <option value="3">3 Orange</option>
</select>
<select class="selectClass">
    <option value="" >Pears</option>
    <option value="1">1 Pears</option>
    <option value="2">2 Pears</option>
    <option value="3">3 Pears</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function () {
        $(".selectClass").on('change', function () {
            $(".selectClass").not($(this)).prop("disabled", "disabled")
        })
    })
</script>

Dropdown cell usage

I was hoping some example of how to use dropdown cell, because currently the select wont open if I click on it, It does not make sense for open/close behaviour be controlled from the outside. I am using this @silevis/reactgrid library to create my datasheet/spreadsheet

This is how I create my rows

const rows = useMemo<Row<DefaultCellTypes | AutocompleteCell>[]>(() => {
    const headerRow: Row = {
      rowId: "header",
      cells: [
        { type: "header", text: "Display Name" },
        { type: "header", text: "Reports To" },
        { type: "header", text: "Job Title" }
      ]
    };
    return [
      headerRow,
      ...members.map<Row[]>((member, idx) => ({
        rowId: idx,
        cells: [
          { type: "text", text: member.display_name || "-" },
          {
            type: "dropdown",
            values: members
              .filter(inner => inner.parent_id !== member.id)
              .map(inner => ({ label: inner.display_name, value: inner.id })),
            selectedValue: member.parent_id || "-"
          },
          { type: "text", text: member.job_title || "-" }
        ]
      }))
    ];
  }, [members]);

Fetch API .then() doesn’t get element innerHTML in time to write to it. Inconsistent behavior [duplicate]

I have several HTML file I am dynamically inserting into the DOM with JS. However, all 3 work 50% while 1, 2 or all three randomly fail with a “TypeError: Cannot set properties of null (setting ‘innerHTML’)”.

Ideas?

loadComponent("targetDiv1","htmlFile1.html)
loadComponent("targetDiv2","htmlFile2.html)
loadComponent("targetDiv3","htmlFile3.html)

function loadComponent(targetElementID, htmlFile) {
    fetch(htmlFile)
        .then((response) => {
            return response.text();
        })
        .then((response) => {
            document.querySelector("#" + targetElementID).innerHTML = response;
            return response;
        })
        .catch((error) => {
            console.log(error, targetElementID, htmlFile);
        });
}

It acts as if the target div ID is not retrieved in time to write the html contents to it.