Question 418083 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Form generating twice in Apps Script using JQuery

While creating a small WebbApp with Google Apps Script and JQuery, I am struggling with a form which generates itself twice…

My app is composed of 4 files below :

Code.gs

function doGet(request) 
{
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

function include(filename) 
{
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Index.html

<!DOCTYPE html>
<html>
  
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.js" type="text/javascript"></script>
  </head>
  
  <?!= include('Javascript'); ?>

  <body>
    <div>
      <button type="button" class="BTN_new">Show</button>
      <button type="button" class="BTN_hide">Hide</button>
    </div>
    <div class="section Screen DataScreen"></div>    
    <?!= include('Templates'); ?>
  </body>

</html>

Javascript.html

<script>  
  $(document).ready(function($)
  {  
    $('.Screen').hide();
 
    $(document).on('click', '.BTN_new', function(event) {
      var GetTemplateData = $('.New_Project').html();
      $('.DataScreen').html(GetTemplateData);
      $('.DataScreen').show();
    });

    $(document).on('click', '.BTN_hide', function(event) {
      $('.Screen').hide();});
    });
</script>

Templates.html

<div class="Screen New_Project" style="display:none;">
    <div id="home">
      <script> 
        var elements = ["room1", "room2"];
        var c_room1 = 0;
        var c_room2 = 0;

        for (var i = 0; i < elements.length; i++) {
          document.getElementById("home").innerHTML += '<div>'+ elements[i] +'</div><div><div id='+ elements[i] +'><button type="button" id="'+ elements[i] +'_minus">-</button><span class='+ elements[i] +' disabled></span><button type="button" id="'+ elements[i] +'_plus">+</button></div></div>';
        }
      
        $('#room1_plus').click(function(){ c_room1++; $('.room1').html(c_room1);});
        $('#room1_minus').click(function(){ c_room1--; $('.room1').html(c_room1);});
        $('#room2_plus').click(function(){ c_room2++; $('.room2').html(c_room2);});
        $('#room2_minus').click(function(){ c_room2--; $('.room2').html(c_room2);});
      </script>
</div>

In this WebApp, the target is to increase or decrease the count number of each values through buttons. But the problem I encounter is the fact this list of "rooms" is generated twice instead of once. Here is what we see when the app is launched :
List is generated twice instead of once

Second problem which is link to the first one I guess, I noticed only the "+" and "-" buttons of the first list are working correctly. On the example below, the first room1
"+" & "-" buttons are working for both room1 values, but the second "+" & "-" buttons of room1 doesn’t have any effect on both of the values.

enter image description here

Here is what I already tried so far :

  • I tried to merge all files under one file, nothing change

  • I tried to switch "elements" variable from var to const, which solve the double generation of the list (as you can see below), but when doing so, none of the buttons are working anymore.
    enter image description here

  • When I look at the inspector, interestingly I noticed the list is generated twice when we have 2 elements, but 3 times when we have 3 elements, and so on…
    enter image description here
    enter image description here

I might be missing something is my loop I guess? I am not a professional dev, and I found my knowledge blocked at this point, any help will be much appreciated.

Thanks,

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved this issue myself by doing so :

    1. Including the JavaScript file at the end of the body tag
    2. Moving the loop directly into the JavaScript file

    If anybody as explaination about why this is working by doing so, and what's the difference, I am interested to hear it :)


  2. 0

    Form generating twice

    Answering your concern of how doing the things that you did solved your issues, the reason being is you are actually rendering the form twice by calling the template.html 2 times from different places one from your Javascript.html with these lines:

    var GetTemplateData = $('.New_Project').html();
      $('.DataScreen').html(GetTemplateData);

    and then from Index.html with this line: <?!= include('Javascript'); ?>
    and that is why moving the code that generates the form directly into the Javascript.html file solved the issue.

    References: jQuery html() Method

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search