I have the following script in my HTML, however I get a Question mark instead of the actual IP:
<script type="application/javascript">
var myButton = document.getElementById("clickButton");
var myText = document.getElementById("helloText");
myButton.addEventListener('click A', doSomething(), false);
function doSomething(json) {
myText.textContent = (json.ip);
}
function getIP(json) {
return json.ip;
}
</script>
<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
The problem is that doSomething doesn't receive the JSON as an argument. You need getIP to put the returned IP into a global variable, and then doSomething can display it.
var myButton = document.getElementById("clickButton");
var myText = document.getElementById("helloText");
myButton.addEventListener('click', doSomething, false);
function doSomething() {
myText.textContent = IP;
}
<script type="application/javascript">
var IP;
function getIP(json) {
IP = json.ip;
}
</script>
<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
<button id="clickButton">Show IP</button>
<div id="helloText"></div>
Also, the second argument to addEventListener should just be the function name, not a call to the function. And the first argument should just be the name of the event. There's no click A event, just click.
The function getIP() gets called when the //api.ipify.org script is loaded. Your getIP() function just returns the ip address. Other than that it does not do anything. Try doing something like this:
<div id="mydiv"></div>
<script>
var getIP = function(json) {
document.getElementById("mydiv").innerHTML = json.ip;
}
</script>
<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
Related
I'm having a problem changing the string content of a particular DIV tag when using AJAX.
For some reason I can change string content when using an onclick function. This works;
<div id="demo">Will change on click? </div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Yes, Successfully changes" ;
}
</script>
However this does not;
<div id="demo2">Will this change?</div>
<script>
window.onload = function() {
document.getElementById("demo2").innerHTML = "Yes, Successfully changes" ;
}
</script>
Both approaches work on the page itself, but import that page using AJAX, and only the onclick method works. This issue persists when trying both JavaScript and JQuery. What am I missing?
Try registering an event handler using jQuery's .ajaxcomplete http://api.jquery.com/ajaxcomplete/ . This event gets fired when an AJAX request finishes which is probably what you are looking for.
User the following way to update the content using Ajax
<div id="demo">Let AJAX change this text</div>
<button type="button" onclick="loadDoc()">Try it</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
Go to following link for more ajax examples.
Ajax Examples
<script>
$(document).ready(function(){
$.ajax({
url: "ajax_info.txt"
}).done(function( data ) {
$("#demo").html(data);
});
});
</script>
on ready function you can call ajax and change the content
Use jquery ready function and call your function inside ready function.
like this :
$(document).ready(function(){
myFunction();
});
/* jQuery Onload String Replace OR jQuery Onload String Change */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var strNewString = $('body').html().replace(/\On hold/g,'Processing');
$('body').html(strNewString);
});
</script>
My client puts our below JS code in his website in the <head> and is complaining our tags are not firing. Below is the sample code from client:
<html>
<head>
<script type="text/javascript">
function create() {
try {
var baseURL = "https://serv2ssl.vizury.com/analyze/analyze.php?account_id=VIZVRM1125";
var analyze = document.createElement("iframe");
analyze.src = baseURL;
var node = document.getElementsByTagName("script")[0];
node.parentNode.insertBefore(analyze, node);
} catch (i) {
}
}
var existing = window.onload;
window.onload = function() {
if (existing) {
existing();
}
create();
}
</script>
</head>
<body onload="javascript:clientfunction();">
<script type="text/javascript">
function clientfunction()
{
//client code is replcad here
document.write("Hello testing");
}
</script>
</body>
</html>
On page Load clientfunction() is calling, our create() function is not firing.
Please can anybody help me why our tags are not firing and what is the alternative solution for this issue?
copy paste and check running following
<html>
<head>
<script type="text/javascript">
function create() {
alert("Gdfg");
try {
var baseURL = "https://serv2ssl.vizury.com/analyze/analyze.php?account_id=VIZVRM1125";
var analyze = document.createElement("iframe");
analyze.src = baseURL;
var node = document.getElementsByTagName("script")[0];
node.parentNode.insertBefore(analyze, node);
} catch (i) {
}
}
window.onload=create;
window.onload=clientfunction;
</script>
</head>
<body onload="clientfunction(); create()">
<script type="text/javascript">
function clientfunction()
{
alert("fdsfsdf");
//client code is replcad here
document.write("Hello testing");
}
</script>
</body>
</html>
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)
I am trying to read binary data in javascript. I got one BinaryReader.js on net. I copied that file where Default.aspx is. If I write the code like following then project got build and running but handshake is not getting done. If I remove src="BinaryReader.js" then handshake is getting done properly. So my question is, Can I use external script along with my script in same asp.net page? If yes then what am i doing wrong?
<script src="BinaryReader.js" language="javascript" type = "text/javascript">
var ws;
function btnConnectSend_onclick() {
if ("WebSocket" in window) {
ws = new WebSocket("ws://localhost:35000/");
ws.onopen = function() {
alert("Connection Open......");
};
ws.onmessage = function(evt) {
var reader = new BinaryReader(evt.data);
var tag = reader.readString(26);
//var txt = document.createTextNode(evt.data.toString());
form1.txtMessage.appendChild(tag);
};
ws.onclose = function() {
alert("Socket Closed!!!");
};
ws.onerror = function() {
alert("WTF!");
};
}
}
function btnClose_onclick() {
ws.close();
};
</script>
No, you have to create a separate script block for your code, or put it in the script file.
<script src="BinaryReader.js" language="javascript" type = "text/javascript"></script>
<script language="javascript" type = "text/javascript">
var ws;
function btnConnectSend_onclick() {
if ("WebSocket" in window) {
ws = new WebSocket("ws://localhost:35000/");
ws.onopen = function() {
alert("Connection Open......");
};
ws.onmessage = function(evt) {
var reader = new BinaryReader(evt.data);
var tag = reader.readString(26);
//var txt = document.createTextNode(evt.data.toString());
form1.txtMessage.appendChild(tag);
};
ws.onclose = function() {
alert("Socket Closed!!!");
};
ws.onerror = function() {
alert("WTF!");
};
}
}
function btnClose_onclick() {
ws.close();
};
</script>
this will add it to the page response, it will be included in the page, so that you can use it, then create one more block of script tag, and then call the functions from there.
<script src="BinaryReader.js" language="javascript" type = "text/javascript"></script>
<script type="text/javascript">
/// put your all Js Code of btnsendClick
</script>
I need a java script function that converts the document object of the current loaded page back to it's source text. In firefox it's smth like that:
var doc = document;
var str = (new XMLSerializer()).serializeToString(doc);
alert(str);
But i need a cross browser solution. How would this be done?
For example:
<html>
<body>
<script>
alert( asText(document) );
</script>
</body>
</html>
would pop up:
<html>
<body>
<script>
alert( asText(document) );
</script>
</html>
how would you implement the 'asText' function?
Why do not you use document.documentElement.innerHTML?
example
function sourceText(){
try{
var O= new XMLHttpRequest();
O.open('GET', location.pathname, false);
O.send(null);
return O.responseText;
}
catch(er){
return '';
}
}