I need help on the following: I cannot get the JQuery to load the JSON data even though the JSON file is firing in the console.
Here is the HTML code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.3.1.js"></script><!-- places Javascript reference file in html-->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <!--places css in sub folder-->
<title>H</title>
</head>
<body>
<div id="vanilla_ajax">
</div>
<button type="button" id="button1" onclick="loadAJAX()">Change to AJAX</button>
<div id="jq_ajax">
</div>
<button type="button" id="button2" onclick="loadJQUERY()">Change to JQUERY</button>
<script src="js/ajax.js"></script>
</body>
</html>
The first button loads and is fine so I have excluded that portion. It is the second one "loadJQuery()" that does not render on the screen. Here is the Javascript for it:
function loadJQUERY(){
/*place holder for ajax loading using JQuery*/
$('#jq_ajax').append('<p id = "test">'); //jq test
$.ajax({
url: "data/Holder.json",
type: 'GET',
dataType: "json",
success: function (result) {
$("#jq_ajax").html("<p>" + result.data + "</p>");
}
});
}
The pathway for the folder is correct as it works with the XML/Ajax version.
the JSON file was using single quotes instead of double quotes. That was the issue
Related
I would like to add forms to a page in real time, but I'm not sure how to approach this.
Let's say that this is the class of my form:
class MyForm(FlaskForm):
my_field = StringField()
This is the html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" id="addNewForm">Add new form</button>
</body>
</html>
Which also includes this script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">/script>
<script type="text/javascript">
var form = '{{ form }}'
$("document").ready(function () {
$("#addNewForm").click(function () {
$("body").append(form)
});
});
</script>
Once I press the button I get back something like:
<forms.MyForm object at 0x000001C198CE5040>
I tried to extract the form HTML in order to pass it as an a string of html, but I can't find a way to do it (and suspect that there must be a better way).
What is the correct way of doing this?
I used window.print() function and saved to a .pdf file.
Inside the page I've saved there is a <a href="www.example.com"> tag. When I'm downloading the file from Chrome the link works and it opens the right page. When downloading it from Edge it won't work and stays as a simple text.
Any solution?
I tested and reproduced the issue. I think we can only use some plugins to generate the pdf to get the href link working in Edge Legacy.
You could use jsPDF to generate the PDF. Use .textWithLink() to mimic standard HTML hyperlinks:
doc.textWithLink(text, x, y, { url: url });
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<body>
<script>
var doc = new jsPDF('p', 'pt');
doc.textWithLink('link', 20, 30, { url: 'http://www.google.com' });
doc.save("info.pdf");
</script>
</body>
</html>
I use Spring for running my rest API service, i cant get the list of json object that my service send from a sample html file and plz tell me how can i access to the first object.
this is the sample output of my rest API service:
[{"src_ip":"1.1.1.1","src_id":"98","date":1470527874000},
{"src_ip":"1.1.2.1","src_id":"25","date":1470527934000},
{"src_ip":"1.1.2.1","src_id":"25","date":1470527934000}]
and this the code that i used in my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing Results</title>
<!--TODO badan version e CDN e jquery use shavad-->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "http://127.0.0.1:8080/restapi2",
dataType: "jsonp"
}).then(function(data) {
$('.List').append(data);
$('.data').append(data[0]);
});
});
</script>
</head>
<body>
<div>
<br><br>
<p class="List"></p>
<br><br>
<p class="data"></p>
</div>
</body>
</html>
I should say that when i run the sample of this link on my html file, it worked Properly.
Updated part:
after fixing last error,still I didn't get any correct data to show in my browser, but this time, the console get something but i don't know how to use them. this is a snapshot of it and the left side show that two object were sent.
and this content of that object:
Based on the discussion on the comment the reason is you were trying to access the different domain than your page which is prohibited by browsers as a security precaution.
$(document).ready(function() {
$.ajax({
url: "http://localhost:8080/restapi2"
}).then(function(data) {
$('.List').append(data);
$('.data').append(data[0].);
});
});
"No 'Access-Control-Allow-Origin' header is present on the requested resource"
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>
Here i have created web service and given public url for getting data from the data.I have written following code in office 365 developer preview(NAPA) default.htm page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>DemoApplication</title>
<link rel="stylesheet" type="text/css" href="../Content/Office.css" />
<!-- Add your CSS styles to the following file -->
<link rel="stylesheet" type="text/css" href="../Content/App.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>
<!-- Add your JavaScript to the following file -->
<script src="../Scripts/App.js"></script>
</head>
<body onload="GetData()">
<select id="CbxArea" style="width: 200px">
<option>Select Area</option>
</select>
<input type="button" value="submit" id="btnsubmit"/>
</div>
</body>
</html>
fallowing code is written in app.js file
Office.initialize = function (reason) {
};
function GetArea(){
var ddlArea = $("#CbxArea");
$.ajax({
type: "POST",
url: "http://192.168.3.252:8081/HaraveerWCF/ExcelDataService.asmx/GetAreaNames",
contentType: "application/json; charset=utf-8",
//url:"ExcelDataService.asmx/GetAreaNames",
dataType: "json",
success: function (data) {
for (i = 0; i < data.d.length; i++) {
ddlArea.append($("<option></option>").val(data.d[i].AreaName).html(data.d[i].AreaName));
}
},
failure: function (msg) {
alert(msg);
}
});
}
Where i have written wrong.Please help me out.Make sure total code is written in only online office 365 portal account.Not written in visual studio.
You have done little bit, we can say override to options html. You are placing values and the text of the each options:
for (i = 0; i < data.d.length; i++) {
ddlArea.append($("<option></option>").val(data.d[i].AreaName)
.text(data.d[i].AreaName));
}
You can achieve this with $.each():
$.each(data.d, function(i, v){
ddlArea.append("<option></option>").val(v[i].AreaName).text(v[i].AreaName);
});
With jQuery 1.4+, you could just do
for (i = 0; i < data.d.length; i++) {
ddlArea.append($('<option/>', { value : data.d[i].AreaName }).text(data.d[i].AreaName);
}
You may have run into a JavaScript cross-domain data access issue as you're trying to access a remote address from you Office 365 Preview site. If the return type of the request to the remote address is JSONP, then you may be able to override the cross-domain data access issue.
Check with your browser Developer Tools (invoke it with F12 keyboard shortcut & then look under Network tab) or Firefox Firebug if the remote server URL returns any JSONP data.