Executing jQuery code post data loading: A step-by-step guide

I am having trouble running JavaScript code after the data has loaded. Currently, it runs the code first before loading the data and deletes the class .active. I actually need to delete the class after clicking on another link.

Below is my code:

 $('document').ready(function() {
            $('.links a').click(function(e) {
                e.preventDefault();
                $('.links a').not(this).removeClass('active');
                $(this).addClass('active');
            });
        });
        function Animate2id(id) {
            // your function stuff
        }

and here is my HTML:

<div class ="links">
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4610?>'); return false;" class="" title="Mobile Phones">Mobile Phones</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4611?>'); return false;" class="" title="Tablets">Tablets</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4616?>'); return false;" class="" title="Monopods">Monopods</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4630?>'); return false;" class="" title="Headphones">Headphones</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4739?>'); return false;" class="" title="Media Players">Media Players</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4593?>'); return false;" class="" title="Accessories">Accessories</a>
    </div>

What am I missing? Best regards

javascriptjqueryhtmlcssajax

Answer №1

Give this a shot:

$('document').ready(function() {
   $('.tabs span').on('click', function(){
      $('.tabs span').removeClass('selected');
      $(this).addClass('selected');
   });
});

See it in action: Live Demo

Answer №2

$(document).ready(function() {
     // This code will run when the HTML document is loaded and the DOM is ready
     alert("The document is now ready");
    });


    $(window).load(function() {
     // This code will run when the entire page, including all frames, objects, and images, has finished loading
     alert("The window is fully loaded");
    });

If not, you can use setTimeout

setTimeout(function(){ alert("This message will be called after 3000 milliseconds"); }, 3000);

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

How to retrieve a BLOB image and incorporate it into an HTML webpage with PHP

I am having trouble retrieving an image from a MySQL database and displaying it on a web page. I have a user_image table with columns for userid, image (stored as blob datatype), caption, imagename (name of the image, e.g., 0101.jpg), and time (timestamp ...

phphtmlmysqlblob

Comparison between JavaScript Promise .then(onFulfilled, onRejected) and .then(onFulfilled).catch(errorFunc) in handling asynchronous operations

As I was reviewing promises, I had a question about the order in which the .then/catch calls are executed when using the code below. Are the catch calls being placed at the end of the queue stack? I already have a clear understanding of the distinction bet ...

javascriptnode.jspromise

What is the reason the 'change' event isn't triggering the onChange function in ReactJS when using jQuery?

Currently, I am creating tests for ReactJS components using karma and PhatomJS. In the process, I render the component and utilize jQuery to easily target DOM elements and simulate various user actions such as clicking and text input which all work smoothl ...

jqueryreactjs

Checking jquery validation on a field when it contains input

My form validation process involves using jquery validate as shown below: $("#formuser").validate({ rules: { accountname: { required: true, minlength: 6 }, T1: { required: true, ...

javascriptjqueryvalidation

Inadequate grid data retrieval (This problem arises randomly)

During the process of loading data in a grid on our production server, I encountered a script error at the bottom left corner of the page. Interestingly, this error only occurs on the production server and works perfectly fine on the local server. Here ar ...

c#javascriptasp.netsql-server-2008iis-7

Validating Phone Numbers with jQuery - Only Accepting Prefixes of 3 Numbers Starting with (

I am new to using the jQuery validation method and I am trying to implement a check for a specific prefix. I have tried to do it myself but have been unsuccessful. Can anyone help me with this issue? Requirements:- Must start with 059 Example: 059XXXXXXX ...

jquery

What is the most secure method for transferring JavaScript variables between websites without using PHP?

The Dilemma: Greetings! Let's say I have ownership of two distinct websites. Site.com and Site.com:3000. There are multiple methods to exchange variables between the two sites. I am unable to utilize localstorage due to being on different domains, ...

javascriptphphtmlvariablescookies

Moving PHP array values between two different sections on a webpage using the transfer (add/remove) method

In my div, there is an input textbox that can be manually edited. I am trying to dynamically add or remove PHP values from another div that contains a set of array values obtained from a query. Each value in the array has an [Add] or [Remove] button depend ...

phpjavascriptarrayssearch

Having trouble retrieving returned data after refetching queries using Apollo and GraphQL

I am able to track my refetch collecting data in the network tab, but I am facing difficulty in retrieving and using that data. In the code snippet below where I am handling the refetch, I am expecting the data to be included in {(mutation, result, ...res ...

javascriptreactjsgraphqlapolloreact-apollo

Creating an embedded object in React JS: A step-by-step guide

Is it possible to render a nested object within another object? Take a look at the code below to see what I mean. https://i.sstatic.net/aLmnQ.png I am trying to display the minimum system requirements objects such as graphics, operating system, storage, ...

javascriptreactjsarraysobjectnested

HackerRank Challenge: Strategies for Efficiently Solving Minimum Swaps 2

In this challenge, the goal is to determine the minimum number of swaps needed to arrange an array of disordered consecutive digits in ascending order. My code successfully handles most of the tests, but I'm encountering timeout errors with four speci ...

javascriptarraysperformancesorting

Choosing specific text below an element

I'm having trouble selecting specific text from the table below <section id="bullet_features"> <h2>Additional Features</h2> <p> Knife Steel: 8Cr13MoV, satin finish <br> Handle: Molded co-polymer <br> Blade: 3.6 in. ...

htmlxmlxpath

Is server-side validation of HTML form inputs using a lengthy sequence of if / else statements an effective approach?

Would it be practical to rely on a lengthy series of nested if/else statements in PHP for validating user input from an HTML form? For instance, when dealing with two fields, the approach might look like this: if (field one is correctly formatted) { ...

phphtmlformsinput

Utilizing a dynamic URL to set the background image of a div element (with the help of

Currently, I am in the process of designing a user registration page that allows users to input an image URL and view a preview of the image within a designated div. The div already contains a default image set by a specific class. The HTML code for displa ...

jqueryhtmlcssimage

Button, anchor not aligned horizontally due to differing padding

I've been pondering this question for quite some time now. Whenever I try to style a button in HTML using the a tag or button tag with equal padding on the top and bottom, the buttons still align horizontally. Please refer to the image below for clari ...

htmlcss

Issue with jQuery connected sortable: clicking to move items is not functioning properly

I am currently working on a project that involves two connected sortable lists using jQuery UI. I have successfully implemented the functionality where clicking on an element in one list will add it to the other list and vice-versa. However, I have encount ...

jqueryjquery-ui

Laravel's Ajax system is efficiently storing numerous likes in the likes table

Having some issues trying to implement a like system in my Laravel application using Ajax. It seems to be working, but I'm encountering a problem where duplicate likes are being sent to the database - about 5 duplicates of the same 'like'. I ...

phpajaxlaravel

Managing User Permissions and Submitting Forms using Django

Creating a user-friendly Q&A platform where users can ask and answer questions. I'm exploring the idea of organizing users into groups to assign permissions. I believe creating groups is the most efficient way, but I'm open to suggestions. M ...

pythonhtmldjangouser-controlsuser-input

Having trouble with AngularJS UI Router failing to load template and controller?

I am currently trying to identify the error in my code. Whenever I access /dashboard, it only loads the template from the first route, which is defined as SYSTEM_VARS.includes.general.root. However, it does display the console.log message inside the resolv ...

javascriptangularjsangular-ui-router

Storing a variable within a function in jQuery and accessing it externally: how can this be achieved?

I am attempting to modify text upon a mouse hover event: $(document).ready(function() { $('.blog_post_container').hover(function() { var title = $(this).find('.blog_title').text(); $(this).find('.blog_title& ...

javascriptjquery