Establish initial content for the specified div area

I need help setting page1.html to display by default when the page loads. Can you provide some guidance?

Appreciate your assistance in advance.

<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    function swapContent(targetID, url) {
        var target = document.getElementById(targetID);
 
        var ajax = new XMLHttpRequest();
        ajax.open('GET', url, true);
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4) {
                target.innerHTML = ajax.responseText;
            }
        }
        ajax.send(null);
    }
    </script>
</head>
<body>
    <div>
        <div>
            <a href="javascript: void();" onclick="swapContent('searchDiv', 'page1.html');">First</a> |
            <a href="javascript: void();" onclick="swapContent('searchDiv', 'page2.html');">Second</a> |
            <a href="javascript: void();" onclick="swapContent('searchDiv', 'page3.html');">Third</a>
        </div>
        <hr>
        <div id="searchDiv" style="width: 550px; height: 400px; overflow: scroll;">Please select one...</div>
    </div>
</body>
</html>

Answer №1

If you prefer loading it with javascript:

<body onload="swapContent('searchDiv', 'page1.html');"> 

Answer №2

To incorporate the onload event handler, you can attach it to the body element:

 <body onload ="swapContent('searchDiv', 'page1.html');">
    ....

 </body>

Answer №3

Would it be a good idea to utilize

swapContent('searchDiv', 'page1.html');
within the onload event of the body element?

Answer №4

To ensure proper loading, consider placing it within the onload function or, if using a particular framework, embed page1 directly into the div element. In Django, this can be accomplished by:

<div>{% include 'page1.html' %}</div>

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

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

Top method for removing quotation marks from form input using jquery

Here is a form input that I need to handle: <tr class="formulaRow"> <input type="text" class="ingredient required" name="ingredient"> </tr> Currently, the value from this input is stored as follows: var ingredient = $(".formulaRow").fi ...

PHP has hit its maximum execution limit, causing the script to override the settings in the PHP.ini file and the preset

When I send 7 get requests simultaneously to one PHP script, two of the requests are successful while the others result in an error message stating "Max Execution of 60 seconds exceeded!" Despite setting the time limit at the beginning of my script using ...

Exploring SubjectBehavior within my UserService and Profile Component

Within my ShareService, I have the following code snippet: isLogin$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); <==== default value is false CheckUser = this.isLogin$.asObservable(); public isLogin (bool){ ...

What could be causing this function to malfunction?

Apologies for any inaccuracies in technical terms used here. Despite being proficient in English, I learned programming in my native language. I am currently working on a project using the latest version of Angular along with Bootstrap. I'm unsure if ...

Creating a custom event for every reference within a Vuejs for loop

I'm working with a loop of data and have a modal for each iteration <div ref="vuemodal-{{loop.index}}"> Each modal is a bootstrap modal, and I want to bind an event to them that triggers whenever the modal is closed mounted(){ Obj ...

merging pictures using angular 4

Is there a way in Angular to merge two images together, like combining images 1 and 2 to create image 3 as shown in this demonstration? View the demo image ...

Center-align the text vertically in relation to the icon

A query has arisen, regarding a div that contains text and an icon. The issue at hand is that on larger screens the text is not vertically aligned in the center. For further reference, please visit this bootply link: http://www.bootply.com/CHKeRxKOX6 http ...

Tips for incorporating external AMD modules with Angular2 using WebPack

In my current project using Angular2, TypeScript, and WebPack, I am looking to incorporate the Esri ArcGIS JavaScript API. The API can be accessed from the following URL: By importing Map from 'esri/Map';, I aim to import the corresponding modul ...

Python and Javascript clashing with one another

(Updated question for clarity). I am currently developing a flask app game that involves users inputting guesses via the web browser. The backend, which runs on Python, checks these guesses and provides feedback to the user about their accuracy. Additional ...

Capturing an image of an HTML5 canvas that includes an image object: tips and tricks

After creating a canvas and adding various objects like images, clipart, and text to it, I encountered an issue. When capturing a snapshot of the canvas with only text using the method `canvas.toDataURL()`, the snap is correct. However, when I include an i ...

How can I send an HTML document from a WebApi 2 action using the IHttpActionResult interface?

When it comes to building an html document and returning it in a web api, many resources recommend using HttpResponseMessage. However, I am eager to achieve this using IHttpActionResult instead. Here is my current approach: [ResponseType(typeof(HttpRe ...

Ensuring Consistent Data in Web Forms When Editing a User's "Points" Field

In the process of creating a booking system, I am faced with an issue regarding how points are allocated to users. An admin can assign points to a user through a form, which the user then uses when booking a slot. The problem arises when the admin opens th ...

Maintaining consistent div height in Bootstrap 4 flexbox design

I'm currently using Bootstrap 4 with flexbox enabled, but I'm having trouble making the row > col > div boxes have equal heights. I attempted to use position: absolute, but it's not the ideal solution. Below is a screenshot of the is ...

Ways to utilize two distinct XPATH values for a single key

When dealing with Xpath for the same object in two different portals, the paths can be: //*[@id="abc"]/fieldset/div/div/div[1]/label //*[@id="xyz"]/fieldset/div[1]/fieldset/div/div/div[1]/label In order to use both values in the same key and have Seleni ...

Is it feasible to insert the result of a JavaScript code into a PHP script?

Alternatively, you can view both codes side by side on the panelbackup(dot)com/codes page Alright, I have a code placed on page 1.html that adds four random numbers at the end of any given URL: <head><script>window.onload = function() { ...

Step-by-step guide for serving static JavaScript files using NextJS

I am currently exploring the process of hosting static js and css files using NextJS. My journey began with creating a react app through create-react-app, where I developed an App component before executing the npm run build command. This resulted in the ...

The close button is not functioning properly

I created a script to close my div element by clicking on the 'x' icon, but instead of deleting the div only, the whole page gets deleted. I'm not sure where I went wrong, can anyone help me? HTML <div class="note"> <span id ...

Verify whether an option is chosen in CakePHP 3 form

I'm working on a form where users can select Types and each type has an associated color. In my TypesController, I have a function that retrieves the list of types with their IDs, names, and colors. $types = $this->Types->find('list') ...

How can GraphQL facilitate JOIN requests instead of multiple sequential requests?

I am working with two GraphQL types: type Author { id: String! name: String! } type Book { id: String! author: Author! name: String! } In my database structure, I have set up a foreign key relationship within the books table: table authors (e ...