I have a question over here but was advised to create minimal & reproducible example and this is what I am trying to accomplish right now. On this version, I am trying to show the added nodes from the html results of JQuery/AJAX to the current modal. Please note that the html contents will be dynamically generated using Flask/Jinja, so I cannot target each node that is being added. The JQuery/AJAX part seems to work as the sample element were indeed added to the DOM but upon inspection the element is greyed out and is not being rendered by the browser. How can I do this better (hopefully without additional libraries) so that the added nodes are recognised and rendered properly?
On the topic of creating minimal & reproducible example, since I am new to programming, I have also looked into using online tools such as codepen.io so I could just link the codes here but I am not really sure how to have 2 html codes there (or even simulate the whole flask app online) like I can show here. If you have better idea or better tools I can use when asking questions here, please do share.
FWIW, I have uploaded the codes here.
Please note that it is missing the app.py since codepen will not allow it. It also requires index.html to be on the root which will conflict with my locally saved files since Jinja requires html to be inside templates folder.
The following are the codes.
modals.js
$(document).ready(function () {
$('#frmAddProduct').on('submit', function aj(event) {
event.preventDefault();
$.ajax({
cache: false,
type: 'POST',
url: '/products/new',
data: $('#frmAddProduct').serialize(),
datatype: 'html'
})
.done(function process(data) {
/* The modal has to be shown unless the user clicks on 'close'*/
console.log(data);
$('#modalAdd').modal('show');
let err = $(data).find(".invalid-feedback").html();
if (err) {
/* replace the contents of the modal with section from
ajax result to show validation messages*/
let cont = $(data).find("#targetModalContent").html();
// let cont = $(data).find("#targetModalContent").parent().html();
// console.log(cont);
$('#targetModalContent').html(cont);
// $('#targetModalContent').replaceWith(cont);
}
else {
/* Show success flash message on the modal instead of the original
below nav location --to do*/
console.log(data);
}
});
});
});
products.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS Offline -->
<link href="static/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap JS Offline-->
<script src="static/js/jquery-3.5.1.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.js"></script>
<title>Products</title>
</head>
<body>
<h2>
<button type="button" class="btn btn-success" data-toggle="modal"data-target="#modalAdd">
Add New Product
</button>
</h2>
<!-- ModalAdd -->
<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="modalAddTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" id="targetModalContent">
<div class="modal-header">
<h5 class="modal-title" id="modalAddLongTitle">Add New Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="" id="frmAddProduct">
<div class="modal-body">
<div class="container-fluid">
<fieldset class="form-group">
<div class="form-group row">
<label class="col-form-label col-sm-5" for="description">Product Description</label>
<input class="form-control col-sm-7" id="description" name="description" type="text" value="">
</div>
</fieldset>
</div>
</div>
<div class="modal-footer">
<div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<div>
<input class="btn btn-primary" id="submit" name="submit" type="submit" value="Add Product">
</div>
</div>
</form>
</div>
</div>
</div>
<script src="static/js/modals.js"></script>
</body>
</html>
results.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS Offline -->
<link href="static/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap JS Offline-->
<script src="static/js/jquery-3.5.1.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.js"></script>
<title>Products</title>
</head>
<body>
<h2>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalAdd">
Add New Product
</button>
</h2>
<!-- ModalAdd -->
<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="modalAddTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" id="targetModalContent">
<div class="modal-header">
<h5 class="modal-title" id="modalAddLongTitle">Add New Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="" id="frmAddProduct">
<div class="modal-body">
<div class="container-fluid">
<fieldset class="form-group">
<div class="form-group row">
<label class="col-form-label col-sm-5" for="description">Product Description</label>
<input class="form-control col-sm-7" id="description" name="description" type="text"
value="">
<div class="invalid-feedback">
<span class="col-sm-7 offset-5">Product combination is already enrolled.</span>
</div>
</div>
</fieldset>
</div>
</div>
<div class="modal-footer">
<div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<div>
<input class="btn btn-primary" id="submit" name="submit" type="submit" value="Add Product">
</div>
</div>
</form>
</div>
</div>
</div>
<script src="static/js/modals.js"></script>
</body>
</html>
app.py
from flask import Flask, render_template, redirect
app = Flask(__name__)
@app.route('/')
@app.route('/products')
def index():
return render_template("products.html")
@app.route('/products/new', methods=['GET', 'POST'])
def add():
return render_template("results.html")
if __name__ == '__main__':
app.run()
The screenshot of the browser view with the source code showing the greyed out elements is here.
Note: The results I get from searching here in stackoverflow is nothing similar to the issue I have.
As suggested by @user2182349 I've now used the built-in snippet editor for the html and the js part of the code. Now I can't get the modal to show on the snippet editor and I don't think I can simulate the AJAX part.
$(document).ready(function() {
$('#frmAddProduct').on('submit', function aj(event) {
event.preventDefault();
$.ajax({
cache: false,
type: 'POST',
url: '/products/new',
data: $('#frmAddProduct').serialize(),
datatype: 'html'
})
.done(function process(data) {
/* The modal has to be shown unless the user clicks on 'close'*/
console.log(data);
$('#modalAdd').modal('show');
let err = $(data).find(".invalid-feedback").html();
if (err) {
/* replace the contents of the modal with section from
ajax result to show validation messages*/
let cont = $(data).find("#targetModalContent").html();
// let cont = $(data).find("#targetModalContent").parent().html();
// console.log(cont);
$('#targetModalContent').html(cont);
// $('#targetModalContent').replaceWith(cont);
} else {
/* Show success flash message on the modal instead of the original
below nav location --to do*/
console.log(data);
}
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS only -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Bootstrap JS only -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>Products</title>
</head>
<body>
<h2>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalAdd">
Add New Product
</button>
</h2>
<!-- ModalAdd -->
<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="modalAddTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" id="targetModalContent">
<div class="modal-header">
<h5 class="modal-title" id="modalAddLongTitle">Add New Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="" id="frmAddProduct">
<div class="modal-body">
<div class="container-fluid">
<fieldset class="form-group">
<div class="form-group row">
<label class="col-form-label col-sm-5" for="description">Product Description</label>
<input class="form-control col-sm-7" id="description" name="description" type="text" value="">
</div>
</fieldset>
</div>
</div>
<div class="modal-footer">
<div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<div>
<input class="btn btn-primary" id="submit" name="submit" type="submit" value="Add Product">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
