This is my code and I'm trying to load html from demo_test.txt into it, but it won't work no matter what I try. I've tried changing it from txt to html as well and it still won't load.
The other ajax command such as appending the text works correctly its the load line which won't work?
<head>
<title>Flask AJAX Demo</title>
<!--<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style2.css') }}"> -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type=text/javascript
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type=text/javascript>
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
<script type=text/javascript>
$(function() {
$("#submitBtn").click(function() {
$('#div1').load('dem_test.txt');
$.ajax({
type: "GET",
url: $SCRIPT_ROOT + "/echo/",
contentType: "application/json; charset=utf-8",
data: { echoValue: $('input[name="echoText"]').val() },
success: function(data) {
$('#echoResult').append("<br>");
$('#echoResult').append(data.value);
}
});
});
});
</script>
<strong>Enter a value to echo back:</strong>
<input type='text' size='10' id='echoText' name='echoText'>
<button type='button' id='submitBtn' name='submitBtn'>Submit via AJAX</button><br /><br />
<strong><div id='echoResult'></div></strong>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
This is what is in the demo_test.txt, this won't work if it is html either
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
EDIT:
I changed my load to this:
$('#div1').load('dem_test.txt', function(response, status, xhr) {
if ( status == "error" ) {
alert("Error occured: " + xhr.status + " " + xhr.statusText );
} else {
alert("Text loaded!");
}
});
But I get Error occured: 404 error , but the dem_test.txt file is in the same folder as the html file?
EDIT 2
I have tried this exact example as well found here:
https://stackoverflow.com/questions/16944723/load-method-in-jquery-give-me-404-not-found-error
BUT it won't work like his didn't either, what should the file location be?
It is better to use jquery load in this way;
$('#div1').load('dem_test.txt', function(response, status, xhr) {
if ( status == "error" ) {
alert("Error occured: " + xhr.status + " " + xhr.statusText );
} else {
alert("Text loaded!");
}
});
You can see alert if file is loaded
Related
The Perl CGI script is being called; I can see the debug logs getting getting the parameters and executing.
The issue is returning the results, the status code is always 0, with responseText empty.
Have tried various header options etc, with no luck, any help would be much appreciated.
Perl CGI handler
#!/usr/bin/perl
use strict;
use warnings;
use CGI;
use JSON;
use Data::Dumper qw( Dumper );
my $q = new CGI;
my %data;
open my $FH, '>', 'outfile';
if ( my $number = $q->param('number') ){
if ( $number =~ /^\d+$/ ) {
$data{result} = $number % 2 ? 'odd' : 'even';
} else {
$data{result} = 'Not a number';
}
my $jret = to_json(\%data);
print $FH Dumper($jret);
close $FH;
print $q->header('application/json');
print to_json(\%data);
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>[% title %]</title>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</script>
</head>
<body>
<div id='result'></div>Enter number:
<form>
<input type='text' id='number'>
<button onclick='test_number();'>Test</button>
<script>
function test_number()
{
$.ajax({
type: 'POST',
dataType: 'json',
url: '/cgi-bin/simple.cgi',
data: {
'number': $('#number').val()
},
success: function(data, textStatus ){
alert('request successful');
},
error: function(jqXHR, exception) {
msg = 'Request Status: ' + jqXHR.status + ' Status Text: ' + jqXHR.statusText + ' ' + jqXHR.responseText;
alert(msg);
}
});
return false;
}
</script>
</form>
</body>
</html>
You run the JavaScript function when a submit button in a form is clicked.
This:
Sends the Ajax request
Unloads the current page
Submits the form
Loads a new page
Quick hack
Use type="button" for your button element so it is not a submit button
Proper solution
Set <form action="/cgi-bin/simple.cgi" so the form submits the correct place
Add name="number" to the input so it is included in the regular form data
Add a means to distinguish between a form submission and an Ajax request such as a hidden input
Update the script so if it gets the form submission it renders an appropriate HTML document instead of JSON
Remove the onclick attribute and bind a proper event handler with JavaScript (which prevents the default behaviour of the form submission if JS successfully runs)
Such:
function test_number(event) {
event.preventDefault();
$.ajax({
type: 'POST',
dataType: 'json',
url: '/cgi-bin/simple.cgi',
data: {
'number': $('#number').val()
},
success: function(data, textStatus) {
alert('request successful');
},
error: function(jqXHR, exception) {
msg = 'Request Status: ' + jqXHR.status + ' Status Text: ' + jqXHR.statusText + ' ' + jqXHR.responseText;
alert(msg);
}
});
}
document.querySelector("form").addEventListener("submit", test_number);
What im about to do is to send data to the server through a form and to a php-script. Then I want to get it back and place it in the right spot using Jquery. I don't know why, but this solution doesnt seem to work as im just getting the "No text in the textbox!". Does someone have any tips?
<html>
<head>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(event) {
$.post("target.php", {
melding: $("#input").val().
}, function(data){
$("#meldinger").after("<div>" + data + "</div>");
});
event.preventDefault();
});
});
document.getElementById('demo').innerHTML = date();
</script>
<title>Meldingssystem</title>
</head>
<body>
<h1>Meldingsutveksling</h1>
<form action="target.php" method="post">
<textarea id="input" name="input" cols="40" rows="2"></textarea>
<br/><input type="submit" name="submit" value="Send">
</form>
<h2>Meldinger</h2>
<div id="meldinger">
</div>
</body>
</html>
PHP
<?php
if (!empty($_POST['input'])) {
$melding = $_POST['input'];
echo $melding;
}
else {
echo "No text in the textbox!";
}
?>
This
if (!empty($_POST['input'])) {
$melding = $_POST['input'];
echo $melding;
}
else {
echo "No text in the textbox!";
}
Should be
if (!empty($_POST['melding'])) {
$melding = $_POST['melding'];
echo $melding;
}
else {
echo "No text in the textbox!";
}
because there is no input POST parameter sent
first, please read https://api.jquery.com/jquery.post/
your php script expects data in the input field. but your jquery POST doesn't put anything in an input field.
instead try something like:
$.ajax({
data: {
input: $("#input").val()
},
datatype: "text",
method: "POST",
success: function(data, status, xhr) {
$("#meldinger").after("<div>" + data + "</div>");
},
error: function(xhr, status, error) {
alert("zog zog");
}
};
Notice that input is present in the data parameter.
I have a php file in which I have written javscript code.
Here is the code
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Start");
$.ajax({
type:...
url:...
success:function(data, textStatus ){
alert("Success");
Jquery Cycle plugin
}
error:function(xhr, textStatus, errorThrown){
alert("Failure");
}
});
});
I have a javascript code in php file with extension .php.When I run the above code,php gets executed perfectly.But javascript code is not executing.This I am saying because even the alert() in the first line of script is not getting executed.I am not getting any ajax error or success function printed which is defined in ajax call.
You have missed commas (,) in the ajax function.
It’s working at my end with the following changes:
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Start");
$.ajax({
type:'GET',
url:'somepage.php',
success:function(data, textStatus ){
alert("Success");
},
error:function(xhr, textStatus, errorThrown){
alert("Failure");
}
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Start");
$.ajax({
type:'GET',
url:'somepage.php',
success:function(data, textStatus ){
alert("Success");
},
error:function(xhr, textStatus, errorThrown){
alert("Failure");
}
})
});
</script>
Also running on JS Fiddle.
I have written a nodejs plugin in C++ and I am trying to call it from within a locally hosted webpage with jQuery. I have read that I can't make a direct call to nodejs because of the same origin policy so I should use jsonp. Note: I am pretty new to jquery, nodejs and json(p), but I am feeling adventurous. I am now using the following code:
node_test.js:
var mylib = require("./mylibrary");
var http = require("http");
http.createServer(function(req, res) {
console.log("Received request: " + JSON.stringify(req.url));
res.writeHead(200, {"Content-type": "text/plain"});
res.end('_testcb(\'{"message": "' + mylib.my_awesome_function() + '"}\')');
}).listen(1337);
index.html:
index.html:
<DOCTYPE HTML>
<html>
<head>
<title>
NodeJS test
</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
<script type='text/javascript' src='jquery.js'></script>
</head>
<body>
<div id="test"></div>
<script>
$(document).ready(function() {
$.ajax({
url: "http://127.0.0.1:1337/",
dataType: "jsonp",
jsonpCallback: "_testcb",
cache: false,
data: "test_data",
timeout: 5000,
success: function(data) {
$("#test").append(data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('error ' + textStatus + " " + errorThrown);
}
});
});
</script>
</body>
</html>
If I run node node_test.js and view index.html in my browser my function gets called. However, I would like to be able to execute multiple functions from my own nodejs library. I thought of somehow parsing the data I send to my nodejs app, and run it through a big switch case, a bit like this:
var reply = "";
switch (data) {
case 1:
reply = mylib.my_awesome_function();
break;
case 2:
reply = mylib.my_cool_function();
break;
// repeat for every function I have
}
// send reply
But I am not sure if this is the intended way to do this. Is there a better/smarter way to make multiple calls to nodejs from within jQuery/javascript on a webpage?
I want a javascript code for calling web script (http://10.0.2.2:8080/alfresco/service/api/login?u=admin&pw=admin) of alfresco remotely in android app using Phonegap and prase the return result and append this return result to other call of webscript of alfresco(http://localhost:8080/alfresco/service/sample/folder/Company%20Home?format=atom)..
please help me on this.
I have this sample code, how can i change it to my need...I want to invoke http://10.0.2.2:8080/alfresco/service/api/login?u=admin&pw=admin parse the return value and append it to one more call of webscript http://localhost:8080/alfresco/service/sample/folder/Company%20Home?format=atom .
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script src="jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
function bodyload(){
alert("We are calling jquery's ajax function and on success callback xml parsing are done");
$.ajax({url:'http://www.edumobile.org/blog/uploads/XML-parsing-data/Data.xml',
url:'
dataType:'application/xml',
timeout:10000,
type:'POST',
success:function(data) {
console.log("Customers Tab",data);
$("#bookInFo").html("");
$("#bookInFo").append("<hr>");
$(data).find("Book").each(function () {
$("#bookInFo").append("<br> Name: " + $(this).find("name").text());
$("#bookInFo").append("<br> Address: " + $(this).find("address").text());
$("#bookInFo").append("<br> Country: " + $(this).find("country").text());
$("#bookInFo").append("<br><hr>");
});
},
error:function(XMLHttpRequest,textStatus, errorThrown) {
alert("Error status :"+textStatus);
alert("Error type :"+errorThrown);
alert("Error message :"+XMLHttpRequest.responseXML);
$( "#bookInFo" ).append( XMLHttpRequest.responseXML);
}
});
}
</script>
</head>
<body onload="bodyload()">
<button onclick="bodyload()">Get Ticket</button>
<p id="bookInFo"></p>
</body>
For xml like
<test>
<something>
<data>Data1</data>
<other>Other1</usage>
</something>
<something>
<data>Data1</data>
<other>Other1</usage>
</something>
</test>
Use like this to parse
$.ajax({
type : 'GET',
url : "http://some-url:8080/test.xml",
data : {
key : "value"
},
dataType : "xml",
success : function(xml) {
data1 = $(xml).find('data').eq(0).text();
data2 = $(xml).find('data').eq(1).text();
other1 = $(xml).find('other').eq(0).text();
other2 = $(xml).find('other').eq(1).text();
},
error : function(xhr) {
alert("Error while loading!!!");
}
});
Let me know if it helped you..