Category: javascript

I am learning JavaScript and I saw a video about creating tabs using HTML, CSS, and JavaScript. But I am not understanding how the code is working. This is a codepen of the code: Tabs Codepen by WebDevSimplified. To be more specific I am not understanding what the value of target will be in this line const target = document.querySelector(tab.dataset.tabTarget);. Is it taking the values #home, #pricing and #about from data-tab-target and applying the class active on the specific data-tab-content based on which data-tab-target the user clicks on?

I’m trying to make a post request to my webserver but only getting an internal server error. I’ve tested sending a post request to the server through a REST client, which works fine. What am I missing?

postCity(city: ICity, country: string): Observable<ICountry> {
    return this.http.post<ICountry>(this.url, city, {
      headers: new HttpHeaders({
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
      })
    });
 }

I’m working on a project using React-Native and the react-native-firebase librairy.

Within this project i’m trying to implement simple pagination with next and previous buttons.
I’m using startAfter() / limit() for the next one and endBefore() / limitTolast() for the previous one.

Here is my code

useEffect(() => {

        setCurrentPage(1)
        setViews([])
        setLoading(true)
        firestore()
        .collection('feed')
        .orderBy("creation", "desc")
        .limit(limit)
        .get()
        .then((snapshot) => {
                const data = snapshot.docs.map(doc => doc.data())
                const lastVisibleDoc = snapshot.docs[snapshot.docs.length - 1]
                const firstVisibleDoc = snapshot.docs[0]
                setViews(data)
                setLastVisible(lastVisibleDoc)
                setFirstVisible(firstVisibleDoc)
                setLoading(false)
        })
    }, [currentUserPreference])

This one part will get the first shot of data and works just fine.

