I have JavaScript code that send data to backend which when I place inline then work fine but when I place in external file it does not work. Meanwhile other JavaScript is working in external file.
<script>
$('#submit-ajax').click(function(event) {
console.log('working or not')
$.post(
'/order/detail/',
{
'test': 'hi i am here',
},
function() {
alert( "Data Loaded: " );
}
)
});
</script>
in external file code is:
$(document).ready(function(){
$('#submit-ajax').click(function(event) {
console.log('working or not')
$.post(
'/order/detail/',
{
'test': 'hi i am here',
},
function() {
alert( "Data Loaded: " );
}
)
});
}
I tried a simple example,
HTML code: Relative path of external JS you need to give
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="(path of external js)\refJS.js"></script>
</head>
<body>
<div id="submit-ajax">
click me
</div>
</body>
In JS external file :
$(document).ready(function(){
$('#submit-ajax').click(function(event) {
console.log('working or not');
});
})
Related
I have a file named sample.php, in which I have some JS code, and some PHP code. This is some sort of sample snippet of the code I have :
<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<head>
<script type="text/javascript">
var ThunkableWebviewerExtension = {
receiveMessage: function(fxn) {
var callbackFunction = function(event) {
if (typeof fxn === 'function') {
fxn(event.data)
}
};
document.addEventListener('message', callbackFunction, false);
window.addEventListener('message', callbackFunction, false);
}
}
</script>
</head>
<body>
<script type="text/javascript">
var value;
ThunkableWebviewerExtension.receiveMessage(function(message) {
value = message;
});
//sending the value with ajax
$.ajax({
url : "./sample.php", //same file
method : "GET",
data: {"name": value},
success : (res) => {
console.log(value);
},
error : (res) => {
console.log(res);
}
})
</script>
<?php
echo $_GET['name'];
?>
</body>
</html>
The problem is the PHP code doesn't print anything - Are there any error/bug I need to fix? Or is there a better method for accessing a JS variable in PHP?
Thanks! :)
Here's how you can access PHP code within in a <script> (without using AJAX):
<?php
echo"<script>";
include ('javascriptStuff.js');
echo'let x = '.json_encode($phpVariable).';';
echo"</script>";
?>
I am trying to implement the following JSON file in my HTML page.
<html>
<head>
<title> test get</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
<script>
$(function() {
$.getJSON('json.json',function(data) {
$.each(data.quotes,function(key,value) {
alert( key+ "said by "+value);
});
});
});
</script>
</head>
<body>
</body>
</html>
Here is the JSON that i am working on.
{
"quotes": {
"hey there":"randomguy1",
"wassup":"randomguy2",
"coool":"randomguy3"
}
}
I have checked different tutorials and similar questions at stackoverflow still couldn't figure out the mistake.
Just fix your script code,
You MUST close the <script ...jquery> tag.
<html>
<head>
<title>test get</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$.getJSON('json.json', function (data)
{
$.each(data.quotes, function (key, value) {
alert(key + "said by " + value);
});
});
});
</script>
</head>
<body> </body>
</html>
You can achieve it in a different manner. Use ajax to load a file content and parse it as a json.
$.ajax({
url : "helloworld.json",
success : function (data) {
//TODO parse string to json
}
});
only function excute once, then make then whole part of jquery doesn't work.
I tried to search but i didn't find right answer.
CODE:
<script type="text/javascript" src="Plugs/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Plugs/jquery.validate.min.js"></script>
<script type="text/javascript" src="Plugs/pop-up.js"></script> <!-- FILE THAT CONTAINS function popup(divNama) { /*instruction*/ } -->
<script type="text/javascript">
$(document).ready(function(){
//document.write('');
$("#feeStructure").validate({
submitHandler: function(form) {
popup('popUpDiv'); // custom fn that fire once and make jquery/ajax stop working
$.post('michangoProc.php', $("#feeStructure").serialize(), function(data) {
$('#msgErr').html(data);
});
}
});
});
</script>
You need to change the order that the JavaScript files are loaded.
If you want a function that exists in a file to run in an inline script it must be loaded before your inline script. Your code should look like the below. See that the Plugs/pop-up.js file import now occurs before your inline script
<script type="text/javascript" src="Plugs/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Plugs/jquery.validate.min.js"></script>
<script type="text/javascript" src="Plugs/pop-up.js"></script> <!-- FILE THAT CONTAINS function popup(divNama) { /*instruction*/ } -->
<script type="text/javascript">
// $.noConflict();
$(document).ready(function(){ //$.fn.popup=function(){ } ;
//document.write('');
$("#feeStructure").validate({
submitHandler: function(form) {
popup('popUpDiv');
$.post('michangoProc.php', $("#feeStructure").serialize(), function(data) {
$('#msgErr').html(data);
});
}
});
});
</script>
I am getting this error Exception: missing } in XML expression and also when i open my html file in FIREFOX and use Firebug 1.9.2, this error appear:
WL is not defined [Break On This Error]
WL.Event.subscribe("auth.login", onLogin);`
Here is my code:
<html><head>
<title>Greeting the User Test page</title>
<script src="js.live.net/v5.0/wl.js" type="text/javascript"></script>
<script type="text/javascript">
var APPLICATION_CLIENT_ID = "id",
REDIRECT_URL = "url";
WL.Event.subscribe("auth.login", onLogin);
WL.init({
client_id: APPLICATION_CLIENT_ID,
redirect_uri: REDIRECT_URL,
scope: "wl.signin",
response_type: "token"
});
WL.ui({
name: "signin",
element: "signInButton",
brand: "skydrive",
type: "connect"
});
function greetUser(session) {
var strGreeting = "";
WL.api(
{
path: "me",
method: "GET"
},
function (response) {
if (!response.error) {
strGreeting = "Hi, " + response.first_name + "!";
document.getElementById("greeting").innerHTML = strGreeting;
}
});
}
function onLogin() {
var session = WL.getSession();
if (session) {
greetUser(session);
}
}
</script>
</head>
<body>
<p>Connect to display a welcome greeting.</p>
<div id="greeting"></div>
<div id="signInButton"></div>
</body>
</html>
I dont know where is mistake, i just copy this sample code from skydrive api tutorial.
Of course, that I id and url strings replace with strings of my personal app.
Thanks for answers.
You need to include the Javascript file from the Microsoft server:
<script src="http://js.live.net/v5.0/wl.js" type="text/javascript"></script>
Your first <script> tag should look like:
<script src="http://js.live.net/v5.0/wl.js" type="text/javascript"></script>
or possibly
<script src="//js.live.net/v5.0/wl.js" type="text/javascript"></script>
if that site is configured properly. Without that, your URL was interpreted as being relative to the URL of your page.
This code is working on other test environment but not on mine.
Do you know why?
I am using Amazon EC2 and Cotendo CDN.
The result I am getting is a blank page.
Thanks in advance!
<html>
<head>
<title>Geo Test</title>
<script type='text/javascript' src='http://www.101greatgoals.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script>
$(document).ready( function() {
$.getJSON( "http://smart-ip.net/geoip-json?callback=?",
function(data){
console.log(data);
var c = data.countryCode;
if(c=="US" || c=="US" ){
document.getElementById('ddd').innerHTML = 'US'; } else {
document.getElementById('ddd').innerHTML = 'Not US';}
/*
this service needs ip
var ip = data.host;
alert(ip);
$.getJSON( "http://freegeoip.net/json/"+ip,
function(data){
console.log(data);
}
);*/
}
);
});?
</script>
</head>
<body>
<div id="ddd"></div>
</body>
</html>
Change this line:
$(document).ready( function() {
to that:
jQuery(document).ready( function($) {
It's necessary, because inside http://www.101greatgoals.com/wp-includes/js/jquery/jquery.js?ver=1.7.1 you've already got a call of jQuery.noConflict(); , so jQuery is not accessible by using the $
...and also remove the ? (see Pointy's comment above)