html2canvas does not support integration with asp.net

Feeling a bit lost here. I've been reassured that the jquery code below is solid, but for some reason html2canvas just won't cooperate. When I click the button, nothing happens at all. Other methods with the button seem to work fine. Can anyone shed some light on what might be causing this issue?

This is the jquery code I'm using:

 $(document).ready(function () {
     $('#Print_Button').click(function () {
         html2canvas($('#form1'),{
            onrendered: function(canvas) {
            cvs = canvas.toDataURL('image/png');
            window.open(cvs)
        }
    });
    });
 });

And here's the HTML snippet:

<table id="table_1"">
    <tr>
        <td class="auto-style12">MCN Ref No.</td>
        <td>
            <asp:TextBox ID="TextBox1" ReadOnly="True" runat="server" Width="116px"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="auto-style12">Date:</td>
        <td>
            <asp:TextBox ID="TextBox4" ReadOnly="True" runat="server" Width="116px"></asp:TextBox>
        </td>
    </tr>
    ... (HTML content continues)

Answer №1

When using $, it is actually a JQuery selector. Without using jQuery, the code $('#Print_Button') will return null. This means you are subscribing to null onclick event instead of the button itself. To make your code work without jQuery, you need to replace $('#') with JavaScript's getElementById method like so: document.getElementById("")

Ultimately, your code should be structured as follows:

document.addEventListener("DOMContentLoaded", function(event) { 
     document.getElementById("Print_Button").click(function () {
        html2canvas(document.getElementById("form1"),{
           onrendered: function(canvas) {
           cvs = canvas.toDataURL('image/png');
           window.open(cvs)
        }
    });
  });
});

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

Update the color of the menu ID

Feeling frustrated trying to figure out how to modify this <nav class="mainnav "> <a id="top"/> <div class="navwrap"> <ul id="menu-top" class="menu"> <li id="menu-item-70" class="menu-item menu-item-type-custom menu-item-object- ...

Can Selenium in Python be used to locate and extract all concealed elements containing text?

I am currently working on a project where I need to extract translated text from various webpages. I have encountered an issue where the entire page needs to be fully translated before I can begin extracting the text. To achieve this, I have to scroll thr ...

The keyframes alternate feature in CSS3 animation is not triggering

I'm attempting to create a simple animation using rotations and keyframes that triggers when the user hovers over an element. The issue I'm facing is that once the user stops hovering over the element, the animation does not reverse. You can see ...

Is it possible to access and view the contents of a live website folder using WebMatrix2?

I am looking to make changes to a website using WebMatrix, but the site was originally built with ASP.net. When I try to open the site's folder, I encounter numerous errors. Can anyone advise me on whether it is possible to edit this website despite t ...

Utilize jQuery to retrieve data attributes and set them as CSS properties in a key-value format

Looking at the HTML below: <h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4> I aim to use the data attributes as CSS styles for the H4 element. I have attempted to achieve this ...

Tips for transferring JSON data to a CodeIgniter view

I have a query regarding how to replace a specific section of my webpage with data returned from the controller. Currently, I have a page that displays movie details directly fetched from the database. My goal is to only display movies of a particular genr ...

What could be causing certain JS files to fail to load in HTML?

I'm facing an issue with loading multiple JavaScript files in my HTML code. Only the jQuery file is loading, while the other two files are not. Could someone please help me identify the mistake I am making? When I check the network tab using the inspe ...

Tips for applying a class to an element depending on data stored in Local Storage using JQuery

I am currently working on a TODO list project with functions to save and delete records already in place. However, I am facing challenges with the functions for marking items as important and done. One method I use is to retrieve saved items from Local St ...

Iframe displaying a blank white screen following the adjustment of document.location twice

I am in the process of developing a web application that I intend to integrate into my Wix website. The main components of the required web application are a text screen and a button to switch between different screens/pages (html content). However, I am ...

How can I make the Search String stand out in the mysql result?

Here's the code I've written up to now <form method="post" name="search"> <input type="search" name="k" placeholder="Enter Keywords"> <input type="submit" value="Search"> </form> <? $skw = $_POS ...

What could be the reason for the sudden malfunction of the .tabs li:hover property on my

I'm having trouble with the :hover effect not working on my .tabs li element. I've tried commenting out my jQuery script, but it still won't apply. Can anyone help me figure out why? Here's a JSFiddle link for reference: https://jsfidd ...

Submitting a form with ajax and utilizing jquery

Currently, I have a form through which data is sent via ajax. The data is then processed by a php file and the results are displayed. My goal is to incorporate a bootstrap pagination bar that updates a hidden value in the form (based on the clicked page n ...

Flexbox: The final element is not positioned on the right side

I have been trying to align the final item on the right side using margin-left: auto. The desired output is achieved in jsfiddle. I am using Visual Studio Code with the same code, but when viewed in Firefox, Chrome, or Edge, the item does not appear on the ...

Themeroller for Twitter Bootstrap

Are there any theme creation tools similar to jQuery UI Themeroller for Twitter Bootstrap? It would be enjoyable and simple to customize and create themes for Twitter Bootstrap. ...

Tips for eliminating excess white space in mobile view using css/bootstrap

I have successfully replicated the screenshot below using CSS/Bootstrap to ensure it looks consistent on both mobile and desktop view. https://i.sstatic.net/NS4yE.png For the upper portion of the screen-shot, I have created a fiddle which includes a sear ...

Unable to achieve text centering within a button using HTML and CSS

I'm diving into the world of HTML/CSS for the first time and encountering some issues along the way. In my setup.html, I created a "Continue" button and applied a class to style it in styles.css. However, I'm facing an issue where text-align cen ...

jquery modal not displaying

My page is designed to display a dialog containing a set of guidelines using a PHP script that determines which guideline(s) should be shown and generates the corresponding div element(s). Afterwards, I utilize a simple $(document).ready( function() { $(" ...

Coldbox handler does not receive the data from AJAX call

In my current project, I encountered a strange issue while making an $.ajax call to a Coldbox handler method. When I dump the rc scope at the beginning of the handler, there's no data in it other than my usual additions on each request. Even more biz ...

Is it possible to include ternary in the "homepage" section of the package.json file?

When making API calls in production, they will be on the same domain as where my app is hosted, so it's necessary to include "homepage": "." in the package.json. However, when working locally from localhost, I need to make API calls to the production ...

Ensure that the header stays centered on the page as you scroll horizontally

Below is a given code snippet: header { text-align: center; } /* This section is just for simulation purposes */ p.text { width: 20rem; height: 50rem; } <html> <body> <header> <h1>Page Title</h1> <detail ...