const nextPage = () => {

        setCurrentPage(currentPage + 1)
      
          setLoading(true)
          scrollRef?.current?.scrollTo({y: 0, animated: true})
            firestore()
            .collection('feed')
            .orderBy("creation", "desc")
            .startAfter(lastVisible)
            .limit(limit)
            .get()
            .then((snapshot) => {
              const data = snapshot.docs.map((doc) => doc.data())
              const lastVisibleDoc = snapshot.docs[snapshot.docs.length - 1]
              const firstVisibleDoc = snapshot.docs[0]
              setViews(data)
              setLastVisible(lastVisibleDoc)
              setFirstVisible(firstVisibleDoc)
              console.log('fv', firstVisibleDoc)
          })
          console.log("more")
          setLoading(false)

This one is to get the next docs works as it should as well.

const lastPage = () => {

      setCurrentPage(currentPage - 1)
      
        setLoading(true)
        scrollRef?.current?.scrollTo({y: 0, animated: true})
        firestore()
        .collection('feed')
        .orderBy("creation", "desc")
        .endBefore(firstVisible)  
        .limitToLast(limit)
        .get()
        .then((snapshot) => {
          const data = snapshot.docs.map((doc) => doc.data())
          const lastVisibleDoc = snapshot.docs[snapshot.docs.length - 1]
          const firstVisibleDoc = snapshot.docs[0]
          console.log('ld', data)
          console.log('lvlp', lastVisibleDoc)
          console.log('lvlp', firstVisibleDoc)
          setViews(data)
          setLastVisible(lastVisibleDoc)        
          setFirstVisible(firstVisibleDoc)   
      })
      console.log("less")
      setLoading(false)

This is where the issue is located. My request seems to be off at some point because it doesn’t return me anything it doesn’t reach ‘then’ either as my state values doesn’t get updated and i don’t get the logs i placed in there.
It doesn’t give me any warnings or errors. As i keep track of the current page within a state it gets updated but that’s the only thing. Other than that nothing, it stays on the same page with the previous data displayed.

I don’t know where is the mistake, if you have any idea, i will take it.

Thanks for your help !

Created HTML form but when submit the form ata time by two defferent users its capturing incomplete data like few data showing as blank in first submit and second submit its caprturing all the informations. Need you assitence how to prevent this issues.

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
     
     
  function handleFormSubmit(formObject) {
 google.script.run.processForm(formObject);
 
     
   }
 
 
 
 
</script>

am using reactjs current version. I created my application using npx create-react-app appname. I have a scenario where the application doesn’t render component. From the ide am using which is visual studio code no error highlited and the same sametime can’t view any error from chrome developer console to help me debug the application. Anyone who knows how to go about such a case.

I am using Tabulator 4.6 and I have an api with POST method and I want to fetch tabulator data through POST request not GET.

When i tried it throws Ajax load error statusText: “Method Not Allowed”

Help me in this plzz.

I made a powerpoint presentation & converted it to HTML at https://www.idrsolutions.com/online-powerpoint-to-html5-converter
The output html page on the mentioned site looks perfect for me.
But after I downloaded zip and put the contents on my new site (Ubuntu & PHP7 fresh install) I don’t see the blue background.
My site is https://castaneda.su/DK/221023
I tried to make these steps for my another site https://alpin52.ru/221023 (preconfigured by host provider) and the look is as required.
I think the problem is that I missed installing some component on the server. But I cannot figure out which. Thanks.

in trying to create a page that will show the current time which will refresh every x seconds – x is a user input
i use setInterval and clearInterval but it looks like the clearInterval doesn’t have any effect at all 🙁
here’s the code:

 <script>
      let changeTime = () => {
        let secs = document.getElementById("sec").value * 1000;
        clearInterval(timer);
        let timer = setInterval(() => {
          let d = new Date();
          document.getElementById("example").innerHTML = d.toLocaleString();
          console.log(secs);
        }, secs);
      };

      function clear() {
        clearInterval(timer);
      }

      //both functions are called with an onChange event

thanks!

   <input type="checkbox"   id="confirm"> I have read and agree to this disclaimer as well as 
   <p class="d-none text-danger">Please read and agree to this disclaimer 
   above.</p>
   
   <button type="button" class="close" >Continue</button>

if does not checked checkbox then click on button the get error of p text and if checked the
checkbox then click on button then close popup

const [stuff, set_stuff] = useState("a")


...

set_stuff("a")

when set_stuff("a") is run, will it trigger downstream?

I am sending messages to users through Nodejs. If any message contains & symbol it is breaking the message.
E.g.
Terms & condition
and here is some other text

Users accepting only Terms. The rest of the messages were not sent.

My React app was working quite fine until I unknowingly included a commit that modified package.json.lock. Serving the application then threw up this error on the Cloud Run instance:

I’ve tried various was to unblock this problem all to no avail. I’ve even reverted to the commit that worked before this error and it still doesn’t serve properly.
What makes it even more surprising is that it works locally.
I’ll appreciate some help. Thanks.

It seems to kinda work, but it won’t load the picture

let element2 = document.getElementById("button3"); 
element2.addEventListener("click", () => {
let cat_result = document.getElementById("cat_result");
fetch('https://aws.random.cat/meow')
.then(res => res.json())
.then(data => {
cat_result.innerHTML = '<img src="${data.file}"/>'
    })

});

I have a Json let obj = {"a": "1", "b" : "2"} which contain whitespaces. I want to serialize the obj without removing the whitspaces, So that when i deserialize (EX: using JSON.parse()), i should be able to get the obj in same format.

let obj = {"a":   "1",  "b" :    "2"};
let serialized_obj = JSON.stringify(obj);
//then we get  serialized_obj  = "{"a":"1","b":"2"}" , this shouldn't happen.

What is Expected?

let obj = {"a":   "1",  "b" :    "2"};
let serialized_obj = serializationMethod(obj);
// expected to get serialized_obj  = "{"a":   "1",  "b" :    "2"}"
let deserialized_obj = deserializationMethod(serialized_obj);
//expected to get serialized_obj  = {"a":   "1",  "b" :    "2"}

Require the methods serializationMethod() and deserializationMethod()

More Details
For security reasons i get the JSON object and the digital signature of the serialized object. i have to verify the both. I can get these from any of the technology user. But the problem i faced is, in python serialization the json is beautified with whitespaces. So when i get them, i am not able to keep the format i got and verificaton fails.

I am using javascript fetch-api to read a random file from a folder.When two different clients need two different random files, (the random files should not be the same). How can I acheive this?