Display HTML based on user input (via checkbox selection)

Question

I currently have this, which works. However, I would prefer to not have the HTML that displays being stored inline in array like this, but in a more flexible / optimal way so I can have more text / HTML without being restricted to having it inline within the quotes.

texts = {
      item1: 'Item Box 1 Content <strong>html</strong> right here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      item2: 'Now its Item Box 2 <strong>html</strong> content here ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      item3: 'This is the example <strong>html</strong> of Item box 4! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      item4: 'Item box number 5 <strong>html</strong> content is here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    }
    $("#container").css('background', '#fff')

     $('.download-pdf').click(function() {

      notChecked = $("input[type=checkbox]:not(:checked)").parent();
      notChecked.hide();
      yesChecked = $("input[type=checkbox]:checked").parent();

      $.each(yesChecked, function( index, el ) {
        $(el).show().html(texts[$(el).attr('id')]);
      });

full js code for better clarity.

texts = {
      item1: 'Item Box 1 Content <strong>html</strong> right here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      item2: 'Now its Item Box 2 <strong>html</strong> content here ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      item3: 'This is the example <strong>html</strong> of Item box 4! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      item4: 'Item box number 5 <strong>html</strong> content is here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    }
    $("#container").css('background', '#fff')

     $('.download-pdf').click(function() {

      notChecked = $("input[type=checkbox]:not(:checked)").parent();
      notChecked.hide();
      yesChecked = $("input[type=checkbox]:checked").parent();

      $.each(yesChecked, function( index, el ) {
        $(el).show().html(texts[$(el).attr('id')]);
      });

     var pdf = new jsPDF('p', 'pt', 'a4');

      pdf.addHTML(document.getElementById('records'), function() {

          setTimeout(function(){
           location.reload();
           },3000);

      }); 

      var file = 'test';
      if (typeof doc !== 'undefined') {
          doc.save(file + '.pdf');
      } else if (typeof pdf !== 'undefined') {
          setTimeout(function() {
              pdf.save(file + '.pdf');
              // $("#item4").hide();

          }, 2000);
      } else {
          alert('Error 0xE001BADF');
      }

  });

Answer 1

You should execute most if not all your code inside the callback for the download click handler. Your code gives you the illusion that it's working because you're setting timeouts. If the user sits idle for longer than the timeouts your script will break.

Consider adding listeners to your checkboxes that bind to a model in your application. This will reduce the amount of dom parsing you have to do manually.

You also have some global variables defined in your script which might interfere with other scripts you've included in your page.

I...didn't test any of this though.

var checkboxPDF = (function($model, $config, $err, $data, $view) { 

    //keeping the pdf config options here will let you determine how you want the pdf to look case by case everytime you use this module. It's how jquery plugins work anyway.
    return function(options) {
        $view.setBg();
        //uses a closure to keep track of the model outside the callback context
        $view.bindToModel($model);
        $view.readyDownload(function() {
            //setting up the pdf is the meat of your business logic
            var pdf = new jsPDF(options.orientation, options.pt, options.size);
            $view.update($model, $data);
            //I'm not entirely sure what is in your records div
            $view.addHtml(pdf);
            //In your code I don't know where the doc variable comes from
            if (doc)
                doc.save(pdf + $config.filename);
            else if (pdf)
                pdf.save(pdf + $config.filename);
            else
                alert($err['not defined']);
        });
    };

})(

//keep your model separate from your controller
{},

//pdf configuration, it can be here because it has nothing to do with your application logic
{ filename: 'test' extension: '.pdf' },

//you can keep your error configuration separate as well
{ 'not defined': 'Error 0xE001BADF' },

//static data here, or you could put this directly into the html and toggle classes between visible/hidden in your view logic.
{
    '#idA': 'item 1 box content: ...',
    '#idB': 'item 2 box content...',
    '#idC': 'item 3 box content...'
    '#idD': 'etc...'
},

//organized methods that are concerned with the view/model
{
    setBg: function() {
        $("#container").css('background', '#fff')
    },
    addHtml: function(pdf, callback) {
        pdf.addHTML(document.getElementById('records'), callback || null);
    },
    bindToModel: function(model) {
        $("input[type=checkbox]").on("click", function(e) {
            model[this.id] = e.target.value;
        });
    },
    readyDownload: function(callback) {
        $('.download-pdf').click(function() {
            callback();
        });
    },
    update: function(model, data) {
        for (var p in model) {
            if (model[p] === true) {
                $(p).show().html(data[p]);
            }
        }
    }
);

checkboxPDF({orientation: 'p', pt: 'pt', size: 'a4'}); //appends your listeners, waits for user to check boxes and downloads pdf once they click on a download handler