It works without a problem, but since I am a beginner, I am not sure if this is the right way to do this. On my main html page I have a div that contains some product details. I want them to be loaded from my database and shown on the page as soon as the page loads. Something like on the www.amazon.com page. As soon as we load the page there are products with pictures, prices etc... This is the way I do it...
My HTML Page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body >
<div id="PictureDiv"></div>
<div id="NameDiv"></div>
<div id="PriceDiv"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="javascriptjs"></script>
</body>
My JavaScript File:
OnPageLoad (); // executes as soon as the page loads
function OnPageLoad () {
$.ajax({
url: 'getProducts',
method: 'GET',
success: function (data) {
$("#PictureDiv").html(data.pic);
$("#NameDiv").html(data.name);
$("#PriceDiv").html(data.price);
},
error: function (error) {
// handle error
}
});
}
So is this the way it is done or? Some advice will be much appreciated.
Related
innerHTML appears then quickly disappears in under a second, div in a jquery load file.
main.js
$(document).ready(function () {
$('#page1').click(function () {
$('#page-content-wrapper').load('page1.html');
document.getElementById("changeme").innerHTML = "Paragraph changed!";
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<script src="js/site.js"></script>
<meta charset="utf-8" />
<title>TimeApp</title>
</head>
<body>
<a id="page1">Page 1</span></a> <a id="page2">Page 2</span></a>
<div id="page-content-wrapper">
<!-- Page content is loaded here -->
</div>
</body>
</html>
page1.html
<div id="changeme"></div>
The issue is because load() makes an AJAX request to retrieve the content from page1.html. While this is happening you update the innerHTML of the element within the #page-content-wrapper. When the AJAX request completes, the content of page1.html overwrites the existing content - which you just updated.
To fix the problem put the line which updates the text of the element in the callback of load(), so that it's only ever executed after the AJAX request:
jQuery($ => {
$('#page1').click(function() {
$('#page-content-wrapper').load('page1.html', () => {
$("#changeme").text("Paragraph changed!");
});
});
});
Better still, put the content you need in to page1.html directly, to avoid this unnecessary code.
Is there a way to handle scripts loading through Ajax page calls? I would like to not load those already loaded in the first place by the base page as they are in conflict.
Is the solution to create multiple pages one for the normal call (with the scripts) one for the ajax ones (without the scripts that are duplicates)?
Example:
base_page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>
<div id="ajax_page"> </div>
<div id="other_ajax_call"> </div>
<div id="second_result"> </div>
</script>
$(document).ready(function(){
$.ajax({
url: '/ajax_page',
type: 'GET',
success: function (result) {
$('#ajax_page').html(result)
}
});
});
$( "#other_ajax_call" ).on( 'click', function() {
$.ajax({
url: '/another_page',
type: 'GET',
success: function (result) {
$('#second_result').html(result)
}
});
});
</script>
</body>
</html>
ajax_page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>
<div id="ajax_second_page"> </div>
</script>
$(document).ready(function(){
$.ajax({
url: '/a_third_page',
type: 'GET',
success: function (result) {
$('#ajax_second_page').html(result)
}
});
});
</script>
</body>
</html>
In this example, on the 'base_page' I load through Ajax 'ajax_page' that itself is using Ajax (this page is usually called without Ajax and therefore will need to keep the script).
The problem is that when this is done, the jquery scripts are in conflict and the second ajax call of the 'base_page' (for "#other_ajax_call") is not working and I receive the following exception :
Uncaught TypeError: $.ajax is not a function
This is a repost of Ajax call - Loading page script only if not there in the base page that was closed as I first didn't put enough details and my question was not clear enough and I have no way to reopen it.
Since you are getting the full pages anyway it doesn't make sense to do that with ajax, especially when it breaks proper HTML. What you could do is to use an iframe to display your pages, and then manage them with some simple javascript in the parent document.
For example:
<!-- iframe for one of your pages -->
<iframe id="page-foo-iframe"
title="page foo"
width="100%"
height="100%"
src="/a_third_page">
</iframe>
<script>
/*
* You can have a button, or something else, call these functions
* whenever you need to show/hide a page.
*/
function showIframePage(id) {
let page = document.getElementById(id);
page.style.display = "block";
}
function hideIframePage(id) {
let page = document.getElementById(id);
page.style.display = "none";
}
</script>
I would also suggest that you look into using a framework, in particular the JS ones like Vue/React/Angular, because they will make handling things like this a lot simpler and easier to maintain. If you have to load full documents though, iframes are the best way to do that.
I have here an HTML page which is supposed to be fetching a list of data, but apparently due to server migration ASP is not working. So I want to fetch data without using any language but just pure JavaScript and an HTML page. I think that storing my data in a text file (.txt) and fetching it via JavaScript will do. And the condition will be every month there is different text file to be fetched. Is this possible?
$(document).ready(function(){
$.ajax({
url: "https://www.w3.org/TR/PNG/iso_8859-1.txt"
}).done(function(response) {
$('#data').html(response);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data"></p>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "https://www.w3.org/TR/PNG/iso_8859-1.txt"
}).done(function(response) {
$('#data').html(response);
});
});
</script>
</head>
<body>
<div id="data"></p>
</body>
</html>
I have searched for 5+ hours on this site and tried every code possible on getting this to work. I found a code on here that does pull info from a text file but it displays it into a box. What im trying to do is for it to be displayed inside the page not inside a popup box and to update every second. Also trying to display more than 1 .txt document in horizontal order if possible. Anyone know how I can alter this so it will display properly?
Currently shows this:
what it currently showing
what Im trying to do
Any help would be appreciated, thanks so much for your help
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script src="jquery.min.js"></script>
</head>
<Body>
<p><center>Current Track: <span id="trackinfo">No track information available at this time</span></p></center>
<script>
function radioTitle() {
var url = 'localhost/text.txt';
jQuery.get('http://localhost/text.txt', function(data) {
alert(data);
});
$.ajax({
type: 'GET',
url: url,
dataType: 'text',
success: function(data) {
$("#trackinfo").html(data)
},
error: function(e) {
console.log(e.message);
}
});
}
$(document).ready(function(){
setTimeout(function(){radioTitle();}, 2000);
setInterval(function(){radioTitle();}, 15000);
});
</script>
</body>
</head>
</html>
I am trying to use ajax to change the content of a div (as html), when a link is clicked in that same div. I am not very skilled in ajax, so I am pretty sure that this is a noob question. I have tried searching the web for solutions, but I didn't manage to make anything work.
I have a div with the id "main" and inside it I am trying to make a link with the id "link01". When "link01" is clicked, I want "main" to load content from another div in another page ("txt2"-div in site2.html). But I can't get it to work.
Firstly, this is my index.html page:
<head>
<title>site1</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#link01').click(function() {
$('#main').load('site2.html #txt2', function() {});
});
});
</script>
<div id="main">
<a>
<div id="link01">link</div>
</a>
Main div where the content will change</div>
<br>
<br>
</body>
</html>
And this is my site2.html page:
<!DOCTYPE html>
<html>
<head>
<title>Site2</title>
<meta charset="UTF-8">
</head>
<body>
<div id="txt2">Text that will go into the main div at the index-page when link01 is clicked (contains links, images, etc)</div>
</body>
</html>
I have probably misunderstood something completeley.
There is a very bad practice way that may work... But you should really have a server side code that listens you your ajax call, and returns just the desired HTML fragment as a response. Having said that, try this, it MIGHT work (didn't check):
$(function() {
$('#link01').click(function(){
$.ajax({
url: 'site2.html',
type: 'GET',
success: function(data){
data = $(data);
var $div = $('#txt2', data);
$('#main').html($div);
}
});
});
});