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');
}
}
);
});
});
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>
im trying to make a script that load content from a web service when user scroll to the bottom of the page this is my JS code :
var serviceURL = "http://projects.dev/work/";
var current_page = 1;
var total_pages = 1;
$(function() {
Init();
});
function Init() {
getPosts();
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+20)>=$(document).height()){
if(current_page <= total_pages){
getPosts();
}
}
});
}
function getPosts(){
$.ajax({
url:serviceURL+"api/posts?page="+current_page,
dataType: "json",
async : false,
cache : false,
}).then( function(data){
total_pages = data.last_page;
$.each(data.data, function(index, post) {
$('#newsList').append("<li>"+
"<aside><img src='"+serviceURL+"cdn/"+post.picture+"'></aside>"+
"<div>"+
"<a href='post.html?id="+post.id+"'><h3>"+post.title+"</h3></a>"+
"<h4>"+post.created_at.split(" ")[0]+"</h4>"+
"</div>"+
"</li>");
});
$("#loading").hide("slow");
current_page++;
});
}
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="loading"><div id="loading-spin"></div></div>
<header><div id="brand">News</div>
</header>
<article style="width:100%;margin:0 !important;padding-right:0 !important;padding-left:0 !important;">
<ul id="newsList"></ul>
</article>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/posts.js"></script>
</body>
</html>
can you tell me whats wrong ? i can get only posts from the first time and then nothing happen when i scroll to the bottom of the page .
PS : i have a lot of posts , and the last_page variable is the total of pages i have on my DB .
i fixed it , i had to remove overflow:hidden from the container .
thanks .
I don't know why and how, but my jQuery code appears to be firing twice on any event.
Here's a part of my code:
commmon.js:
$(document).ready(function() {
$(".fpbtn-one").click(function() {
console.log("Click recorded!"); // Gets logged twice on click
$(this).parent().next().slideToggle();
});
// The rest of the code...
});
$(window).load(function() {
console.log("Setting up slides"); // Gets logged 2 on page load
// These get initialized twice
$("#div-1").responsiveSlides({
auto: true,
pager: true,
pause:true,
nav: false,
timeout: 3000,
speed: 500,
maxwidth: 482,
namespace: "transparent-btns"
});
$("#div-2").responsiveSlides({
auto: true,
pager: false,
pause:true,
nav: false,
speed: 2000,
maxwidth: 320,
});
});
HTML:
<!doctype html>
<html lang="en">
<head><link href="/assets/css/jquery.qtip.css" rel="stylesheet" type="text/css" />
<link href="/assets/custom/themes/1st-formation-theme/theme.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/efControl.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/assets/script/jquery/jquery.qtip.js"></script>
<script type="text/javascript" src="/assets/script/jquery/plugin.efiling.full.js"></script>
<meta charset="utf-8" /><script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function a(b,c,d){function e(f){if(!c[f]){var g=c[f]={exports:{}};b[f][0].call(g.exports,function(a){var c=b[f][1][a];return e(c?c:a)},g,g.exports,a,b,c,d)}return c[f].exports}for(var f=0;f<d.length;f++)e(d[f]);return e}({"4O2Y62":[function(a,b){function c(a,b){var c=d[a];return c?c.apply(this,b):(e[a]||(e[a]=[]),void e[a].push(b))}var d={},e={};b.exports=c,c.queues=e,c.handlers=d},{}],handle:[function(a,b){b.exports=a("4O2Y62")},{}],YLUGVp:[function(a,b){function c(){var a=m.info=NREUM.info;if(a&&a.agent&&a.licenseKey&&a.applicationID){m.proto="https"===l.split(":")[0]||a.sslForHttp?"https://":"http://",g("mark",["onload",f()]);var b=i.createElement("script");b.src=m.proto+a.agent,i.body.appendChild(b)}}function d(){"complete"===i.readyState&&e()}function e(){g("mark",["domContent",f()])}function f(){return(new Date).getTime()}var g=a("handle"),h=window,i=h.document,j="addEventListener",k="attachEvent",l=(""+location).split("?")[0],m=b.exports={offset:f(),origin:l,features:[]};i[j]?(i[j]("DOMContentLoaded",e,!1),h[j]("load",c,!1)):(i[k]("onreadystatechange",d),h[k]("onload",c)),g("mark",["firstbyte",f()])},{handle:"4O2Y62"}],loader:[function(a,b){b.exports=a("YLUGVp")},{}]},{},["YLUGVp"]);</script>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<link href="/assets/custom/files/favicon.ico" rel="shortcut icon" />
<link href="/assets/custom/images/system/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="/assets/custom/images/system/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="/assets/custom/images/system/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
<meta content="" name="description" />
<meta content="" name="keywords" />
<meta content="NOINDEX, NOFOLLOW" name="ROBOTS" />
<title>Some title</title>
<link href="/assets/custom/files/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/assets/custom/files/css/base.css?=v1" rel="stylesheet" type="text/css" />
<link href="/assets/custom/files/css/font-awesome.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link rel="stylesheet" href="/assets/custom/files/css/font-awesome-ie7_min.css">
<![endif]-->
<script type="text/javascript" src="/assets/custom/files/js/adobe-type.js"></script>
</head>
<body>
<!-- BODY STUFF IN HERE (REMOVED) -->
<script type="text/javascript" src="/assets/custom/files/js/jquery-mmenu-min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/jquery-anystretch-stand-min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/common.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/modernizr.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/responsiveslides_min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/socialmedia.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/jquery_atooltip_min.js"></script></div>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-4.newrelic.com","licenseKey":"204ccc8db2","applicationID":"1825150","transactionName":"YVNVYBACWxFTWxFcWVgZYkYLTFwMVl0dG0ZeRg==","queueTime":0,"applicationTime":187,"ttGuid":"","agentToken":"","userAttributes":"","errorBeacon":"jserror.newrelic.com","agent":"js-agent.newrelic.com\/nr-361.min.js"}</script></body>
</html>
What could be the reason?
Could it be that your code was manipulating the element that the code was loading into?
This answer may be the reason why it was happening:
jQuery $(document).ready () fires twice
Try putting the stuff in the body inside divs.
example. <div id = "menu"><script type="text/javascript" src="/assets/custom/files/js/jquery-mmenu-min.js"></script> </div>
I hope that works. :)
be careful for beginning use good practice when calling jquery :
!function( $ ) {
your code
}( jQuery )
like that you avoid conflict...
Then be careful when adding js script in html, you can add it twice, for example you call one js in a html file, ok but in the js you load in callback for example another page with the js inside, it will call twice your code.... i had the same probleme before with a recursive call, the js never stop to call it !!
in the main page it is better if your js will be called in several files otherwise you have to debug it....
moreover you don't paste all your code we can't help you, we can just tell in my opinion.... not a good advices often...
May be you have included your script file commmon.js twice. Check your references to it in your code.
It might be event bubbling. Use event.preventDefault(), it will prevent the default event from occuring or event.stopPropagation() will prevent the event from bubbling up.
$(document).ready(function() {
$(".fpbtn-one").click(function(event) {
event.stopPropagation();
console.log("Click recorded!"); // Gets logged twice on click
$(this).parent().next().slideToggle();
});
// The rest of the code...
});
The simplest explanation is that you have included the common.js twice by mistake.
Look into individual scripts and see if you have referenced common.js on top of your main file.
Your relevant code is required, but from the snippets above; try putting all the codes in the document ready method.
Using the plugin from: Famspam's Facebox
however I seem to be encountering some issues getting it to open. The following is my head contents:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Prepotence</title>
<link rel="stylesheet" href="style2.css" type="text/css"/>
<script src="/src/jquery.js" type="text/javascript" charset="utf-8"></script>
<link href="/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '/src/loading.gif',
closeImage : '/src/closelabel.png'
})
})
</script>
</head>
And whenever I attempt to open anything with code similar to:
Link
Absolutely nothing shows up, at all.
$(function(){
$('a[rel*=facebox]').facebox({
loadingImage : '/src/loading.gif',
closeImage : '/src/closelabel.png'
});
});
I've checked it and it's working fine, you can change both $ to jQuery if you're using other frameworks $-related :)
Cheers
G.