How to make sure that js and html button call js runing in streamlit

Using Streamlit
, ,
1

I waana run the js under code in stramlit, but the button and modal is not valid
I using

st.write('''
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#placeholder {
  height: 100%;
}

.sub-placeholder {
  height: 100%;
}
</style>
/* This is from onlyoffice */
<script src="http://10.1.51.23:8066/web-apps/apps/api/documents/api.js"></script>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="placeholder" style="height: 100%"></div>
  </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var modal = document.getElementById("myModal");
  var span = document.getElementsByClassName("close")[0];

  // Event delegation for modal buttons
  document.addEventListener('click', function(event) {
    if (event.target.classList.contains('modal-btn')) {
      var url = event.target.getAttribute('data-url');
      updateModal(url);
      modal.style.display = "block";
    }
  });

  // When the user clicks on <span> (x), close the modal and clear placeholder content
  span.onclick = function() {
    modal.style.display = "none";
    clearPlaceholder();
  };

  // Update modal content function
  function updateModal(url) {
    // Clear previous content
    clearPlaceholder();

    if (url === '') {
      return; // No need to initialize if url is empty
    }

    var fileExtension = url.split('.').pop().toLowerCase();

    var fileType, documentType;
    switch (fileExtension) {
      case 'doc':
        fileType = 'doc';
        documentType = 'word';
        break;
      case 'docx':
        fileType = 'docx';
        documentType = 'word';
        break;
      case 'xls':
        fileType = 'xls';
        documentType = 'cell';
        break;
      case 'xlsx':
        fileType = 'xlsx';
        documentType = 'cell';
        break;
      case 'ppt':
        fileType = 'ppt';
        documentType = 'slide';
        break;
      case 'pptx':
        fileType = 'pptx';
        documentType = 'slide';
        break;
      case 'pdf':
        fileType = 'pdf';
        documentType = 'pdf';
        break;
      default:
        window.location.href = url;
        return;
    }

    // Create a new sub placeholder div
    var subPlaceholder = document.createElement('div');
    subPlaceholder.id = 'sub-placeholder';
    subPlaceholder.classList.add('sub-placeholder');
    document.getElementById('placeholder').appendChild(subPlaceholder);

    // Configure DocsAPI.DocEditor
    var config = {
      "document": {
        "fileType": fileType,
        "key": "D24A86BDE9A2",
        "title": "Example Document Title." + fileExtension,
        "url": url
      },
      "documentType": documentType,
      "editorConfig": {
        "mode": "view"
      },
      "height": "100%",
      "width": "100%"
    };

    // Initialize DocsAPI.DocEditor instance
    new DocsAPI.DocEditor("sub-placeholder", config);
  }

  // Function to clear placeholder content
  function clearPlaceholder() {
    var placeholder = document.getElementById('placeholder');
    if (placeholder) {
      placeholder.innerHTML = '';
    }
  }

  // When the user clicks anywhere outside of the modal, close it and clear placeholder content
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
      clearPlaceholder();
    }
  };
});
</script>

''', unsafe_allow_html=True)

I could saw the button on my page, but button not works and also modal is not works

 <button class="modal-btn" data-url="http://10.1.51.23:7861/knowledge_base/download_doc?knowledge_base_name=tidb%E8%80%83%E8%AF%95%E7%9B%B8%E5%85%B3%E8%B5%84%E6%96%99&file_name=pctp20240619-2.docx">pctp20240619-2.docx</button>

<button class="modal-btn" data-url="http://example.com/another-doc.pdf">another-doc.pdf</button>

This part is dynamic to repalce the data-url to show some kind of documents

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.