Initiating Ajax to trigger the body's onLoad event

Whenever I use an ajax call to load a div, the entire page refreshes. It seems that the 'body onload=init()' event is triggered on ajax response causing all the initialization to repeat, which is not desired. Is there a way to only load the div through the ajax call?

<body onload="init()">
.....
.....
<div>...<a href="" onclick="saveView('more')"><b>More</b></a></div>
</body>

main.js

function saveView(arg){
    if(arg=="more"){
            ajaxGet(baseRef+"all.html", loadList);

    }else{
            ajaxGet(baseRef+"all-A.html", loadList);

    }
function init(){
.....
}

function ajaxGet(url, responseHandler)
{
    var page_request = false;

    if (window.XMLHttpRequest && !(window.ActiveXObject && window.location.protocol == "file:")) { 
                // use this only if available, and not using IE on a local filesystem
        page_request = new XMLHttpRequest();
        }
    else if (window.ActiveXObject) { // older versions of IE, or IE on a local filesystem
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e){
            try{
                page_request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e){
            }
        }
    }
    else {
        alert("Your browser does not support XMLHTTP.");
        return false;
    }


    page_request.onreadystatechange=function() {
        if(page_request.readyState==4) {
                        // on local machines the status for success is 0. on web servers it is 200
            if(page_request.status==200 || page_request.status==0) {
                responseHandler(page_request);
            }
        }
    }

    page_request.open('GET', url, true);
    page_request.send(null);
}

function loadList(page_request){
    document.getElementById("list").innerHTML=page_request.responseText;
    Loaded = true;    
    try{
        if(pLoaded) 
            doFilterStateChange1();
        }catch(e)
        {
        }
    setTimeout("restoreScrollTop()", 1000);
}

Answer №1

The onLoad event of the body is not being triggered by Ajax in this case. By noticing that there was no value assigned to href="" in the anchor tag, I realized it was causing the page to reload unnecessarily. Simply removing it resolved the issue.

Answer №2

If you're experiencing problems with page reloading, there could be a script error causing it. It's best to check your code using tools like Firebug to identify any errors that might not be easily noticeable if the page is refreshing quickly.

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

What are the steps to create offline documentation for sails.js?

I am looking to integrate offline sails.js documentation into my system. You can find the official documentation for sails.js maintained at this Sails.js Documentation. According to their documentation, they use doc-templater for building the documentati ...

Ensure that data is not cached after the page is refreshed at regular intervals of x seconds

In the process of developing a news app, I have implemented a feature where a div with the class .new_feed is refreshed every 10 seconds to fetch new updates. However, I encountered an issue where if a new feed appears in the .new_feed div and is not cli ...

Is it possible to make a div jump or bounce if it has a flex display?

I'm looking to add some interactive animation to an image inside a div when my mouse hovers over it. To better explain the issue I'm facing, I created a quick representation of what I want to achieve in the code below. My goal is to have the te ...

When the ENTER key is pressed, trigger a function within the form instead of submitting it

Incorporating a table with filterable data utilizing the jQuery DataTables library, I face an issue. The said table is situated within a form where selecting rows (via checkboxes in one column) prompts the SUBMIT button to add them to a collection. The ta ...

Storing data locally in PhoneGap using localStorage via AJAX calls is a common requirement for

Our mobile application is built with cordova [phonegap] and we are looking to implement offline saving of results into the cache memory. The results are fetched from a PHP server and displayed in a webview using ajax and javascript. I have tried using loc ...

Does GIF animation operate on the same thread as JavaScript in all popular web browsers?

When my AJAX request is in progress, an animated GIF is displayed to show activity. However, I have noticed that the animation freezes while the response from the request is being processed by a script that heavily updates the DOM. After researching this ...

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

Seeking help to implement toggle buttons for checkboxes on a page with a large table fetched from an external system. The table can have over 200 rows or more. Currently, I am facing an issue where I can only access and manipulate the visible checkboxes o ...

Guide on implementing enums (or const) in VueJS

Seeking help on a seemingly simple task, I am trying to understand how to use "enums" in VueJS. In my file named LandingPage.js, I have the following code: const Form = { LOGIN: 0, SIGN_UP: 1, FORGOT_PASSWORD: 2, }; function main() { new Vue({ ...

Struggling with implementing a materialize modal?

I am encountering a problem with Materialize. This time, I am trying to create a modal div, but it doesn't seem to be working. The button is created, but when I click on it, nothing happens. I have made sure to link all the necessary Materialize files ...

Verifying form submission in Java: A guide

My JSP form code: <form id="emailForm" data-role="form"> <input type="text" class="form-control" id="name" name="name" placeholder="Enter full name.."> <input type="submit" id="emailSubmit" name="emailSubmit" class="btn btn-default ...

Animating a Canvas to Follow Mouse Coordinates

I am looking for a way to animate a circle moving towards specific coordinates, similar to the game . I have attempted using the jquery animate() function, but it is too slow due to the constant updating of the target coordinates. Is there a faster metho ...

An error has occurred in the Next.js App: createContext function is not defined

While developing a Next.js application, I keep encountering the same error message TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function every time I try to run my app using npm run dev. This issue arises when attempting to co ...

Fetch search results dynamically in Wordpress through AJAX

I'm struggling to implement AJAX on my WordPress site to display search results without refreshing the page. Despite trying various solutions found through research, none seem to be working effectively for me. Currently, here is the progress I have ma ...

An AngularJS project utilizing exclusively EJB

Can an AngularJS application be built directly with EJB without needing to expose them as REST services? Many examples on the internet show that eventually REST services are required to provide data to AngularJS. This means that EJB methods must be expos ...

activate a CSS-only modal with JavaScript

Is it possible to trigger a pure CSS modal using JavaScript (jQuery) without the need for a label, so that it activates when a user visits a page? http://jsfiddle.net/h84nubzt/ <label class="btn" for="modal-one">Example</a> <!-- Modal ...

Error in Next.js: Trying to destructure an undefined object in useContext

While attempting to change the state of my cursor in a Next.js app using useContext, I encountered the following error: TypeError: Cannot destructure 'Object(...)(...)' as it is undefined. The goal is to update the state to isActive: true when h ...

Is there a way to resolve the issue of my localStorage getting overridden on page refresh?

I am currently working on a simple React app and encountering an issue with the localStorage. Whenever I refresh the page, the todo list stored in the localStorage disappears. How can I ensure that the todos remain visible even after a refresh? Any sugges ...

What is the reason behind JSLint's preference for x === "undefined" over typeof x == "undefined"?

I'm feeling lost when it comes to JSLint. Initially, my code checked if div:jqmData("me") was undefined in this way: if ( typeof el.jqmData("me") == "undefined" ? el.not(':jqmData(panel="main")').length > 0 : el.not(':jqm ...

deleting the current product information during an ajax request

After executing the query provided below, I have $product_list in this code. However, I want to use ajax so that when I click on the button link1, $product_list gets emptied. How can I clear the content within products_list using an ajax call triggered by ...

Is there a way for me to manage the appearance of the printed document's layout?

I have successfully added 3 print buttons to my website, each one designed to print a specific portion (div) of the webpage. Here is the code snippet for this functionality: function printPage(id) { var html="<html>"; //html+="<link rel="st ...