How Display data from url(cross-domain) on div using dreamweaver phonegap? - javascript

What is the best way to display some content of a url (#somediv) on a div of my HTML Dreamweaver Phonegap
I am new on Phonegap DW and i want to display the weather values of this page:
http://www.catedralaltapatagonia.com/invierno/partediario.php?default_tab=0
In Java U used Jsoup, but i am not sure how do it on DW
I tried this code (AJAX and JSONP)
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.5.min.js"></script>
<script src="js/load-json.js"></script>
</head>
<body>
<div id="output"></div>
</body>
</html>
JS
$(document).ready(function(){
var output = $('#output');
$.ajax({
url: 'http://www.catedralaltapatagonia.com/invierno/partediario.php? default_tab=0',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var landmark = '<h1>'+item.name+'</h1>'
;
output.append(landmark);
});
},
error: function(){
output.text('There was an error loading the data.')
}
});
});

i think you have to enabled CORS for this, you can enable cors via:
.htaccess
Header set Access-Control-Allow-Origin "*"
or via
.php (together with the codes)
<?php
header("Access-Control-Allow-Origin: *");
?>

Related

how to use ajax to put value from javascript variable into a php variable

I need to get the value of a javascript variable and put it into a mysql database. I am trying to use jquery ajax function in (test.html) to Post the variable to a separate PHP file (external.php). I'm not sure why it's not working, I would appreciate any insight. Here are my two files:
Here is test.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<script>
$(document).ready(function () {
var longitude = "print a longitude";
$.ajax({
url: "external.php",
method: "POST",
data: { "longitude": longitude }
});
});
</script>
</body>
</html>
And here is external.php:
<?php
$longitude = $_POST['longitude'];
echo json_encode($longitude);
?>
The code below works perfectly fine for me:
The external.php file:
<?php
header('Content-Type: application/json');
$longitude = $_POST['longitude'];
echo json_encode($longitude);
?>
The test.html file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<script>
$(document).ready(function () {
var longitude = "print a longitude";
$.ajax({
url: "external.php",
method: "POST",
dataType: "json",
data: { "longitude": longitude },
success: function(data){
console.log(data);
}
});
});
</script>
</body>
</html>
Also, make sure you are not running your file as:
file:///C:/Users/XXX/Desktop/XAMPP/htdocs/test.html
If you run it like this you would get this error:
XML Parsing Error: no root element found
Location: file:///C:/Users/XXX/Desktop/XAMPP/htdocs/external.php
Line Number 5, Column 3:
What you need to do is run Apache and then run the file as:
http://localhost/test.html
Below is the screenshot of what I get:

send XML with Ajax call

I have a CentOS 7 server hosting an internal webpage.
On my webpage I have a button #test1 once clicked the test.js should execute.
test.js should make an ajax call to send some XML to my Cisco phone for it to be executed.
I can run a CURL from my server and it works.
curl -H "Content-Type: text/xml" -d #test1.xml -X POST http://username:password#10.0.0.130/CGI/Execute
Where text1.xml contains
XML=<CiscoIPPhoneExecute><ExecuteItem URL="Dial:12345678,,,,,6020197#,,,,,,,,,,,,,,,,,#"/></CiscoIPPhoneExecute>
Why when I try to run it as a script doesn't it work? I am seeing the following errors.
Uncaught ReferenceError: $ is not defined
document root
/var/www/mysite.com/public_html
css index.html js
HTML - index.html
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="noindex, nofollow" name="googlebot">
<script src="./js/jquery-git.js" type="text/javascript"></script>
<script src='./js/test.js'></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<title>Auto Bridge Opener</title>
</head>
<body>
<button name="Log" type="submit" id="test1">Primary Bridge</button></form>
CSS - style.css
JS - test.js
$(document).ready(function() {
$('#test1').on('click', function(e) {
e.preventDefault();
var btn = $(e.target);
btn.attr("disabled", "disabled"); // disable button
$.ajax({
type: "POST",
url: "http://username:password#10.0.0.130/CGI/Execute",
dataType: "xml",
contentType: "application/xml",
data: "<CiscoIPPhoneExecute><ExecuteItem URL='Dial:12345678,,,,,6020197#,,,,,,,,,,,,,,,,,#'/></CiscoIPPhoneExecute>",
success: function (res) {
alert("XML: it works!");
},
error: function (res) {
alert("XML: not working! " + res.statusText);
}
});
});
});
There maybe some issue with you code:
1 For the $ is not defined,you should make sure the <script src="./js/jquery-git.js" type="text/javascript"></script> not got a 404,and the jquery-git.js is a correct jQuery library.
2 The ajax do not support cross-domain, so you phone and server should has the same domain.

