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');
}
}
);
});
});
Related
I am using handsontable and getting a stream of json objects. When i parse it and load it into handontable, i only get a blank div container. How do i fix it?
For some reason that i dont understand data1 in line 33 becomes empty in line 38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.css" rel="stylesheet"
media="screen">
</head>
<body>
<h1> hello world</h1>
<script src="jquery-3.4.1.js"></script>
<script>
$("h1").css("color", "blue");</script>
<div id="example"></div>
<div id="example1"></div>
<script>
var data1 = new Array()
var url = "https://api.myjson.com/bins/6ysob";
fetch(url).then(function (response) {
response.json().then(function (parsedJson) {
data1 = parsedJson;
})
});
var container1 = document.getElementById('example1');
console.log('This is the parsed json', data1);
var hot = new Handsontable(container1, {
data: data1,
rowHeaders: true,
colHeaders: true,
filters: true,
dropdownMenu: true
});
</script>
</body>
</html>
this is not weird that data1 is empty at line 38 because this line is execute before the callback of the fetch you have to do this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.css" rel="stylesheet"
media="screen">
</head>
<body>
<h1> hello world</h1>
<script src="jquery-3.4.1.js"></script>
<script>
$("h1").css("color", "blue");</script>
<div id="example"></div>
<div id="example1"></div>
<script>
var data1 = new Array()
var url = "https://api.myjson.com/bins/6ysob";
fetch(url).then(function (response) {
response.json().then(function (parsedJson) {
data1 = parsedJson;
var container1 = document.getElementById('example1');
console.log('This is the parsed json', data1);
var hot = new Handsontable(container1, {
data: data1,
rowHeaders: true,
colHeaders: true,
filters: true,
dropdownMenu: true
});
})
});
</script>
</body>
</html>
(I recommend you to check some articles on Promise behavior in js)
I recommend you to take a look at this code (better readability) :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.css" rel="stylesheet"
media="screen">
</head>
<body>
<h1> hello world</h1>
<script src="jquery-3.4.1.js"></script>
<script>
$("h1").css("color", "blue");</script>
<div id="example"></div>
<div id="example1"></div>
<script>
let url = "https://api.myjson.com/bins/6ysob";
fetch(url).then( resp => resp.json() ).then( json => {
let container1 = document.getElementById('example1');
let hot = new Handsontable(container1, {
data: json,
rowHeaders: true,
colHeaders: true,
filters: true,
dropdownMenu: true
});
});
</script>
</body>
</html>
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});
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 .