Issue
I want to nest tags within other tags in order to enable or disable a download button for a chat bot. However, nesting tags is not allowed. Is there an alternative way to accomplish this? Below is my full HTML file.
{% extends "layout.html" %}
{% block content %}
<!-- Begin page content -->
<div class="overflow-auto">
<br>
<br>
<div id="list-group" class="list-group w-auto">
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
<img src="https://digital-practice.ams3.cdn.digitaloceanspaces.com/static%2Fapp%2Fimg%2Fopenai-logo.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<p class="mb-0 opacity-75">How may I help you?</p>
</div>
</div>
</a>
</div>
<div class="input-group mb-3">
<textarea id="chat-input" class="form-control custom-control" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
<span id="gpt-button" class="input-group-asson btn btn-primary">Ask ChatGPT</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script>
$("#gpt-button").click(function(){
chat();
});
$("#chat-input").keypress(function(event){
if(event.which==13){
chat();
}
});
function chat(){
var question = $("#chat-input").val();
console.log(true);
$("#chat-input").val('');
let html_data = '';
html_data += `<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
<img src="{{ url_for('static', filename='images/ai4eic-logo.png') }}" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<p class="mb-0 opacity-75">${question}</p>
</div>
</div>
</a>`;
$("#chat-input").val('');
$("#list-group").append(html_data);
$.ajax({
type: "POST",
url: "/chat",
data: {'prompt': question},
success: function (data) {
let gpt_data = '';
gpt_data += `
<script>
let butt=document.getElementById("download-button");
if((data.answer).includes("python")){
butt.classList.add("fadeIn");
butt.disabled = false;
}
</script>
<style>
p{word-break: break-all;
white-space:normal;}
#download-button {
transition: opacity 1s;
opacity: 0;
}
#download-button.fadeIn {
opacity: 1;
}
</style>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
<img src="https://digital-practice.ams3.cdn.digitaloceanspaces.com/static%2Fapp%2Fimg%2Fopenai-logo.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div class="a">
<p class="mb-0 opacity-75">${data.answer}</p>
<button type="button" disabled="true" id="download-button" class="btn btn-primary">Download Code</button>
</div>
</div>
</a>`;
$("#list-group").append(gpt_data);
}
});
};
</script>
{% endblock content %}
The problematic code block is the one that includes
<script>
let butt=document.getElementById("download-button");
if((data.answer).includes("python")){
butt.classList.add("fadeIn");
butt.disabled = false;
}
</script>
I tried putting the script into a separate .js file and calling the .js file from the HTML file. However, that does not seem to work, I think because the Javascript code calls private class properties such as #chat-input, etc.
Solution
<button type="button" disabled="true" id="download-button" class="btn btn-primary">Download Code</button>
Try putting the disabled as a calculated value instead of a hardcoded true value
<button type="button" disabled="${!(data.answer).includes("python")}" id="download-button" class="btn btn-primary ${(data.answer).includes("python") ? 'fadeIn' : ''}">Download Code</button>
Answered By - ALI MANSOOR
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.