Code Widget content breaks page

I Need Help
1

I have this code that I need to add to a Code Widget that will create a button, with a pop up that will generate a random number…

The problem I am having is that if you visit https://liverupucams.com/walker-pass/ you see the page loads fully… if you go to my test site in https://liverupucams.com/test/walker-pass/ which has all the code below added to a Code Widget, it only shows a portion of the page, and the button still doesn’t work…

I have been having a hard time getting this to work… (this page is a joke page, for a game we play so if you check it out uh laugh it out :slight_smile:) but if you could help me out I will appreciate it…

The full HTML is:

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Walker Pass Confirmation</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

      <style>
        body {
          font-family: Arial, Helvetica, sans-serif;
          /* Center everything within the page */
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }

        table {
          font-size: 1em;
        }

        button {
          height: 32px;
          width: 300px;
        }

        .ui-draggable,
        .ui-droppable {
          background-position: top;
        }
      </style>
    </head>

    <body>
      <button id="btnOpenDialog">Click to Purchase</button>
      <div id="dialog" title="GOONLAND SECURITY">
        <p>Click here to receive your one time use Walker Pass ID.  When asked for your Walker Pass by one of our Agents, please present this number. To close this window click the 'x' icon.</p>
      </div>
      <script>
        $(function () {
          // Initialize the dialog
          $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            draggable: false,
            open: function (event, ui) {
              const min = 1100000;
              const max = 2100000;
              // Get a random number between min and max
              const randomNum = Math.floor(Math.random() * (max - min) + min);
              $('#dialog p').text('Walker Pass ID Number: #' + randomNum);
            },
          });

          // Set up a click handler to display the dialog
          $('#btnOpenDialog').click(function () {
            $("#dialog").dialog("open");
          })
        });
      </script>
    </body>

    </html>

I have managed to break it down like this, for Page-Header I have:

        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
          <style>
            body {
              font-family: Arial, Helvetica, sans-serif;
              /* Center everything within the page */
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100vh;
            }

            table {
              font-size: 1em;
            }

            button {
              height: 32px;
              width: 300px;
            }

            .ui-draggable,
            .ui-droppable {
              background-position: top;
            }
          </style>

And for the Code Widget:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <button id="btnOpenDialog">Click to Purchase</button>
          <div id="dialog" title="GOONLAND SECURITY">
            <p>Click here to receive your one time use Walker Pass ID.  When asked for your Walker Pass, present this number.</p>
          </div>
          <script>
            $(function () {
              // Initialize the dialog
              $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                draggable: false,
                open: function (event, ui) {
                  const min = 1100000;
                  const max = 2100000;
                  // Get a random number between min and max
                  const randomNum = Math.floor(Math.random() * (max - min) + min);
                  $('#dialog p').text('Walker Pass ID Number: #' + randomNum);
                },
              });

              // Set up a click handler to display the dialog
              $('#btnOpenDialog').click(function () {
                $("#dialog").dialog("open");
              })
            });
          </script>
2

Delete all content in the code widget.

Disable in app preview ( checkbox in right sidebar when you have code widget selected)

Paste in code.

In app previewing of code should only be used for html not JS as it’s executed and can break.

3

That is exactly how I did it, and it still broke…

4

If you do it externally from blocs ( edit the exported blocs site to include the code) and add the parts to the project in the same way, does it work?

If it does, compare the two and see what is changing during export.

Also try using the browsers built in inspector to check for errors on the current implementation, that might give you an idea of what is breaking.

5

@Norm I usually do a quick test with the built-in engine, but then I like to export and test with all the browsers.

I’m going to try your suggestion to see what is different and repost back…

1 Like
6

@Norm
I was able to test it properly like you suggested, and I was able to figure out how to break the code apart in the different sections of the workflow… I ended up doing adding:

<style>
  .page-container {
  	height: 100vh;
  	overflow-y: scroll;
  }
</style>

to the page header so I could call the container from another script and make it do what I wanted to do.

1 Like