Stripping HTML elements from the body of an HTML document using AJAX before transmitting it as data to the controller

My JSP page contains two buttons labeled "download" and "sendemail". When the "Sendmail" button is clicked, an ajax method is triggered to generate a PDF version of the HTML body and send it to the back-end controller.

I attempted to utilize the following code snippet:

document.getElementById('reportbuttons').remove();

prior to:

doc.addHTML(document.body, function() {....

The 'reportbuttons' represents the ID of the div tag housing the "sendmail" and "download" buttons. However, both buttons disappear once the "sendmail" button is clicked.

function sendMail() {
    let doc = new jsPDF('p','pt','a4');
    doc.setProperties({
        title: ' Report PDF Document',
        subject: 'subject',
        author: 'XYZ',
        keywords: 'generated, javascript, web 2.0, ajax',
        creator: 'ABC '
    });

    doc.addHTML(document.body, function() {
            var data = doc.output('datauristring');
            console.log(data);
              var reqJson = {};
                 reqJson.machineId = "<%=machineId%>";
                 reqJson.monthYear = "<%=monthYear%>";

                 reqJson.data = data;
                 console.log();
                 $.ajax(
                 {
                     url : "sendMail/",
                     type: "POST",
                     dataType: 'json',
                     data : JSON.stringify(reqJson),
                     contentType: "application/json",
                     success:function(data)
                     {
                         alert('mail sent successfully');
                         console.log(data);


                     }, 
                     error: function(data)
                     {

                     }
                   });
    });


}

I aim to exclude these two buttons from the generated PDF while retaining them on the JSP webpage.

Answer №1

Do not delete your buttons until after executing doc.addHTML(body,function(){}), instead hide the buttons initially and then display them again upon receiving a response from your ajax call.

                 success:function(data)
                 {
                     alert('Email sent successfully');
                     console.log(data);
                     document.getElementById('reportbuttons').style.display ="block";

                 }, 
                 error: function(data)
                 {
                     document.getElementById('reportbuttons').style.display ="block";
                 }

Additional Tip:

To make changes without affecting the original document, create a new clone of it, remove elements from the clone as needed, and then send the modified clone to your controller via ajax.

  var itm = document;
  var cln = itm.cloneNode(true);
  cln.getElementById("reportbuttons").remove();

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

Using jQuery to toggle visibility based on scroll position

Recently, I received a web template equipped with a jQuery library called sticky, which essentially makes the navigation "stick" to the top of the page as you scroll. Now, my goal is to integrate a logo into the navigation once it reaches its final positio ...

Utilizing JavaScript Callbacks in HTML Image Tags

Currently I am working on a small application and looking to include a YouTube section. I have come across a method for obtaining the user's YouTube icon: This is included in the head section of my code: <script type="text/javascript" src="http:/ ...

JQuery's is() function is returning a true value

I am facing a dilemma with a particular string that can either represent text or an anchor tag with text. I have implemented some logic to always return the text in the following way: $(text).is('a') ? $(text).text() : text; The idea behind ...

Tips on utilizing CSS modules in React without changing class names

After starting to use css modules in my react project, I quickly realized the struggle of changing classnames to fit the requirements of css modules. For example, if we have a component using regular css: import React from 'react' import ". ...

Vue Js and form-data Event: A deeper look into handling form

Hey there #Vue.js2 I'm facing an issue while trying to create a function that is called within a form submit event. This particular function needs both the EVENT and ID as parameters. The problem arises when I call this function, as I am unable to spe ...

Issue with Vue/Nuxt 3: Unable to modify properties of null when setting 'textContent'

I am currently facing an issue with a function that is designed to switch words every few seconds. The functionality itself is working fine, but I keep encountering the following error intermittently in the VSC console: TypeError: Cannot set properties o ...

How do I retrieve the enclosure URL in the Alexa Skill FeedHelper.js file?

I am currently working on a project to create an Alexa feed skill using a blueprint provided by Amazon. The blueprint involves calling RSS feeds from a URL, transforming them into JSON format, and saving them on Amazon S3. The code responsible for this fu ...

Troubleshooting Vue.js: Overutilization of EventBus causing repeated function calls

I'm in the process of implementing an 'undo delete' feature. To achieve this, I am utilizing an Event Bus to broadcast an event to two separate components as shown below: Undo.vue: EventBus.$emit(`confirm-delete-${this.category}`, this.item ...

Adobe Acrobat does not run JavaScript code in documents that are submitted for electronic signatures

Lately, I have been experiencing issues with pdfs that contain embedded javascript. The strange thing is that the javascript functions perfectly in the Acrobat Pro DC app but fails to execute when the document is sent for signature. To troubleshoot, I cre ...

Incorporate an image into a Component template by utilizing a URL that is provided as a property of the Component in Vue and Vite

One of the challenges I faced was setting the 'src' attribute of an image in a Component's template from a property value. Initially, I attempted to do this as follows: Gallery View, where the Component is called multiple times <script s ...

"How can I exclude empty fields from the form.serialize function in jQuery when using php?" is not functioning as expected

I am facing an issue with using How do I use jQuery's form.serialize but exclude empty fields. Despite following a minimal example that directs to a php script: <html><head> <script src="jquery.min.js"></script> <script typ ...

Utilize PHP's file_get_contents to trigger the Google Analytics tracking pixel

For certain goals I have set up in Google Analytics, I am unable to use the JavaScript tracking. Instead, I am interested in achieving the same result by making a call with PHP. One solution that seems straightforward to me is to invoke the URL of the tra ...

Would you prefer to generate fresh HTML using JavaScript or dynamically load an existing HTML layout using AJAX?

I have a project where I need to generate a large amount of HTML that isn't currently on the page. Up until now, I've been using jQuery to construct the page piece by piece with JavaScript, adding divs and adjusting layouts as needed. Lately, I ...

Navigate through content easily using the arrow keys on your keyboard with the help of Easy Slider

I'm attempting to modify the Easy Slider in order to enable navigation of the slideshow with the arrow keys on the keyboard. I made adjustments to the javascript's animate function, changing it from: default: t = dir; break; ...to: default: t ...

Is it possible to generate an array of strings from the keys of a type or interface?

Imagine a scenario where we have a type or interface defined as NumberLookupCriteria: type NumberLookupCriteria = { dialCode: string; phoneNumber: string; } or interface NumberLookupCriteria { dialCode: string; phoneNumber: string; } Is there a w ...

The Google Maps geocoding service fails to provide accurate location information

I am currently attempting to utilize the Google Maps Geocoding API within my JavaScript code. Below is the snippet I have written: var geocoder = new google.maps.Geocoder(); function geocodeAddress() { var address = document.getElementById("address").v ...

Avoiding jQuery selector

What is the reason for the selector working in the first example but failing in the second one? Check out jsfiddle. <div id="hello[1][2]_world">&nbsp;</div> <textarea id="console"></textarea> <script> $(document).re ...

Utilizing Jquery functions within the AngularJS framework

Utilizing Uikit along with its pagination feature, I am attempting to implement this function for changing the page: $('[data-uk-pagination]').on('uk-select-page', function(e, pageIndex){ console.log("page " + pageIndex); ...

What is the best way to deliver hefty files to users? Utilize the node-telegram-bot-api

bot.sendDocument(id, 'test.zip'); I am facing an issue while trying to send a 1.5GB file using the code above. Instead of being delivered to the user, I receive the following error message: (Unhandled rejection Error: ETELEGRAM: 413 Request En ...

Link with javascript onClick attribute

Is there a way to combine a JavaScript "onClick" event with an HTML "a href" link? I would like for the first step to be triggered upon clicking the link using "onClick", and if that is successful, the user should then be redirected to another page using t ...