I have a div in my HTML like this in which I'd like to set the ID of capital using JQuery
` <div class="modal-body">
<p id="capital"></p>
</div> `
This is how I'm setting it in my JQuery function
`function getWeather() {
$.ajax({
url: "assets/geojson/countryBorders.geo.json",
type: "GET",
dataType: "json",
data: {
},
success: function(result) {
let features = result["features"];
let countryFeature = findFeatureFromName(countryName);
let countryCode = JSON.stringify(countryFeature.properties.iso_a2).replace(/"/g,"")
$.ajax({
url: "assets/php/countryInformation.php",
type: 'POST',
dataType: 'json',
data: {
country: countryCode
},
success: function(result) {
console.log(result);
console.log(JSON.stringify(result));
let capitalCity = (result['data'][0]['capital']);
console.log(capitalCity)
$('#capital').html(capitalCity);`
etc
But capital isn't getting set?
The console.log is returning the expected value, so I know that has set okay.
I've even tried
$('#capital').text(capitalCity);
and plain JavaScript out of curiousity
document.getElementById("capital").innerHTML = capitalCity;
Nothing seems to be working and no errors in the console - what would be wrong?
Your HTML and JSON code is correct Code it correct, may be you are missing something in your jSON file
Here is what I tried and got the Output, if possible please post
ountryBorders.geo.json, so that we get more clarity
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body onload="getWeather()">
<div class="modal-body">
<p id="capital"></p>
</div>
<script>
function getWeather() {
debugger;
let capitalCity = 'hello';
console.log(capitalCity)
$('#capital').html(capitalCity);
}
</script>
</body>
</html>
Related
Im learning how to use API's with ajax in jquery.
I fetched "bored api" in my html page, and I want to update it or run the function again, by pressing a button and without refreshing the page.
I know I would write the function name in my onclick method, but I can't see where the function name should be placed or is.
<p id="activity"></p>
<script>
$(function () {
$.ajax({
type: 'GET',
url: "https://www.boredapi.com/api/activity",
success: function (data) {
console.log("Success", data)
document.getElementById("activity").textContent = data.activity;
}
})
})
</script>
</form>
<button onclick="()">Click me</button>
Have a look on this example from W3 Schools:
Example
It should look something like this:
<p id="activity"></p>
<script>
function doApiRequest() {
$.ajax({
type: 'GET',
url: "https://www.boredapi.com/api/activity",
success: function (data) {
console.log("Success", data)
document.getElementById("activity").textContent = data.activity;
}
});
}
</script>
</form>
<button onclick="doApiRequest()">Click me</button>
You do not need to encapsulate the method inside jquery. and this way, we give it a name, that we can call.
Trying to invoke two webhooks that I've defined on a runbook in an azure automation account.
I can run the webhook through powershell, and it works, but i'm having trouble getting it to run. Below is the code i'm using
<HTML>
<TITLE>Jumpbox Power</TITLE>
<BODY>
<CENTER>
<SCRIPT>
function startjumpbox() {
var _url = 'https://s5events.azure-automation.net/webhooks?token=asdf;
return $.ajax({
type: 'post',
url: _url
})
};
function startjumpbox() {
var _url = 'https://s5events.azure-automation.net/webhooks?token=fdsa';
return $.ajax({
type: 'post',
url: _url
})
};
</SCRIPT>
Start / Stop jumpbox<br>
<button onclick="startjumpbox()">Start Jumpbox</button>
<button onclick="stopjumpbox()">Stop Jumpbox</button
</CENTER>
</BODY>
</HTML>
The idea is that when the first button is pressed, the 'startjumpbox' function is run, which generates a post request to the webhook URL. same goes for the second button and a post to the second webhook URL.
Would appreciate any advise.
Please use the code below. It works at my side, just reference the jquery lib(You can also download it to local and then reference it):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
sample code:
<!DOCTYPE html>
<HTML>
<head>
<TITLE>Jumpbox Power</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<BODY>
<SCRIPT>
function startjumpbox() {
alert("start call 1")
var _url = 'https://s4events.azure-automation.net/webhooks?token=your_token';
$.ajax({
type: 'POST',
url: _url
});
alert("completed call 1")
}
function startjumpbox2() {
alert("start call 2")
var _url = 'https://s4events.azure-automation.net/webhooks?token=your_token';
$.ajax({
type: 'POST',
url: _url
});
alert("completed call 2")
}
</SCRIPT>
Start / Stop jumpbox<br>
<button onclick="startjumpbox()">Start Jumpbox</button>
<button onclick="startjumpbox2()">Start Jumpbox2</button>
</BODY>
</HTML>
After submitting a form I'm directed to a blank page that shows some json data such as:
some error
{"status":0,"message":"some error message here"}
or success
{"status":1,"message":"You have been signed up!"}
I would like the contents of a span element to be replaced with the message from the json data.
span element:
<span class="ladda-label" id="notice">Get notified!</span>
My script is located after my jquery and is as follows
<script>
$(document).ready(function() {
$.ajax({
dataType: 'json',
success: function( data ) {
var prices = data.message;
$('#notice').html(data.message);
}
});
});
</script>
I'm pretty confident I'm not doing a single thing correctly here.
...be more carefull )
<script>
$.ajax('/my-data-url',{
dataType: 'json',
success: function( data ) {
var prices = data.message;
//$('#notice').text -> html( message.data !!! -> data.message);
$('#notice').html(data.message);
},
error: function() {
console.log('connection error')
}
});
</script>
I have problem in binding data to a control in html page,here we have a web service in remote location as we are binding the data to a control(dropdown) in html the data is not binding the code for fine for localhost but for the remote url.here i'm placing code below can any one tell me any modifications or any code to be added to it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<body>
<select id="CbxArea" style="width: 200px">
<option>Select Area</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
//debugger;
var requestUrl = 'http://192.168.3.252:8081/HaraveerWCF/ExcelDataService.asmx/GetAreaNames';
var ddlArea = $("#CbxArea");
$.ajax({
url: "http://192.168.3.252:8081/HaraveerWCF/ExcelDataService.asmx/GetAreaNames",
//url: "ExcelDataService.asmx/GetAreaNames",
type: "POST",
dataType: "json",
contentType: "application/json; encoding=utf-8",
success: function (data) {
debugger;
for (i = 0; i < data.d.length; i++) {
ddlArea.append($("<option></option>").val(data.d[i].AreaName).html(data.d[i].AreaName));
};
alert(data.d.AreaName);
},
error: function (e) {
$('#status').innerHTML = "Unavailable";
}
});
});
</script>
Thanks in Advance.
I have an ajax function that is not run when the ajax script is included in my HTML page like so:
<script type='text/javascript' src='ajax.js'></script>
However, if I place the exact same script in the head portion of the HTML page, then it does run.
Why does this occur, and how can I fix it?
<script type="text/javascript">
$(function() {
$(".a").click(function()
{
$.ajax({
type: "POST",
url: "1.php",
data: dataString,
cache: false,
success: function(html)
{
//stuff
}
});
return false;
});
});
</script>
This might seem trivial but did you remove the <script> tags when using it in an external .js file?
The contents of your ajax.js file should just be:
$(function() {
$(".a").click(function() {
$.ajax({
type: "POST",
url: "1.php",
data: dataString,
cache: false,
success: function(html)
{
//stuff
}
});
return false;
});
});
I have the impression that when you mentioned "exactly", you left the script tags intact in the ajax.js file.
Also if this still doesn't work. try added an alert("hello"); line at the top of ajax.js before everything to see whether it runs at all.
I made a example which worked fine for me. cant see any problems so im guessing its a mistype or something silly.
here is the sample code i used:
HTML:
//double check these paths
<body>
<a class="a" href="#">clicky</a>
</body>
Javascript:
$(function() {
// i noticed you put .a here instead of a, i am assuming you are referring the class
$(".a").click(function()
{
alert("1");
$.ajax({
type: "POST",
url: "1.php",
data: "html",
cache: false,
success: function(data)
{
//stuff
$("body").html(data);
}
});
return false;
});
});
PHP:
echo 'bar';