Dynamically fetching a web page in a particular div of webpage - javascript

I have a webpage wherein I want that onclick of a link or buttonn; the content of a particular div of webpage get updated and replaced with the content which I have scripted in other html page. How to do that?

There are several ways to do that .
<script>
function loaddata()
{
var xhr = new XMLHttpRequest();
xhr.open("GET","page.html",true);
xhr.onload = function(){
if(this.readyState === 4)
{
var div = document.getElementById("divid"); // the div where you want to load the data
div.innerHTML = this.responseText;
}
}
xhr.send();
}
</script>
html code
<button onclick="loaddata()">click</button>
<div id="divid"></div>
there are other ways to do that . but i have shown only javascript one
hope this helps you what you are looking for

Related

Scroll to a specific y position in element

I have a legacy application running in compatibility mode (IE11) in Edge Chromium. There is a portion of the page using AJAX to auto refresh a table every 10 seconds. When the users are scrolling through the results of the table, it auto refreshes and they loose their place in the table. The frequent refreshing is required due to a very dynamic environment.
The "window.scrollTo(0,yElemnt);" does not work because it tries to scroll the whole window instead of the table housed within TPicks.asp.
function ShowPicks(){
var elmnt = ""
var yElmnt = 0
if (document.getElementById("scrollPicks")) {
elmnt = document.getElementById("scrollPicks");
yElmnt = elmnt.scrollTop;
}
if (window.XMLHttpRequest) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("AutoPickDiv").innerHTML = this.responseText;
if (document.getElementById("scrollPicks")) {
alert(yElmnt);
document.scrollTo(0,yElmnt);
}
}
}
}
//alert("Picks.asp");
var RandNbr = Math.round(Math.random()*10000000);
xmlhttp.open("POST", "TPicks.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("rand=" + RandNbr);
}
How do I get just the table to scroll? I have the pixel position of where the table is currently scrolled to within "elmnt.scrollTop;". The alert after the AJAX call returns as complete shows where the current scroll position is also - "alert(yElmnt);".
Thank you for your help!
Your code is setting document.scrollTop to the y-axis when you should be targeting something different. You have to wrap your table in a element that can, e.g. a DIV. Then, you must apply a height and overflow-y CSS property to that element. Then, you need a javascript function that can set the scrollTop property of that element to zero.
Check out this jsfiddle for a working example: https://jsfiddle.net/bf4zngy7/
<div id="wrapper">
<div id="tablewrapper" style="max-height:100px; overflow-y:scroll">
<table border=1>
<!-- insert your data rows here -->
</table>
</div>
<div id="buttonwrapper">
<button type="button" onclick="scrollToTop()"">Scroll to top</button>
</div>
</div>
And when the button is clicked, this function fires:
function scrollToTop(){
const tablewrapper = document.getElementById('tablewrapper');
if(tablewrapper){
tablewrapper.scrollTop = 0;
}
}
In my solution, you are not actually scrolling the table, but rather the element that contains the table. Refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop for more information on why setting the scrollTop property of the element works.

Calling SVG Sprites with Ajax issue

I'm trying to call different external SVG sprites in a single HTML page. If I stick to one, everything works perfectly, as soon as I want to call different SVG sprites I end up with only one loading. So basically, it loads only one sprite and ignores the others. Am I missing something in the syntax here?
I'm using the following ajax code // I'm a newbie, so I'm sure I'm making a terrible mistake here :)
<script>
var ajax = new XMLHttpRequest();
ajax.open("GET", "sprite1", "sprite2", "sprite3", true);
ajax.send();
ajax.onload = function(e) {
var div = document.createElement("div");
div.innerHTML = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
}
</script>
Then in HTML
I'm using this
<svg class="sprite1">
<use xlink:href="#icon-name"></use>
</svg>
Sorry for using the answer for this but it is a bit longer code.
var ajax = new XMLHttpRequest();
ajax.open("GET", "sprite1", "sprite2", "sprite3", true);
ajax.send();
ajax.onload = function(e) {
e.ondata = (chunk) => {
console.log(chunk);
}
var div = document.createElement("div");
div.innerHTML = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
}
It is but a flying thought, but might work.

Get an element in an <embed> tag

I'm a beginner in Javascript and i'm trying to get an element from an embed tag. This embed tag contains a pdf.
I want to get the button "next page" from the pdf viewer, and simulate a click on it, in order to automaticly scroll to the next page of the pdf.
My HTML code is something like this (really simplified) :
<html>
<body>
<div id="display-zone">
<embed id="myPdf" src="./myPdf.pdf">
#document
<html>
<body>
<!-- The button I want to get in my JavaScript -->
<button id="next" class="toolbarButton pageDown"></button>
</body>
</html>
</embed>
</div>
</body>
</html>
My JS code to print the pdf viewer on the web page :
affichage.innerHTML = "<embed class=\"media\" id=\""+ongletsMedias[i].firstChild.data+"\" src= \""+ongletsMedias[i].firstChild.data+"\" width= \"1000\" height= \"800\">";
// ongletsMedias[i].firstChild.data equals to "myPdf"
t = 5000; // time before starting pdfDefile()
setTimeout(pdfDefile,t,ongletsMedias[i].firstChild.data,i,1); //call the function to scroll pdf pages
And finally my function pdfDefile() that I'm calling in order to scroll the pdf pages :
function pdfDefile(dir,i,page) {
var xhttp = new XMLHttpRequest();
var t = 0;
xhttp.onreadystatechange = function() {
var checkbox = document.getElementById('checkbox');
if (this.readyState == 4 && this.status == 200 && checkbox.checked) {
document.getElementById("span").innerHTML = this.responseText; // display the number of pages of my pdf
var t = 5000;
if (page < parseInt(this.responseText)) { //test for recursive call
/*HERE is where I want to get the "next" button */
setTimeout(pdfDefile,t,dir,i,page+1);// recall this function while there is a next page to display
} else {
setTimeout(jouerMedia,t,i+1);// call the main fuction, no problem here
}
}
};
xhttp.open("GET", "nbPagesPDF.php?pages="+dir, true);
xhttp.send();
}
I already look at an existing topic (Get element in embed tag), but I can't make it work in my JS.
So please, can you help me to make my code great again (may it have been ;-) ) ?
Regards
Try
var embed = document.getElementById('myPdf');
// Wait for document to load inside embed element
embed.on('load', function() {
embed.getElementById('next').click();
});
(I am using jQuery in this example for adding the event listener, not sure if you are using it on your project?)
Without jQuery you could do:
var embed = document.getElementById('myPdf');
embed.onload = function() {
embed.getElementById('next').click();
};
It might be possible you can not trigger a click event on that button since a user action often must have taken place to trigger click's from js.

How to display results with Javascript and cgi, besides <iframe> and <object>?

I have an input form which in realtime display the results from three different cgi-based lookups.
My first approach was to have three iframes which i change the .src for every search, which works but feels unnecessary:
<iframe id="iframe1">
document.getElementById("iframe1").src="/cgi-bin/one.cgi";
My second approach was having three object:s which have their .data changed, but that also feels and looks bad:
<object id="object1">
document.getElementById("object1").data="/cgi-bin/one.cgi";
Both of the above examples works - functionally, but I would like to know a better way to do it. For example how do I get the same results using DIVs ? I.e. no iframe:s or object:s.
The alternative is to use AJAX. This means that you have to create and send an XMLHttpRequest. When the response is received, you have to put it into a <div>.
Here's a minimalistic example:
var div = document.getElementById("results");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
div.innerHTML = this.responseText;
} else {
div.innerHTML = "<h1>Error " + this.status + "</h1><p>The content could not be loaded.</p>";
}
}
};
xhttp.open("GET", "/cgi-bin/one.cgi", true);
xhttp.send();
For cross-browser compatibility, I recommend to use this function or the jQuery ajax function.

Load page in div, go to top of that div

I have:
<script language="javascript">
function arata(temp) {
var req = new XMLHttpRequest();
req.open("GET", temp, false);
req.send(null);
var page = req.responseText;
document.getElementById("produs").innerHTML = page;
}
</script>
and:
See details
and:
<div id="produs"></div>
So, when the link is clicked, the page loads in to div.
How can I do to align the top of div to the top of the viewpoint? I mean... something like using an #anchor.
Try:
document.getElementById('produs').scrollIntoView();
See here for more info:
https://developer.mozilla.org/en/DOM/element.scrollIntoView
If you want to do it with an anchor, you can add one <a name="produs"></a> above the div and it should work if you do not return false on the click event.

Categories