Normaly I load a javascript file in html:
<script src="v/0.2/strapdown.js"></script>
This file strapdown.js itself loads css files (line 69 - 83): Github > strapdown.js
// Stylesheets
var linkEl = document.createElement('link');
linkEl.href = originBase + '/themes/'+theme+'.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = originBase + '/strapdown.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = originBase + '/themes/bootstrap-responsive.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
Now I want to load this javascript file dynamically with jQuery.getScript():
$.getScript("v/0.2/strapdown.js").done( function( ) { console.log( "loaded" ) } );
The javascript file is loaded, but it does not load the css files.
When I state the css file directly in the html file it works:
<link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen" charset="utf-8">
But I want to have it dynamically, as it worked before.
Heres the code with the missing css files. Available on Github > test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
<!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
charset="utf-8"-->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
function showmd( value ) {
$( "xmp" ).html( value );
$.getScript("v/0.2/strapdown.js").done( function( ) { console.log( "loaded" ) } );
}
$.get( "readme.md", function( data ) {
showmd( data );
}, 'text');
</script>
</body>
</html>
How do I get the css files dynamically loaded via the original script, that I load via jQuery.getScript()?
If you try to load local resources with Ajax, you will face problems with your browser security.
This is what I faced when I used your code without modifications.
Here is the code i used to make it work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
<!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
charset="utf-8"-->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
// http://stackoverflow.com/questions/11917734/jquery-ajax-call-success-how-do-i-change-a-global-variable-in-the-wrapper-javas
// http://stackoverflow.com/questions/7598821/return-responsetext-from-jquery-get
function showmd( value ) {
$( "xmp" ).html( value );
$.getScript("http://strapdownjs.com/v/0.2/strapdown.js").done( function( ) { console.log( "loaded" ) } );
}
$.ajax({
url: "https://raw.githubusercontent.com/jerik/jerik.github.io/master/readme.md",
method: "GET",
success: function(data) {
showmd(data);
}
});
</script>
</body>
</html>
You have to download the css, wait for it to finish download and them use it
$.ajax({
url: 'includes/page/message/index.css',
dataType: 'text',
success: () => {
$("head").append("<link>");
let css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: 'includes/page/message/index.css'
});
}
});
Found a solution that works with http and https requests. I create an script tag with the required information and append it to the head tag. Firebugs reports a waring Synchrone XMLHttpRequests in the Main-Thread should not be used... but it works for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
function showmd( value ) {
$( "xmp" ).html( value );
$( 'head' ).append( '<script src="v/0.2/strapdown.js"><\/script>' );
}
$.get( "readme.md", function( data ) {
showmd( data );
}, 'text');
</script>
</body>
</html>
Related
I have a problem getting a specific value to append on my progressbar.
My code is like this:
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQueryUI Progressbar with JSON</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
and my js is like this:
$(function() {
$.ajax({ dataType:"json",
url: "https://api.myjson.com/bins/l3gwv",
success: function(data){
$( "#progressbar" ).progressbar({
value: data.ID
});
console.log(data.ID);
}
});
});
I just want to get my selected id to be my progressbar, and my json its look like this :
[{"ID":71,"Harga":"2.000.000","Bird_Name":"Eurasian Collared-Dove"},
{"ID":82,"Harga":"8.000.000","Bird_Name":"Bald Eagle"},
{"ID":93,"Harga":"19.000.000","Bird_Name":"Cooper's Hawk"}]
Try this:
$(function() {
$.ajax({ dataType:"json",
url: "https://api.myjson.com/bins/l3gwv",
success: function(data){
var len = data.length;
var i;
for (i = 0; i < len; i++) {
$( "#progressbar" ).progressbar({
value: data[i].ID
});
console.log(data[i].ID);
}
}
});
});
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQueryUI Progressbar with JSON</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
data is an array so manage it in the loop.
I have an iframe and i try to add it header, with ajax, but it does'nt work. A js method in page we try to put in iframe cause an issue :
method not defined and cause a blank page. The page we try to include is asp.net (flexicapture from abbyy)
$.ajax({
type: "GET",
url: "http://172.20.30.8/FlexiCapture12",
contentType: "application/json",
beforeSend: function(xhr, settings){
xhr.setRequestHeader("some_custom_header", "foo");},
success: function(data){
console.log(data);
$("#myFrame").attr('src',"data:text/html;charset=utf-8," + escape(data));
}
});
any idea ?
here the error:
Uncaught ReferenceError: Ui_Model is not defined
with simple tag iframe, it works but we need to inject header or cookie into
PS: this is the content iframe
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>UI</title>
<link rel="shortcut icon"
href="/FlexiCapture12/Login/Content/images/TabIcon.ico" />
<link href="/FlexiCapture12/Login/WebCommon/WebCommonCss?
v=QrXq6ljGiWHstlXVpAXLMNzZ6cyaoydsT5gsI629ER01" rel="stylesheet"/>
<link href="/FlexiCapture12/Login/Content/css?
v=CcVW8jp8169r4jTB7Wkw2N1TrY1RMIrcOXVeOL3LaMo1" rel="stylesheet"/>
<link href="/FlexiCapture12/Login/Content/general/css?
v=I0nviCV6U1d3tl9uZqDz0tVCXIeZOrYHEACjHLKxhVA1" rel="stylesheet"/>
<script src="/FlexiCapture12/Login/WebCommonExternal?
v=hK5886_opsMQ3AxjzkVhwRtKuughLHC1pqmGAGdDaZw1"></script>
<script src="/FlexiCapture12/Login/WebCommon?v=yfkjMl06jF6DhlPjz-
6CxMqczHjqZIjKpnCyLxwAy8s1"></script>
<script src="/FlexiCapture12/Login/bundles/modernizr?
v=inCVuEFe6J4Q07A0AcRsbJic_UE5MwpRMNGcOtk94TE1"></script>
<script src="/FlexiCapture12/Login/bundles/signaljs?v="></script>
<script src="/FlexiCapture12/Login/bundles/moment?
v=2v8Tw1bW5jhBpfywRx36sJR1xZCerziad7XUy33UKio1"></script>
<script type="text/javascript"
src="/FlexiCapture12/Login/Content/JsEnvironment"></script>
<script src="/FlexiCapture12/Login/bundles/standart?
v=m5NAFE0GQZHGrd4XGUYauBkrXpxuQbhKpEOsnNk2C8k1"></script>
<script
type="text/javascript">Ui_Model({"PageId":"Login","InstallationLanguage":"en-
US","SupportedLanguages":[{"FineObjectsCode":0,"Id":"en-US","Name":"English
(United States)"},{"FineObjectsCode":-1,"Id":"en-GB","Name":"English (United
Kingdom)"},{"FineObjectsCode":1,"Id":"ru","Name":"Русский"},
{"FineObjectsCode":2,"Id":"de","Name":"Deutsch"},
{"FineObjectsCode":3,"Id":"fr","Name":"Français"},
{"FineObjectsCode":5,"Id":"es","Name":"Español"},
{"FineObjectsCode":26,"Id":"ja","Name":"日本
"}],"CurrentUserInfo":null,"PermissionRequests":null,"UserPermissions":0,"Avai
libleStations":null,"NoDatabase":false,"DoTenantsExist":false});
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>
If I copy-paste the content of header.html page after the body, then everything works fine.
when I tried to include the header.html page using .load() function then the CSS won't work properly.
Here is the online sample codepen
if I include the content of div="inc" from an external file like header.html than drop-down menu will overlap each other.
Hope this helps.
Your scripts.js file contains
$(window).load(function(){
"use strict";
// Align Elements Vertically
alignVertical();
alignBottom();
$(window).resize(function(){
alignVertical();
alignBottom();
});
// Isotope Projects
});
The scripts.js file you have provided is trying to add some styling to the header.html.
but it's not doing the expected behaviour because the scripts.js file is loading before the header.html file.
Just add this at the end after your header content
<script src=assets/js/scripts.js></script>
This will let the header.html content load first and than scripts.js
Also here is the github repo code structure
https://github.com/siddhartharora02/jsLoad
Try this
<link href="../assets/css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/smooth-scroll.min.js"></script>
<script src="../assets/js/scripts.js"></script>
For your original issue,
If you want to include html content dynamically, here is a method to do it,
HTML,
<link data-include="includes/header.html">
JS,
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
Hope this will help!
Try this,
Now you can include any partial content as you want.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<link data-include="header.html">
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
});
</script>
</body>
</html>
Try using like this,
$(document).ready(function() {
$.get('header.html').success(function(data){
var headerHTML = data;
$('#inc').html(headerHTML);
});
});
How about this:
Instead of using a load method, use an iframe
<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>
Edit
<iframe id="inc" src="header.html" class="hidden"></iframe>
css
iframe.hidden {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: hidden;
}
iframe.hidden.load {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: block;
}
JS
!!! Here trigger means the trigger when you want it to load such as onClick, onMouseover, etc !!!
Requires jQuery
$('iframe.hidden').trigger(function() {
$(this).addClass('load');
});
In one of my jsp file I am calling the "basicEn.js" in the head
<head>
<meta charset="UTF-8">
<meta name=viewport
content="width=device-width, initial-scale=1, maximum-scale=1">
<META http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="javascript/jquery-3.1.0.min.js"></script>
<script src="javascript/basicEn.js"></script>
<title>Insert title here</title>
</head>
However when I checked from the firebug the "basic.js" is running. Probably, I am missing a tiny thing but I am really stuck.
//basicEn.jsp
$(document).ready(function() {
// Your event
$('li').click(function() {
var id = $(this).attr('id');
$.ajax({
url:'GetPhone',
data:{id : id},
dataType:"text",
type:'get',
cache:false,
success:function(data){
//alert(data);
var successUrl = "SelectedFeature-en.jsp";
window.location.href = successUrl;
},
error:function(){
alert('error');
}
}
);
});
});
I've been using Aloha Editor to create an example of a simple editor, but I haven't succeed to getting it to work in Opera. The menu doesn't appear and the textarea is not editable.
In all other browsers seems to work fine, but sometimes Chrome needs to refresh the page to work.
This is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" media="screen" />
</head>
<body>
<textarea id="content"></textarea>
<script src="//cdn.aloha-editor.org/latest/lib/require.js"></script>
<script src="//cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/table,common/list,common/link,common/block,common/undo,common/contenthandler,common/paste"></script>
<script src="notes.js"></script>
</body>
</html>
And this is the javascript code (inside notes.js):
var Aloha = window.Aloha || ( window.Aloha = {} );
Aloha.settings = { sidebar: { disabled: true } };
Aloha.ready(function () {
Aloha.jQuery('#content').aloha();
});
I'm answering my own question after reading the comment from Inshallah.
The problem was that the JavaScript variables Aloha and Aloha.settings should be set before including Aloha.
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" media="screen" />
</head>
<body>
<textarea id="content"></textarea>
<script src="//cdn.aloha-editor.org/latest/lib/require.js"></script>
<script>
var Aloha = window.Aloha || ( window.Aloha = {} );
Aloha.settings = { sidebar: { disabled: true } };
</script>
<script src="//cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/table,common/list,common/link,common/block,common/undo,common/contenthandler,common/paste"></script>
<script src="notes.js"></script>
</body>
</html>
JavaScript code (inside notes.js)
Aloha.ready(function () {
Aloha.jQuery('#content').aloha();
});