I would like to know what can I do to show a list into a html page using jquery.html and $getJson,
I have a server.js running on http:localhost:8080/list and I want to show the list between html tags
the html code
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script>
$.get( "http://localhost:8080/clubs", myCallBack );
</script>
</body>
</html>
The myCallBack is where you define a function which can take the data as a parameter.
$.get("http://localhost:8080/clubs", function (data) {
$("#myDiv").html(data);
});
HTML
<div id="myDiv"></div>
The jQuery Documentation for jQuery.get() includes the following example:
$.get("ajax/test.html", function(data) {
$(".result").html(data);
alert("Load was performed.");
});
Related
So, I'm trying to render a template from an external file, and when I render it, it "works," just that it sends the script, not the actual script contents to the target.
I tried using the jquery .html() function to grab the inside contents of the script, but all I get is "undefined"
This is the body content:
<div id="target"></div>
<script>
var context = {"name": "Test"};
$.get('template.handlebars', function (data) {
var templateScript = Handlebars.compile(data);
var html = templateScript(context);
$(document.body).append(html);
}, 'html')
</script>
What I get is this:
<div id="target"></div>
<script>blah blah blah</script>
<script type="text/x-handlebars-template" id="template">
<h1>Test</h1>
</script>
Instead of
<div id="target">
<h1>Test</h1>
</div>
In response to someone's question:
Doing "body" instead of document.body has the same effect. The contents of the template document are:
<script type="text/x-handlebars-template" id="template">
<h1>{{ name }}</h1>
</script>
In your scenario, you have the handlebars template in a separate file –– which is not a HTML file, so you should try removing the script tag. According to the handlebars docs, they want you to include the script tags for shielding from HTML parser, but in your case that should not be a problem.
Next your jQuery $(document.body).append(html); is selecting the document body and appending the resulting HTML snippet.
To achieve the:
<div id="target">
<h1>Test</h1>
</div>
you'll have to select the target div. Doing a $("#target").html(html); should solve that issue.
I've created a sample to simulate your scenario, hope this gives more insight.
HTML file contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
</head>
<body>
<div id="target"></div>
<script>
var context = { name: "Test" };
$.get(
"template.handlebars",
function(data) {
var templateScript = Handlebars.compile(data);
var html = templateScript(context);
// $(document.body).append(html);
$("#target").html(html);
},
"html"
);
</script>
</body>
</html>
Handlebars template file contents:
template.handlebars
<h1>{{ name }}</h1>
References
https://handlebarsjs.com/
I want to display weather conditions of the city Morgins in a html page. How do I show the response of my query? I am testing from my own laptop in de Google Chrome Browser. This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
</head>
<body>
<script>
function getWeather() {
var url = 'http://api.openweathermap.org/data/2.5/forecast/daily?q=morgins&APPID=001b0f58045147663b1ea518d34d88b4&mode=xml&units=metric&cnt=10';
loadJSON(url, gotData);
}
</script>
</body>
</html>
Now it's a blank page but I want to display some weather elements of this 10 day forecast eventually...
Your data should be returned in the form of JSON not xml. remove the mode as xml
also i made few modifications as below to show data in div.
DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Setup</title>
</head>
<body>
<div id="app"></div>
<div id="parsed_json_api">
</div>
<script src="index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- https://home.openweathermap.org/api_keys -->
<script>
jQuery(document).ready(function($) {
var parsedData = $('#parsed_json_api');
$.ajax({
url: "https://api.openweathermap.org/data/2.5/forecast/daily?q=morgins&APPID=001b0f58045147663b1ea518d34d88b4&units=metric&cnt=10",
dataType: 'json',
success: function (data) {
data = JSON.stringify(data);
parsedData.append('<div>'+data+'</div>');
}
});
});
</script>
</body>
</html>
I'm getting started with backbone.js and i want to build a template, containing only a html button, with my model attributes. So I defined a template in my html page as below:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
</body>
</html>
and I'm trying to build my template in my view:
var Bouton_View= Backbone.View.extend({
view_template: _.template( $('#button_template').html() ),
events:{
'click':'onClick'
},
initialize: function(){
this.$el=('#here');
},
render: function(){
this.$el.html(this.view_template(this.model.attributes));
return this;
},
onClick: function(){
var increment=0;
increment=this.Model.get("number_of_click")+1;
this.Model.set({"text":increment});
this.Model.set({"number_of_click":increment});
this.render();
}
});
but when I run the page in the browser this error message show up:
I'm pretty sure the js file is not wrong because I've try this with another html file and it worked. So what is wrong with my template? thanks in advance
Why so?
Spoiler: the underscore templating engine is fine in this case.
This example's problem is that the code which describes your Bouton_View, which probably lies here:
<script src="backbone_test5.js"></script>
is executed before the DOM parser reaches
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
element. This can be described as
Load backbone_test5.js file and execute its contents
Execute _.template( $('#button_template').html() )
Search DOM for element with id="button_template"
None found
Execute .html() function on a non-existent $ element => this results in null
Execute _.template(null) => this gives you the error you mentioned
How to fix?
There are several ways to do that.
HTML-only. Re-order the code so that DOM elements exist when queried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</body>
</html>
With some js-code. You can wrap the contents of the backbone_test5.js file with the $(...) so that it only executes once the DOM content is ready:
$(function () {
var Bouton_View = Backbone.View.extend({ /* ... */ });
});
How can i update a webpage and url without reloading the web page. I saw this at SoundCloud and i want to use this at my own project.
This is an idea of what i want:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<?php
$url = $_SERVER['REQUEST_URI'];
if (url == /login){
include 'php/login.php';
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/login')
});
</script>"
}
if (url == /home){
include 'php/home.php'
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/home')
});
</script>"
}
?>
</html>
the problem is, when i enter www.mydomain.com/home for example i get (of course) a server error that the file not exists. How can i fix this problem?
Try window.location.hash=your_hash_string in JavaScript
That file doesnt exist. Error occur when some php script on ur server is utilizing those file locations.
Try something like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div id="navigation">
<ul>
<li>Login</li>
<li>Home</li>
</ul>
</div>
<div id="content"></div>
</body>
<script type="text/javascript">
function _load_content(url) {
$("#content").slideUp("slow", function() {
$("#content").html('<p align="center">Loading...</p>');
}
$.ajax({ type: "get", url: url,
success: function(response) {
$("#content").html(response);
$("#content").slideDown("slow");
},
error: function() {
alert("An error occured");
}
});
}
$(document).ready(function() {
_load_content("php/home.php");
});
</script>
</html>
NOTE: This is the very basic function I made... You should really learn jQuery AJAX.
I am trying to remove all the links from a parsed site which has then had a div removed and placed in the main code. The problem is that I am trying to remove all the 'href' links in the extracted div but am unable to get anywhere. I have tried using 'CSS' and works but only in chrome and I have to use IE. I have looked at 'php simple html dom' parser to see if i could do it before the file is saved but can't get anything to work. so my last resort is to use 'jquery' but the problem is that the links to remove is being extracted from the file and is not directly in the code. If anyone could help me I would really appreciate it. below is the code I am using.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>example News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://example.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
</body>
Just remove the href attribute from the <a /> tags
$("#postsArea").load( "site/result.htm", function() {
$("#postsArea a").removeAttr("href")
});
If you still want the tags to appear clickable...
$("#postsArea a").removeAttr("href").css("cursor","pointer");
Hope this helps
Try this:
$('document').ready(function () {
$.ajax({
url : 'site/result.htm',
dataType: 'html',
success : function(html){
$html = $(html).find(a).attr("href", "");
$("#postsArea").html($html);
},
error : function(){
$("#postArea").html("<div>No Data Found.</div>");
}
})
});
Here's how I did it:
$(function() {
$('a[href]').each(function() {
var link = jQuery(this);
link.after(jQuery('<span/>').text(link.text()));
link.remove();
});
});
It replaces Foo with <span>Foo</span>.