I have a #container1 div on index.php.
I am trying to load #container1 with the contents of a #container2 div from page1.php.
I cannot figure out why this isn't working.
My file hierarchy is like this:
Project
-Js
--myJs
-index.php
-page1.php
index.php:
<!doctype html>
<html dir="rtl">
<head>
<base href="..\project\">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Assistant" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/myJs.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
page1.php
<!doctype html>
<head>
<base href="..\project\">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Assistant" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/myJs.js"></script>
</head>
<body>
<div id="container2">
<div id="hello" style="height:100px; width:100px; background-color:blue;">
<p>hello<p>
</div>
</div>
</body>
</html>
myJs.js:
$(document).ready(function(){
$("#container").load("../page1.php #container2> *");
});
index otherwise shows up just fine. when I manually put the div #hello into #container1 it displays perfectly.
page1 also shows up well.
debugging didn't tell me much. the code successfully stepped into the function, but the hello is just not showing up.
the console is empty.
You are using jQuery Slim which does not contain any AJAX functionality.
To rectify your problem you need to include the full jQuery library and change the jQuery code slightly.
Replace your jQuery script tag with the following:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Then, in myJs.js, change the code to this:
$(document).ready(function(){
$("#container").load("../page1.php #container2");
});
Notice that I have changed the string from ../page1.php #container2> * to what it is above. CSS selectors cannot be used in that way in the load function, instead you can just target one element.
The other thing you might need to do is remove the <base> tag. That's playing havoc with relative URLs.
The console will then tell you the problem Uncaught TypeError: $(...).load is not a function.
Related
The HTML code given below does not follow the stylesheet that is provided in the link. I have entered several cdn links but none seem to render to the app.
<!DOCTYPE html>
<html>
<head>
<title>Refugee Stories</title>
<link rel = "stylesheet" href = "index.css">
<meta name = "viewport" content="width = device-width,initial-scale=1.0">
<meta charset="utf-8">
<!-- jQuery Version 1.11.0 -->
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://raw.githubusercontent.com/IronSummitMedia/startbootstrap/gh-pages/templates/agency/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
...
</html>
To many jquery and not the right cdn for boostrap...
I have test it... and it seem like your boostrap code is not working... i replace then in my exemple, and make sure that your css file as the right path too :
<!DOCTYPE html>
<html>
<head>
<title>Refugee Stories</title>
<meta name="viewport" content="width = device-width,initial-scale=1.0">
<meta charset="utf-8">
<!-- Style sheet (make sure yout path is valide)-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<!-- Script -->
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
</head>
<body>
<!-- Your html -->
</body>
</html>
Hope it can help you continue your project :)
I am struggling with the performance optimizations for scripts and CSS in Asp.Net Core MVC app.
I use bootstrap with LoadCSS to preload it. FontsAwesome CSS and JavaScripts are loaded after the content.
My _Layout page looks something like this.
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script>
LoadCSS script here...
</script>
<script async defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>
<link rel="preload" as="style" type="text/css" onload="this.onload=null;this.rel='stylesheet'" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<noscript>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</noscript>
<style>
inline critical path CSS here...
</style>
</head>
<body>
<div class="container-fluid body-content">
#RenderBody()
#RenderSection("scripts", false)
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
This works great and I am getting good performance scores (94 on Google PageSpped), as long as the page does not contain an input form.
For pages that do have input form, performance optimizations stop working, and Google PageSpeed is complaining about render blocking jquery.js and bootstrap CSS. For some reason Bootstrap seems to load twice!? Below is what the PageSpeed says for the pages with the form, other pages don't have this issue.
Remove render-blocking JavaScript:
https://code.jquery.com/jquery-3.3.1.slim.min.js
Optimize CSS Delivery of the following:
https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css
https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css
I don't quite understand what is happening here. Somehow, presence of of the form seems to force bootstrap to load early and preload and LoadCSS does not "work".
The form does use client side data validation, possibly this is the culprit.
I managed to resolve the problems. I read on a number of sites that JavaScript should be placed just before closing body tag for best performance, but it seems this advice is somewhat dated. It actually makes more sense to place scripts in the head and use defer. Defer will load them in parallel without blocking rendering and execute them after and in order, which is perfect.
The CSS problem was due to some missing items in inline critical CSS, namely form-control. This was causing the entire CSS to be loaded, for some reason twice. I used penthouse to generate the critical CSS for each page then merged them.
Improved layout page:
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script>
LoadCSS script here...
</script>
<script async defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>
<link rel="preload" as="style" type="text/css" onload="this.onload=null;this.rel='stylesheet'" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<noscript>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</noscript>
<style>
inline critical path CSS here...
</style>
<script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid body-content">
#RenderBody()
#RenderSection("scripts", false)
</div>
</body>
Im building a page using Bootstrap and still feeling my way around. Im trying to load content to a div once the page has finished loading and Im using jQuery .load method. For some reason it always comes back as : load is not a function, even when Ive copied a working example from w3schools.
My code is as follows:
$(document).ready(function(){
$(".carousel-load").load('HTML/avaleht.html');
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="CSS/bootstrap.min.css" >
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<title>ASMRi</title>
</head>
<div class="carousel-load"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>
</body>
</html>
Any sort of help is much appreciated!
You're including jQuery two times in your code, and the latter (slim version) doesn't include load() function in it. Since the latter also overrides the former, you get this error.
You need to remove this line from the code:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
To see the difference between the two flavors, this post is a good start.
I am trying the jquery alert example on this webpage: http://www.tutorialscollection.com/jquery-demo/jquery-demo.php?ex=8.0_1. I'm new to using jquery and I can't figure out how to get the dependencies listed in the head section:
<head>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
Here is the full file, but probably not needed:
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#basic_button").click( function() {
jAlert('Example of a basic alert box in jquery', 'jquery basic alert box');
});
});
</script>
</head>
<body>
<p>
<input id="basic_button" type="button" value="Show Basic Alert" />
</p>
</body>
</html>
Google hosts a CDN. To make sure JQuery's libary is loaded add this into the <head> tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you are trying this on a local machine then you can download jquery here and set it up in the <head> as this:
<script src="path_to_jquery" ></script>
I found the dependencies here:
http://www.tutorialscollection.com/jquery-demo.
This serves my purposes much better than the tutorial in this question: How to generate a simple popup using jQuery
Here's my code;
<head>
<title>page title</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
</head>
<body>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<div id="accordion">
<h3>-shift title-</h3>
<div><p>-shift content here-</p></div>
<h3>-shift title-</h3>
<div><p>-shift content here-</p></div>
</div>
I'm sure i've missed something but my thinking is i've used a CDN and put the function in, the divs are not collapsing?
Problem was not including <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
I think you are using jQuery UI so you'll need to include that library below jQuery
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
I'm not totally sure, but I think you may be missing some css files.
Use this as scripts, let's see if it's working:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>