"Functionality requiring Javascript is not enabled following an AJAX call until the page is

I've created a system that can generate an online form page and send it to a printer.

This system utilizes AJAX to extract data from an existing page and send it to a Java servlet. The servlet then constructs the HTML and sends it back, where it is displayed in a separate window.

However, the HTML generated in the separate window doesn't respond to events (like clicks) until it's refreshed. If I click the "Print" button on the page, nothing happens until I refresh, at which point my print dialog appears.

The AJAX call:

function printForm(warrants) {
    $.ajax({
        type: "GET",
        dataType: "html",
        url: "AjaxServlet",
        data: {formType: 'printForm', warrants: warrants, headerValues: getHeaderValues()
        },
        success: function (data) {
            var win = window.open();
            win.document.write(data);
        }
    })
}  

The generated HTML page:

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
...
        </p>
    </div>
</body>

Answer №1

To ensure a document is ready for use after writing to it, you should remember to close it.

var windowRef = window.open();
windowRef.document.write(newData);
windowRef.document.close();

While this step is not necessary when working with the main document, as it is automatically closed after the dom finishes parsing, it is required when opening a new window and writing to it.

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

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

Detecting server errors in Nuxt.js to prevent page rendering crashes: A Vue guide

Unique Context This inquiry pertains to a previous question of mine, which can be found at this link: How to handle apollo client errors crashing page render in Nuxt?. However, I'm isolating the focus of this question solely on Nuxt (excluding apollo ...

What is the best way to design a new class that will serve as the parent class for both of my existing classes, allowing them

I am facing a challenge with my programming classes. I have two classes, "Player" and "Enemy", each with similar methods and properties. I want them to inherit from a parent class that I'll create called "Game Object". How can I approach creating thi ...

What is the easiest way to simulate the Ctrl+C key event using jQuery?

I need to programmatically simulate pressing Ctrl+C in order to copy text from a page. My initial attempt looked like this: $('#codetext').click( function() { $("#codetext").trigger({ type: 'keydown', which: 99 }); } Her ...

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

Setting up dynamic routes in a Vue.js Express application

I am currently working on a project that involves creating a basic Vue.js Express profile interface. This interface is responsible for retrieving profile information of a specific user based on a unique ID assigned to each user. The .get() request in Vue.j ...

Tips for invoking the ajax pagination feature

Although I have successfully displayed the desired data based on the select box, my pagination feature seems to be malfunctioning. Why is that? The index.php display with broken pagination This snippet shows my ajax script for loading data and setting up ...

In TypeScript version 2.4.1, the fontWeight property encounters an error where a value of type 'number' cannot be assigned to the types of '"inherit", 400'

When attempting to set the fontWeight property in TypeScript, I encounter the following error: Types of property 'test' are incompatible. Type '{ fontWeight: number; }' is not assignable to type 'Partial<CSSProperties>&a ...

Unable to make changes to the text within the textarea field

Currently, I am in the process of creating a script to streamline the tedious task of providing teaching feedback. To scrape data such as student names and classes, I am utilizing selenium/python. While everything is running smoothly, I have encountered an ...

How to incorporate JSON into a d3.js calendar display?

Learning d3 charts and javascript has been quite challenging for me. After researching a lot, I successfully populated the chart with CSV data. Now, my next goal is to populate the chart with json data. This is the code I'm using, which is inspired ...

Navigate down to the bottom of the element located on the webpage

I'm trying to create a feature where clicking an anchor tag will smoothly scroll to a specific element on the page. Currently, I am using jquery scrollTo for this purpose. Here's the code snippet: $.scrollTo( this.hash, 1500, { easing:&apos ...

Is it feasible to bypass the dialog box on beforeunload?

Currently, I am utilizing jQuery's bind method like so: $(window).bind('beforeunload', function() { //my code return ""; } In Mozilla Firefox and IE8, everything works smoothly without including the "return "";" statement. No pesk ...

Looking for a way to incorporate an image source property into a larger image?

I am working on a function that will enlarge an image when clicked on from a selection of 5 or more available images. The idea is that clicking on a small image will trigger the display of a larger version of that image in a frame. Here is an example of t ...

Master the art of utilizing angular-filter

Encountering some challenges while attempting to utilize angular-filter: The following links have been imported into the HTML file: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script src=" ...

Activate dropdown to trigger a function that fetches dates and disables them in the datetimepicker

I have a dropdown menu containing staff names and StaffId. These are linked to an appointment business logic. I am attempting to activate a select change event where dates stored in the database will be marked as unavailable in the connected jQuery datet ...

"Efficient Ways to Manage Various File Types in React: xlsx, pptx, doc, docx

I am encountering an issue with downloading files in my React application. The API is functioning properly as confirmed using Postman, where different file formats such as xlsx, pptx, doc, docx, ppt and xls can be downloaded and opened successfully. Howev ...

How can I submit multiple dropdown menus when they are changed?

I recently added Four dropdown menus on my index.php page. <select name="filter_month" class="filters"> <option>Select a Month</option> <option value="1">January</option> <option value="2">February</optio ...

Dealing with prompt boxes in Robot Framework: A Guide

Currently, I am utilizing the Robot Framework in conjunction with Selenium2Library for automating tests on websites. During one particular scenario, a prompt box appeared (similar to an alert but containing an input field). The challenge is that Robot Fram ...

Is there a maximum file size limit for uploads in jQuery when using ajax requests?

I'm curious if there's a size limit for jQuery uploading (via Ajax)? Specifically, I'm working on a form to upload multiple images to the server (currently using WampServer locally). So far, I've been able to easily upload one, two, or ...

Struggling to access the height attribute from a CSS file

Hey there. I'm pretty confident that the solution to my query is quite simple. So, I have a .css file with this particular code snippet: div.site { text-align:center; border:2px solid #4b6c9e; padding:1px; margin-top:10px; font-size:medi ...