Skip to content

Instantly share code, notes, and snippets.

@Mgregchi

Mgregchi/JQuery-load-and-use-content.html

Created October 27, 2021 15:03
Show Gist options
  • Save Mgregchi/2b5bfce92f0e27ee43efc2af70aa91a3 to your computer and use it in GitHub Desktop.
Save Mgregchi/2b5bfce92f0e27ee43efc2af70aa91a3 to your computer and use it in GitHub Desktop.
Download ZIP
Access and use html elements from a page loaded with JQuery
Raw
JQuery-load-and-use-content.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name="author" content="Mgregchi, Michael Amadi, @Mgregchi">
<meta name="email" content="[email protected]">
<title>How to work with JQuery load() contents</title>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet' onerror="">
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif
}
h1 {
font-size: 24px;
}
h2 {
font-size: 24px;
}
h1,h2{
color: rgb(4, 201, 69);
}
.b-divider{
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.contain {
width: 500px;
height: 500px;
position: relative;
}
</style>
<div class="container-fluid mb-4">
<div class="justify-content-center text-center p-4">
<h1>
<b>Shopping Basket:</b>
</h1>
<!--div class="fixed-bottom p-5">
<div class="">
<input type="checkbox" class="form-control-sm" id="slide">
<label class="form-control-label" for="slide">Toggle here to switch between Vanila and JQuery</label>
</div>
</div-->
<div class="bg-success mb-4 shadow-5 shadow" id="container">
<div class="contain">
<h2> Loaded contents will appear here<h2>
</div>
</div>
<button id="loader" class="btn-lg btn-success btn-block">Click to load content</button>
</div>
</div>
<div class="b-divider"></div>
<script src="load-content-method-1.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment