Ajax: Load content to a div from another div - javascript

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);
}
});
});
});

Related

innerHTML disappearing quickly from div in jQuery load file

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.

Handling script loading when loading page through Ajax

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.

Load content on html page on page load

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.

reloading a div with javascript without reloading the whole page

hi i want to reload a div when i click on a button, am looking for simplest code using JavaScript, i tried several codes but none of them worked,this is my last script and it didn't work either
this is my code
You can use the html() method in jquery to get the content as well as modify the content of a div.
Find the working example here:
https://jsfiddle.net/dke1Lw5n/
Find the code below:
<html>
<head>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#btn_click').on('click', function () {
$('#publish').html($('#publish').html() + 1);
});
});
</script>
<body>
<div id="publish">5</div>
<button type="button" id="btn_click">clickme</button>
</body>
</html>

How to get text from <p> tag using JavaScript?

I want to change the content of the p tag after three seconds using setInterval() method. Then after three seconds I want to change the content inside of the p tag, with a new interval of 5 seconds. This is my code snippet:
background.js
var notify;
var word=function(){
$.get("http://localhost/chrome-notification/dosya.php", function (data) {
$('#container').html(data);
});
};
setInterval(word,3000);
setInterval(function(){
$.get("http://localhost/chrome-notification/", function (response) {
notify=$(response).getElementsByTagName('p')[0].innerHTML;
});
},5000);
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="background.js"></script>
<title>Vocabulary</title>
</head>
<body>
<p id="container">
</p>
</body>
</html>
This can be done in pure js.
var text = document.getElementById('container').innerHTML;
Is this what you need?
Since you are using jQuery, you can simply do $(response).find('p:eq(0)').html()
I've written some more examples here https://jsbin.com/modaxayaki/edit?html,js,console
If i understaned good, i would recommend adding CSS and linking it to html.
(If is that for what you need it for)
Make tag in css and customize it

Categories