I have some JavaScript which needs access to some data available on the server. In the past, I just used PHP to include some JavaScript in the original page download which would create an object, and used that. I would like to try doing so differently, and instead download some JSON and use that.
How is this accomplished. I made up the following and don't know if it is the "right" way.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script type="text/javascript">
//Disable all events using JavaScript. How is this done?
</script>
</head>
<body>
<script type="text/javascript">
//Allow events which were previously disabled
//$(function(){}); not needed since end of the page
$.getJSON( 'getMyJSONstuff.php', function(myJSONstuff) {
$('#elem1').plugin1({x:myJSONstuff.x});
$('#elem2').plugin2({y:myJSONstuff.y});
});
$('#elem3').plugin2({y:123});
$('#elem4').plugin3({z:321});
</script>
</body>
</html>
Related
I would like to convert this html script into a chrome extension. I followed this short tuto and apparently, I should move all the script ●parts into a .jsfile:
Due to security constraints, we can’t put inline JavaScript into our
HTML files inside of our Chrome extensions, so we have to create a
separate file to hold any JavaScript code we need and we’ll reference
it from the HTML file.
So instead of having just this html:
<!DOCTYPE html> <html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body> </html>
I should have one html ...:
<!DOCTYPE html>
<html>
<body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
</body>
</html>
...and one .js. But I am not sure how to go with the .js. How shoudl I call the script //translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en. Also should I add the function googleSectionalElementInit inside a document.addEventListener function?
Also will the script work because it will be stored on my local computer and not a server?
I'm stuck. I really don't know what I'm doing wrong, but I can't get a string returned to a variable in my embedded Javascript.
token.js:
function token () {
return "mysecretstring";
}
HTML Code:
<!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>TXTURE Server Status</title>
<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
token_val="";
$.getScript('./token.js', function(data) {
token_val = token();
console.log("function: " + token_val);
});
</script>
</head>
<body>
</body>
</html>
I can do whatever I want, token_val remains empty. Any hints appreciated.
Best regards, Thomas
I do not use that way to reference a function js. I simply load the library js as same your loads jquery-1.12.4.min.js and then I make the call to the function token() from the script.
Code look like that:
<script src="path_to_project/tokens.js" type="text/javascript"></script>
<script type="text/javascript">
token_val = token();
console.log("function: " + token_val);
</script>
Could you try to change your URL argument from "./token.js" to "/token.js"?
I modified the code a little bit to get not confused by too many tokens. Somewhere in the middle I got the error "Unexcpected token error", which is somehow misleading when using a function with the same name. :)
Anyway, that's the code now which works.
Javascript:
function myaccesstoken() {
return "mysecrectstring";
}
HTML:
<script src="token.js" type="text/javascript"></script>
<script type="text/javascript">
let token_val = myaccesstoken();
</script>
Easy as that but somethimes you stare at walls without seeing the windows to your left ... anyway, thanks.
Regards, Thomas
Simply don't use your jQuery $.getScript(), but include the script that contains token() function with
<script type="text/javascript" src="/pathToScript">
And use the function
I have small requirement that I am passing query string from demo1.html to demo2.html.
in demo2.html, there is back button(history.back()) so when user click back button it will redirect to demo1.html. in this demo1.html, I want to get querystring value or previous page url using javascript or jquery.
please find the demo html script below for your reference.
I need the query string value of demo2 page in demo1
demo1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
function display()
{
var wind = document.referrer;
var preUrl = window.location.protocol;
alert(wind);alert(preUrl);
}
</script>
<body>
Search Content of the document......
Search
Display
</body>
</html>
demo2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
function goBack() {
window.history.back();
return false;
}
</script>
<body>
demo 2 Content of the document......
Back
</body>
</html>
Reards
siva
Save the query string in the href that acts as the back button, then use location.replace()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
demo 2 Content of the document......
Back
</body>
</html>
a) Use the solution offered ny user3036342. This won't make the actual browser Back button work as you want though.
b) Leave the query string alone and use cookies instead. Set the cookie in demo2 and make sure demo1 reloads (I found this but there might be a better way)
c) If the pages are on the same domain, you could use History API and AJAX to switch between demo1 and demo2. Then you have full control about what happens when user presses Back/Forward, but it will require some reading to understand.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What does a script-Tag with src AND content mean?
I used the following in my html page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js">
$(document).ready(function(){
alert("ABC");
});
</script>
</head>
<body>
<p>THIS IS MY INDEX PAGE.</p>
</body>
</html>
The jquery doesn't work here meaning I don't see any effect of it after putting an alert in it.
But when I put in seperate <script> tag like the one below it works,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js">
</script>
<script>
$(document).ready(function(){
alert("ABC");
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
so if anyone any explain?
From w3schools:
http://www.w3schools.com/tags/tag_script.asp
"Note: If the "src" attribute is present, the element must be empty."
When you use script tag you can provide the source code using src attribute or inside the tag, but not both of them.
This is because, you are providing the src tag with the javascript.
The src file contents will get expanded as content of <script> (start and end) tag.
You can inspect this with firebug if you want.
What your first tag is doing is telling the browser that the content of the script is located in an external file. It will ignore any scripting in the actual tag in favour of the contents of the file.
You need to use the separate tag.
I don't know . But if the source you assigned in "src" inside the tag is a online one.
If you save go to that source and copy the script and save it in your local. Then
assign the "src" of your local one then it will work. ie.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="../polin/jquery_library.js">
function fn()
{alert("pp");}
</script>
<script type="text/javascript">
$(document).ready(function(){
alert("ABC");
});
function fn()
{alert("oo");}
</script>
</script>
</head>
<body onload="fn()">
<p>THIS IS MY INDEX PAGE.</p>
</body>
</html>
src="../polin/jquery_library.js" this file is in my local where the jquery source script is saved. And it work
I've scoured the net and stackoverflow looking for help, but can't seem to find any and I consider myself officially stumped. All of my code worked without a problem when it was all within standard script tags, then as soon as I moved them to their own .js file it crapped out. Help! This is what I now have in index.html (I've cut out all the irrelevant code since I'm just testing):
<html>
<head>
<title>PhoneGap Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/lib/jquery-1.7.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch-jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch.js"></script>
<script type="text/javascript" src="databasecalls.js"></script>
</head>
<body onload="init();">
<p>Some stuff here</p>
</body>
</html>
Then, this is what I have in databasecalls.js:
alert("file loaded");
function init(){
document.addEventListener("deviceready", phoneReady, false);
}
function phoneReady(){
// **** first, open the database ****
alert("Start making DB object");
dbShell = window.openDatabase("TimeBlogger", "1.0", "TimeBlogger", 20000000);
alert("Created DB object");
//and run another function if the setup is successful (displayEntries)
dbShell.transaction(setupDBTable, errorHandler, getDBProjectEntries)
}
So, unless I am mistaken, I should at the very least get alert(); to run as soon as it is read into index.html, right? I'm not even getting that! Is there something with the phonegap API that I missed... like everything needs to be in index.html or something?
Thanks in advance!
Justin