How to avoid too much html in JQuery?

Question

I'm not liking how my JQuery is after making some dynamic buttons, or other dynamic things. For example, when I have checkboxes marked, I add a button that is called "Download Selected" and "Remove Selected". Of course, there are many more JQuery + HTML things in my site.

I'd like to know how I can make my code better, not spaghetti looking.

Thanks a lot!

  $(document).on('change', '.docListCheckbox', function(event){
    if( $('#resultsContainer').find('.docListCheckbox:checked').length > 0 )
    {
      if( ! $('#download-sel').length > 0 )
      {
        var downSelectionBtn = '<button id="download-sel" class="button-small button-blue" type="button">DESCARGAR MARCADOS</button>';
        var delSelectionBtn = '<button id="delete-sel" class="button-small button-red" type="button">ELIMINAR MARCADOS</button>';
        $('#selection-controls').append(downSelectionBtn);
        <?php if( SwHelper::checkAccess('Docusearch.Documento.Eliminar') ): ?>
        $('#selection-controls').append(delSelectionBtn);
        <?php endif; ?>
      }
    }
    else
    {
      if( $('#download-sel').length > 0 )
      {
        $('#download-sel').remove();
        <?php if( SwHelper::checkAccess('Docusearch.Documento.Eliminar') ): ?>
        $('#delete-sel').remove();
        <?php endif; ?>
      }
    }
  });


 $(document).on('click', '#docActionEdit', function() {
    var button = $(this);
    var isToggled = button.data('toggled');
    $('#docDataEditor').slideToggle({
      duration: 1000,
      easing: 'easeOutBounce',
      start: function(){
        if(isToggled == 'false') {
          button.html('EDITAR');
          button.data('toggled', 'true');
          $('#docActionSave').remove();
        }
        else {
          button.html('CANCELAR');
          button.data('toggled', 'false');
          $('#docAvailableActions').prepend('<button id="docActionSave" class="button-small button-green">GUARDAR</button>');
        }
      }
    });
  });

Treat your HTML as you would treat any kind of constant. Define them before hand (either in variables or separate files) and use as needed. — superM, Feb 18 '14 at 12:54

score 3 · Accepted Answer · edited Apr 12 '17 at 07:31

Note: I would be more worried about mixing PHP and JavaScript, like you do in your example.

Typically, it is bad practice to use language X to generate code in language Y.

It also reminds me of this The Daily WTF article: Client-side PHP.

To answer your question:

The easiest way would be to keep HTML inside HTML. Why are buttons added dynamically, and don't exist in the version which is shown to people with no JavaScript? If they can be used only with a feature which requires JavaScript, shouldn't it be possible to have the buttons directly in HTML, hidden by default, and then shown with JavaScript on demand?
If there are large pieces of HTML (not the case in your example), generate them server-side and then load them on demand through AJAX.
If there are pieces of HTML which are duplicates of HTML generated server-side (not the case in your example, I imagine), generate them server-side and then load them on demand through AJAX, avoiding code duplication (which is, in the case where two languages are involved, particularly difficult to detect later).
If you just need to add short amounts of HTML code, the comment by superM already gives you the answer: just put the HTML in a variable you'll treat as a constant in your code.

When relevant, don't forget to use templates. Google Closure Templates is one example of templating with JavaScript.

Thanks for the answer, certainly the "hidden" html approach is better. My JS is parsed via PHP (file.js.php), not like ClientSide PHP article. It's dirty but it is the solution I found to enable and disable buttons, but maybe I should make this in PHP and in JQuery look if it exists and then enable it. — JorgeeFG, Feb 18 '14 at 13:25

How to avoid too much html in JQuery?

1 Answers1