Tips for identifying the category of a hyperlink within my javascript code?

Hello, I am currently working on a script that involves AJAX functionality:

function ajax(){
    if (navigator.standalone) return;
    for (var i= document.links.length; i-->0;) {
        document.links[i].onclick= function() {
            var req= new XMLHttpRequest();
            req.onreadystatechange= function() {
                if (this.readyState!==4) return;
                document.body.innerHTML= this.responseText;
                ajax();
            };
            req.open('GET', this.href, true);
            req.send();
            return false;
        };}
    }



window.onload= function() {
    window.scrollTo(0, 0.9);
    ajax();

};

Now, I have a requirement to add a condition where if a link has a class named "noeffect", the AJAX execution should be skipped, and another page should load instead. I attempted to implement this feature but encountered challenges due to my limited understanding of JavaScript:

function ajax(){
    if (navigator.standalone) return;
    for (var i= document.links.length; i-->0;) {
        if (document.links[i].getAttribute("class") == "noeffect") return;
        document.links[i].onclick= function() {
            var req= new XMLHttpRequest();
            req.onreadystatechange= function() {
                if (this.readyState!==4) return;
                document.body.innerHTML= this.responseText;
                ajax();
            };
            req.open('GET', this.href, true);
            req.send();
            return false;
        };}
    }



window.onload= function() {
    window.scrollTo(0, 0.9);
    ajax();

};

I understand that the code may not be correctly checking each link individually, and I'm seeking guidance on how to modify it appropriately.

Answer №1

Finally figured it out!

function ajax(){
    if (navigator.standalone) return;
    for (var i= document.links.length; i-->0;) {
        document.links[i].onclick= function() {
            if(this.getAttribute("class") == "noeffect") return;
            var req= new XMLHttpRequest();
            req.onreadystatechange= function() {
                if (this.readyState!==4) return;
                document.body.innerHTML= this.responseText;
                ajax();
            };
            req.open('GET', this.href, true);
            req.send();
            return false;
        };}
    }



window.onload= function() {
    window.scrollTo(0, 1.0);
    ajax();

};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Design an interactive quarter-circle using CSS styling

My goal is to create this element using CSS, however, the content inside needs to be dynamic. I initially attempted to use border-radius, but realized it is unable to achieve the desired outcome. If anyone has a solution or can offer assistance, I would g ...

What is the best way to execute a JavaScript function when the onSelect event of a jQuery datepicker is

Is there anyone who can assist me? I am currently working with a JavaScript function: function updateAb(param){ some manipulation } I also have a datepicker jQuery plugin that I am using for the onSelect event, like so: $( ".datepicker").datepicker({onS ...

Empower your presentations with slick cloning technology

I am facing an issue with my slider that I cannot seem to resolve. Currently, I am using slick to display 3 slides, but only the center one shows all the content. To achieve a continuous infinite slider effect where all slides appear in the center, I need ...

Unraveling complex JSON structures

JSON data is available on a specific URL: { "href":"http:\/\/api.rwlabs.org\/v1\/jobs?limit=10", "time":18, "links": { "self": { "href":"http:\/\/api.rwlabs.org\/v1\/jobs?offset=0&am ...

employing express.json() post raw-body

Within my Express application, I am aiming to validate the length of the request body and restrict it irrespective of the content type. Additionally, I wish to parse the body only if the content type is JSON. How can I go about accomplishing this? Curren ...

"Error in code behind due to NullReference when processing object after an AsyncPostBack triggered by UpdatePanel

A project I'm working on involves creating a basic game within an ASP.NET/VB.NET web application. The game interface consists of multiple ImageButtons. Within the code-behind file of the web page, there is a reference to the game object which handles ...

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...

Limiting the data obtained from the API to extract only the desired values

Using an API, I am retrieving customer information and displaying it in the console. The code snippet used for this operation is: if (this.readyState === 4) { console.log('Body:', this.responseText); } }; This returns a JSON object with v ...

Unable to enable auto-scroll feature in DIV element

My div has an auto-scroll feature that works fine, but I've encountered an issue when using multiple smileys in a single chat post. The auto scroll seems to stop working correctly and only scrolls 2 lines from the bottom. I attempted to fix this with ...

Animating CSS styles in Vue.js based on JavaScript triggers

Within my Vue.js application, I've implemented a login form that I'd like to shake whenever a login attempt fails. Though I have achieved the desired shaking effect, I'm not completely satisfied with my current solution. Here's a simpl ...

Is the Vuex mutation properly formatted?

Is the mutation method correctly written to modify the initial state array? I'm uncertain about the last few lines of the mutation method. What am I missing, if anything? // Storing state: { flights: [ {trip_class: 0, number_of_change="1"}, ...

Determining when a text area has selected text without constant checking

class MarkdownEditor extends React.Component { constructor(props) { super(props); this.timer = null; this.startIndex = null; this.endIndex = null; } componentDidMount() { this.timer = setInterval(() => { this.setSelectio ...

Exploring the power of NodeJS modules through exports referencing

Encountering difficulties referencing dynamic variables related to mongoose models based on user session location value. Two scripts are involved in this process. The first script is called location.js & reporting.js In the location.js script: module.ex ...

When using Jquery, the search button consistently retrieves the same data upon the initial click event

How can I ensure that my Ajax call retrieves data from the remote database based on the updated search criteria every time I click the search button? Currently, the system retrieves results based on the initial search criteria even after I modify it and cl ...

Managing file system operations in Node.js

What is the most effective way to manage file access in node.js? I am currently developing an http-based uploader for exceptionally large files (10sGB) that allows for seamless resumption of uploads. I am trying to determine the optimal strategy for handl ...

Is there a way for me to determine the total number of seconds since the chatbot was first opened?

Here is a snippet of my HTML code: <div class="chatbot chatbot--closed "> <div class="chatbot__header"> <p><strong>Got a question?</strong> <span class="u-text-highlight">Ask Harry</span></p> <s ...

Is it necessary for a TypeScript Library's repository to include the JavaScript version?

Is it necessary to include a JavaScript version of the library along with the Typescript repository for consumers? Or is it best to let consumers handle the compilation process themselves? Or should I consider another approach altogether? ...

Developing a user-friendly widget for a website that is not optimized for mobile devices

Here's the backstory: I'm currently in the process of creating a mobile-friendly widget for my clients. Unfortunately, they have web pages that are not optimized for mobile devices, and it doesn't seem like that will change anytime soon. Th ...

Animation using jQuery is functional on most browsers, however, it seems to

After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...

Incorporate variable key-value pairs into a JavaScript array or object

Is it possible to add a key value pair to an existing JavaScript associative array using a variable as the key? I need this for JSON encoding and prefer a simple solution over using plugins or frameworks. ary.push({name: val}); In the above code snippet, ...