Iam new in javascript, I have a script that can work when I put in the footer before the </ body> in Wordpress, then I will convert to external javascript (.js file) but when I run it can not work. How to solve this problem?
This is script in footer and work,
function showMe() {
var x = document.getElementById("codeArea").value;
if (x.length == 0) {
document.getElementById("txtResponse").innerHTML = "empty";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtResponse").innerHTML = this.responseText;
return;
}
}
xmlhttp.open("GET", "show.php?q="+x, true);
xmlhttp.send();
}
}
And this is what I try to change to external javascript, example : showMe.js
function showMe() {
'use strict';
var x = document.getElementById("codeArea").value;
if (x.length === 0) {
document.getElementById("txtResponse").innerHTML = "empty";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("txtResponse").innerHTML = this.responseText;
return;
}
};
xmlhttp.open("GET", "show.php?q="+x, true);
xmlhttp.send();
}
}
Please give Me solution, thanks
It would be helpful if you put the snippet in your post. Any way just try including the js file just above the closing body tag i.e. </body> tag in the HTML file.
<html>
...
<body>
.
.
.
<script type="text/javascript" src="showMe.js"></script>
</body>
In your HTML file add an script Tag just before you close body:
<body>
--Content--
<script src="dir/showMe.js"></script>
</body>
And next time pls add your HTML file , it is very important.
if you converting your js code into a file then follow steps:-
1.put the file into your theme js directory
2. the call into footer file like this one
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/showMe.js"></script>
before closing tag of </body>
Thanks
If wordpress you can follow this
enter link description here
else
Remove the line
'use strict'
and try again.
Related
When I hit the button on the UI to have the JS communicate with PHP to pull up a "Hello world" page, I am getting a "{"timestamp":"2021-06-10T20:14:59.671+00:00","status":404,"error":"Not Found","message":"","path":"/hello.php"}" in the browser.
In the Eclipse console, it says: 2021-06-10 16:52:27.193 WARN 16688 --- [nio-8080-exec-1] o.s.w.s.r.ResourceHttpRequestHandler : Path with "WEB-INF" or "META-INF": projectname/src/main/webapp/WEB-INF/jsp/hello.php]
What do I do? Here's some code I have, and I have tried many file path formats where I refer to the PHP file. But it's all the same error!
Here's some of my code:
JSP page (just the Javascript part of it):
<button onclick=refreshData()>Say Hello</button>
<div id="content" />
<script type="text/javascript">
function refreshData(){
var display = document.getElementById("content");
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "hello.php");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
display.innerHTML = this.responseText;
} else {
display.innerHTML = "Loading...";
};
}
}
</script>
PHP
<?php
print "<p>Hello World</p>";
?>
This is in Spring MVC using Eclipse. I have the JavaScript on a JSP file page. What do I do to fix this? Thanks!
I always use:
$('#content').load("hello.php");
Just be sure your .php file is in the same folder
I'm making my own website(https://khushit-shah.github.io/) with the help of github.dev.
Now on top of every repository, I wanted to show some content featuring the repository, which should be flexible and easily changeable. So, I created a file in repository named "repodesc.html". which contains the html to we shown!. Then using following code I am adding that html file for every repositories.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("{{ repository.id }}").innerHTML = this.responseText;
}
};
xhttp.open("GET", "https://raw.githubusercontent.com/khushit-shah/{{ repository.name }}/master/repodesc.html", true);
xhttp.send();
This adds the HTML in https://raw.githubusercontent.com/khushit-shah/Cursor.js/master/repodesc.html to my website(top of Cursor.js). But the script tag in the repodesc is not getting executed.
Code in repodesc.html
<h1 cursor-animate cursor-loop-reverse> Cursor.js </h1>
<script>
console.log("Is it working?");
js = "https://raw.githubusercontent.com/khushit-shah/Cursor.js/master/cursor-v.2.0.2.js";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
eval(this.responseText);
}
};
xhttp.open("GET", js, true);
xhttp.send();
</script>
I even tried repodesc.html
<h1 cursor-animate cursor-loop-reverse> Cursor.js </h1>
<script src="https://cdn.jsdelivr.net/gh/khushit-shah/Cursor.js#latest/cursor.v1.0.0.min.js" >
</script>
expected result : Cursor.js should be executed and the h1 tag should be animated with type writing effect!
actual result: the script in repodesc.html is not getting executed!
I want to have a hyperlink on a html page run a variable that is defined in my python file. The variable is going to clear my database. Here is the code I am trying to use.
Python
#app.route('/log')
def log():
cleardb = db.session.delete()
return render_template('log.html', cleardb=cleardb)
Html
<a onclick="myFunction()">Clear database</a>
Javascript
<script>
function myFunction()
</script>
I don't know what javascript I need to run the variable. I want to make the cleardb get triggered so that it will delete the database.
Thanks
You need to make an ajax request with javascript to /log, it would look something like this:
function myFunction() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
if (xmlhttp.status == 200) {
//Do Success functionality here
}
else if (xmlhttp.status == 400) {
//Handle 400 errors here
}
else {
//All other errors go here
}
}
};
xmlhttp.open("GET", "/log", true);
xmlhttp.send();
}
I'm getting really confused with php,ajax and javascript.
I'm using some ajax code I got from w3 schools to handle a form and display it below the form input. However, I can't seem to get my php and Javascript right. I'm using JavaScript in php tags where I then Get my variable in the same php tags and echo it. I then try to get that variable in ajax. I don't think I'm correctly getting the variable with ajax and inside my php. Does anyone have some advice.
Thanks
Heres my javascript in my html doc
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "hackacronymphp.php?phpAnswer=" + str, true);
xmlhttp.send();
}
}
</script>
Here's the last part of my script with my php afterward all inside one php tag
var stringe = vari.join("");
console.log(stringe);
var answer = dataarray[stringe];
console.log(answer);
</script>
$phpanswer = $_GET['answer']
echo $phpanswer ;
?>
I have tried everything suggested in questions of similar nature but this very basic code is just not working. I just want to receive the message from the php code in the same file using XMLHttpRequest.
<!DOCTYPE html>
<head></head>
<body>
<div id="qwer" style="height:50px;width:40px"></div>
<script type="text/javascript">
function check() {
var ualias=document.getElementById('ualias').value;
var resu=document.getElementById("qwer");
var params="username="+ualias;
var hm = new XMLHttpRequest();
var url = "http://'my-domain-name'/try.php";
hm.open("GET", url+"?"+params, true);
hm.onreadystatechange = function(){
if(hm.readyState == 4 && hm.status == 200) {
var return_data = hm.responseText;
resu.innerHTML=return_data;
} else {
resu.innerHTML="error";
}
hm.send(null);
resu.innerHTML="CHECKING...";
}
}
</script>
<?php if(isset($_GET['username'])) {
$u=$_GET['username'];
echo $u;
exit();
} ?>
<input id='ualias' type='text' onblur=''>
<button type='button' onclick="check()">Go!</button>
</body>
</html>
The browser (Google Chrome) isn't showing anything for the onclick event.
It finally worked. I made the following edits.
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function check()
{
var ualias=document.getElementById('ualias').value;
var resu=document.getElementById("qwer");
var params="username="+ualias;
var hm = new XMLHttpRequest();
var url = "http://www.websamaj.in/try.php";
hm.open("GET", url+"?"+params, true);
hm.onreadystatechange = function(){
if(hm.readyState == 4 && hm.status == 200)
{
var return_data = hm.responseText;
resu.innerHTML=return_data;
}
}
hm.send(null);
resu.innerHTML="wait...";
}
</script>
<?php
if(isset($_GET['username']))
{
$u=$_GET['username'];
echo $u.",you are finally here!:)";
exit();
}
?>
<input id='ualias' type='text' onblur=''>
<button type='button' onclick="check()">Go!</button>
<div id="qwer" style="height:50px;width:100px;background-color:#CCC;"></div>
</body>
</html>
Apparently, the else condition there in onreadystatechange function was causing a problem. I would love it if anybody could tell me why exactly was that creating a problem. As far as i know, onreadystatechange event is called each time the state changes. So in my previous code, "error" should be overwritten thrice on the div and then, when the state changes to 4 and 200, the responseText should be overwritten, since i didnt use append. So, an explanation would be highly acknowledged. Thank you!
In your original code, hm.send(null) and resu.innerHTML="CHECKING" lines are actually INSIDE the onreadystatechange callback:
hm.open("GET", url+"?"+params, true);
hm.onreadystatechange = function(){
if(hm.readyState == 4 && hm.status == 200) {
var return_data = hm.responseText;
resu.innerHTML=return_data;
} else {
resu.innerHTML="error";
}
hm.send(null); // <-- wrong place!
resu.innerHTML="CHECKING...";
}
In your edited version, you moved them out of there (fixed indention):
hm.open("GET", url+"?"+params, true);
hm.onreadystatechange = function(){
if(hm.readyState == 4 && hm.status == 200) {
var return_data = hm.responseText;
resu.innerHTML=return_data;
} else {
resu.innerHTML="error";
}
}
hm.send(null);
resu.innerHTML="wait...";
The reason you didn't notice this is because in your edited version, you didn't indent your blocks correctly. Recommend always keeping your code formatted consistently, even when hacking around, so you can see the code blocks.