Break the page after generating specific charts with JQuery

I have a task to create multiple charts, where the first page needs to include a header and the first 8 charts. How can I insert a page break after the 8th chart and move on to a second page without a header? Each student has different subjects and scores, resulting in multiple charts for each report.

    var count = 1;
    $.get('/rest/report/' + id, function (data) {
        data.subjects.forEach(function (subject, index) {
            console.log(index);
            var container = $('<div class="one-chart"></div>')[0];
            if (count < 8) {
                $('.charts-container').last().append(container);
                renderOneChart(container, subject.name, subject.scores);
                count++;
            }

        });

    });
    $('body').append('<div class="page" ></div>');

});

Answer №1

To achieve a page break after every eighth chart, you can target them using the nth-child CSS selector and apply the style page-break-after: always.

Assuming each chart has the class .chart, the code would look like this:

.chart:nth-child(8n) {
    page-break-after: always;
}

Check out this JSFiddle example to see it in action!

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

Show a delightful notification upon adding an item to the cart using AJAX, focusing on the exact count for a specific item in

Issue: I'm facing a problem where I want to show a JavaScript alert when AJAX is triggered. However, the alert only pops up successfully after I refresh the page. Here's the beginning of the function that activates the JavaScript IF cart items ...

Retrieving an array of objects from the database utilizing AJAX

I am trying to retrieve comments from a database and display them on my webpage. However, the current code is throwing a syntax error because the PHP file is not returning the JSON file properly. Here is a snippet of my PHP code (just the fetching part, n ...

The response from the Ajax request showed that the data was not

I am working on a page where I need to refresh a specific div every minute without refreshing the whole page. The div retrieves data from a PHP file that calculates the highest price in another XML file. I have learned that the most effective way to achiev ...

Encountering an Error 405 Method Not Allowed while attempting to send a PUT AJAX request to a PHP server using

I am currently working on implementing a REST-like application using PHP and jQuery. During my initial attempt, I encountered the following error: PUT http://... 405 (Method Not Allowed) To address this issue, I added the following lines at the beginn ...

Learn how to create a registration form using Ajax, PHP, and MySQL

So far I've been working with HTML <form id="account_reg" action="reg.php" method="post"> <div id="response"></div> <div class="input"> <label>Login</> <input name="login" type="text" class=" ...

Exploring a website's HTML structure with Beautiful Soup in Python to pinpoint and extract certain tags

Here is the HTML code for reference: https://i.sstatic.net/Bs2DW.png I am attempting to extract specific information using Python code from the tags following "product-card__title" and "product-card__price". In this case, I need it to return the name and ...

Adjust the navigation menu to display or hide as the page is being scrolled

Implementing an offset to display/hide the navigation menu when the page is scrolled 100px. Attempted to modify from lastScroll = 0 to lastScroll = 100 but it did not work as expected. Jquery: Fiddle // Script lastScroll = 0; $(window).on('scroll&ap ...

Choosing the image that represents your website in Safari web previews

Every time I check iCloud.com on my Safari top sites, the thumbnail is always the same. I'm curious about how I can automate this for my own website. ...

Mudblazor - Tap or click within the designated area to trigger the drag and drop functionality

I have incorporated the Mudblazor CSS framework into my Blazor WebAssembly project. Within the drag and drop zone, I have included a button that is supposed to remove each uploaded image. However, when I click on the remove button, it only opens up the fi ...

What is the best way to utilize CSS to center an element in relation to the scroll bar?

For a group project, I successfully centered a div on a webpage. However, I ran into an issue where the website's contents are centered taking the scroll bar width into consideration. This means that the web page contents adjust to be centered without ...

Refreshing the value of multiple radio buttons and sending them via AJAX

I have a group of radio buttons here. <input class='required' type='radio' name='Tbl' id='get_this1' value='tbl_a'> <input class='required' type='radio' name='Tbl' id ...

Creating image links in this jQuery Slider plugin: A beginner's guide

Currently, I am attempting to insert links into each photo within the slider. While I have successfully done this on two other websites, I am encountering difficulties due to variations in the code structure. <a href="http://www.google.com I have expe ...

A guide on extracting data from various HTML elements effectively with JavaScript

I'm searching for a universal technique to extract values from multiple HTML elements. For instance: <div>Experiment</div> <select><option>Experiment</option></select> <input value="Experiment" /> These thr ...

Ways in which an ajax response containing a string can be utilized to populate an HTML table by leveraging PHP, MySQL, and

Is there a way to populate an HTML table with data retrieved from an AJAX call? I have a string returned from the AJAX request that looks like this: 1-1.00-2013-2014,2-2.00-2013-2014,3-3.00-2013-2014,4-4.00-2013-2014,6-5.00-2013-2014,8-6.00-2013-2014,10-7 ...

Parsing CSV files using AngularJS

I am currently developing a CSV file parser using node and Angular. When a user uploads a CSV file, it is processed on the server side with node and the csv-parse library. This results in an array of objects based on the input CSV file. On the Angular si ...

Using .on as a substitute for live will not yield the desired results

I've been aware for some time now that the .on method is meant to replace .live, but I just can't seem to get it working. I've attempted: $(this).on('click', function(){ // Do something... }) $(this).on({ click: function ...

When working with ASP.NET MVC, I encountered an unexpected issue where a JSON response was sending me a file instead of

After receiving JSON data, I observed that instead of updating the jQuery accordion, it prompts to save or open a file. Below is my code and controller setup. I have integrated a jQuery modal dialog for editing employee details using a partial view. When c ...

Solving the Dilemma of Ordering Table Rows by Value in JavaScript

I am currently working on a table and my goal is to display rows in an orderly manner based on the sum of their columns. Essentially, I want the rows with the highest values to be displayed first, followed by rows with second highest values, and so on. Des ...

The aligning property "justify-content: space around" does not behave as expected on a line and does not provide the desired spacing

Below is the HTML code I am working on: <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta na ...

Angular not functioning properly with alert windows

Here is a snippet of code where I am attempting to create an alert when a button is clicked: <!DOCTYPE html> <html> <head> <title></title> </head> <body ng-app> <button ng-click="alert('test')"> ...