Calling json data from an api

I am trying to retrieve data from an api and use it to populate the div with the ID "output". I get an error that the $ is undefined. Can anyone help determine what I am missing?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
</head>
<body style="margin: 0px; padding: 0px;">
<div id="fullscreen">
<div id="output">
</div>
</div>
</body>
<script>
$.ajax({
type: 'GET',
url: "https://apiurl.com",
dataType: "json",
crossDomain: true,
success: function( response ) {
console.log( response ); // server response
var id = response[0];
var vname = response[1];
$('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
}
});
</script>
</html>
As Sirko already explained in the comments, you are trying to use the javascript library JQuery, but the library is not available because you didn't include it.
You can include it by either downloading JQuery here and including it via
<script src="src_to_local_jquery.js"/>
or by including it externally (described in CDN section of above link)
Also note, that script tags should be put either in the head or the body section. To make sure your custom script is executed after the page is ready, you can use JQuery's document ready method.
The $ sign is not part of the JavaScript language, it is a short hand for a third party library jQuery ($ === jQuery).
You need to add it as a dependency in your html file with a script tag with a src attribute containing the URI for the source file before you can use it.
<html>
<head></head>
<body>
...
...
<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(function () {
// Your code here
});
</script>
</body>
</html>
Include jQuery either as a CDN or download add reference locally. Then make sure the DOM is ready before you make the call. You can read more about that here
<script src="local_jquery.js"/>
// OR
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
$(function() {
$.ajax({
type: 'GET',
url: "https://apiurl.com",
dataType: "json",
crossDomain: true,
success: function( response ) {
console.log( response ); // server response
var id = response[0];
var vname = response[1];
$('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
}
});
});

AJAX returns random hash instead of text

I am working on live notification script.
I have managed to rend request to external file, but the script returns random hash instead of plain text...
This is my function that should get data from test.php
<script>
$(document).ready(function () {
function load() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "/test.php",
dataType: "html", //expect html to be returned
success: function (response) {
$("#responsecontainer").append(response);
setTimeout(load, 5000)
}
});
}
load(); //if you don't want the click
// $("#display").click(load); //if you want to start the display on click
});
</script>
And it should append to the results.
This is the source of test.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Headerview</title>
</head>
<body>
<?php
$p = "<p>test</p>";
echo $p;
?>
</body>
</html>
And this is what I am getting...
inGN^PtJRo(hi*I1HVb&pB0wJs(B)9rID*6O�Eyh6cngWD+93Zr$zYU
The file path was the problem. I did not specify exact file path.
Thank you

Execute code if page doesn't load

I want to create a code that reloads a part of the page every 10 seconds and if it fails to reload (because of connection issue), then it plays a sound.
Is such thing possible using ajax and how? I have seen this type of feature in web chats before but never came across a code for it.
Try using setInterval function:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" language="JavaScript"></script>
<style type="text/css">
<!--
.square {
background-color: #AAAAAA;
width: 250px;
height: 100px;
}
//-->
</style>
<script type="text/javascript" language="JavaScript">
$(document).on('ready',function(){
setInterval(updateDiv,10000);
});
function updateDiv(){
$.ajax({
url: 'getContent.php',
success: function(data){
$('.square').html(data);
},
error: function(){
//Code to play a sound
$('.square').html('<span style="color:red">Connection problems</span>');
}
});
}
</script>
</head>
<body>
<h1>The next div will be updated every 10 seconds</h1>
<div class="square">
Hello
</div>
</body>
</html>
And the php script:
<?php
echo "Updated value --> " . rand();
?>
To test, try renaming the php script (simulating connection problems) and rename to original name (getContent.php) to test correct situation again. Hope this helps.
Using JQuery, you can add handlers to run on fail...
$.ajax({
dataType: "json",
url: "myurl.com"
}).done(function( data ) {
//do what you want when it's all good
}).fail(function() {
//do what you want when the call fails
});
Or you can do it this way...
$.ajax({
type: "post",
url: "/SomeController/SomeAction",
success: function (data, text) {
//do what you want when it's all good
},
error: function (request, status, error) {
//do what you want when the call fails
}
});
And per request, here is a jsfiddle, it calls a service every 2 seconds, either with a URL that will return the date, or with a bad URL that will fail, mimicking a failed server.
UPDATE: I modified the jsfiddle to play a sound, as long as that sound remains on the server it's on :)

Categories