I have a select dropdown that when updated takes the new variable and dynamically updates the div directly below it.
HERE is my select input:
<select name='region_name' onchange='showDistrict(this.value)'>
here is my javascript that controls the dynamic stuff:
<script>
function showDistrict(str)
{
if (str=="")
{
document.getElementById("district_div").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("district_div").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdistrict.php?q="+str,true);
xmlhttp.send();
}
</script>
The page getdistrict.php?q= does another MySQL call and loops out info into the div "district_div" MY PROBLEM IS... that div region does not stretch correctly in IE 7. So my dynamic data overlays everything below it.
When I look at the source with firebug I don't even see the new html from innerHTML so I am not sure this is a css issue or something having to do with .innerHTML
do not set any width or height for this DIV, or set only min-width min-height, and you can also set overflow:hidden for this DIV
Related
For some reason the methods to scroll to bottom of div are not working for me after refreshing its contents using Ajax.
I think the issue has something to do with how the DOM works--eg when it makes its changes, however, I don't know enough about javascript or the DOM to really understand how that would interfere with scrolling to bottom.
So I think the issue is when and how to call the methods rather than the methods themselves. Can anyone suggest a way to scroll to bottom after the refresh of div?
Methods to scroll to bottom I am trying:
Method 1:
var element = document.getElementById("chatBox");
element.scrollTop = element.scrollHeight;
Method 2:
document.getElementById('chatBox').scrollIntoView({ behavior: 'smooth', block: 'end' });
Method that refreshes div:
function refreshDiv() {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("got 200");
document.getElementById("chatBox").innerHTML=xmlhttp.responseText;
alert("will now try to update Scroll");
//FOLLOWING HAS NO EFFECT POSSIBLY BECAUSE DOM HAS NOT YET RETURNED RESULTS
document.getElementById('chatBox').scrollIntoView({ behavior: 'smooth', block: 'end' });
}
}
xmlhttp.open("GET","refreshDiv.php,true);
xmlhttp.send();
return;
//THIS ALSO HAS NO EFFECT POSSIBLY AS IT IS AFTER RETURN
document.getElementById('chatBox').scrollIntoView({ behavior: 'smooth', block: 'end' });
}
What is the proper place to call scroll to bottom after refreshing div?
use this script to scroll to bottom of div
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
I have a code that is supposed to get an external page (In this cage, php) parse and load inside another page, it's like an iframe, but it uses javascript. The code is working, but it's the last thing that is executed on the page, it has to wait everything on the whole page to load, so it can be executed.
What I need to achieve is that I need it to load with the page, or before the page loads.
I believe it's because of the even window.addEventListener.
<div style="min-height:300px;
display: block;">
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv020103").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://www.jonasweb.net/samples.php",true);
xmlhttp.send();
}
if(window.addEventListener){
window.addEventListener('load',loadXMLDoc,false); //W3C
}
else{
window.attachEvent('onload',loadXMLDoc); //IE
}
</script>
<div width="100%" id="myDiv020103"></div>
</div>
<div style="clear:both"></div>
I tried creating a fidle, but it's not working, http://jsfiddle.net/5wcncs1x/
It only works on a host.
I found out by myself. Just had to change:
if(window.addEventListener){
window.addEventListener('load',loadXMLDoc,false); //W3C
}
else{
window.attachEvent('onload',loadXMLDoc); //IE
}
for
document.addEventListener("DOMContentLoaded", loadXMLDoc, false);document.addEventListener("DOMContentLoaded", loadXMLDoc, false);
I want to dynamically reload only one div in my page every five seconds. But in my response I get the content of the whole page... How can I get only the content of the specified div ?
<script>
function ajaxrefresh()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//Here i want only the content for the div from the response
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
else
{
//alert("state: "+xmlhttp.readyState)
//alert("status: "+xmlhttp.status)
}
}
xmlhttp.open("GET","http://${localHostAddress}:8080/adress",true);
xmlhttp.send();
var t=setTimeout(ajaxrefresh,5000);
}
window.load = ajaxrefresh();
</script>
Someone has already ask something like this on SO. Best voted-up is to create an invisible div in your page, and fill it with the AJAX response to be able to get back element you need with hiddenDiv.getElementById("myDiv").
As you can not use Jquery, I think your best bet is in response to ajax call return only the div contents from server side. this way your response size will be smaller and hence faster too...
if you can not change the response of request use below code
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//Here i want only the content for the div from the response
var mydiv= document.getElementById("myDiv");
var doc=document.createElement("div");
doc.innerHTML=xmlhttp.responseText;
document.body.appendChild(doc); // Note append temp to document
mydiv.innerHTML=doc.getElementById("theDivYouWant")
.innerHTML;
document.body.removeChild(doc);// Note remove temp from document
May be you will get some idea from below script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_div_refresh = setInterval(function(){
$('#load_data').load('fb_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
You could try something like this:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//Here i want only the content for the div from the response
var doc=document.createElement("div");
doc.innerHTML=xmlhttp.responseText;
document.getElementById("myDiv").innerHTML=doc.getElementsByTagName("div")[5]
.innerHTML
Here 5 is just a random number, if the div is always fixed you can use the number that the div is located and if it's not you need to loop through the divs and find the one you're looking for (maybe based on id).
<script>
function showPrice(str)
{
if (str=="")
{
document.getElementById("remaining").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("remaining").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getevent.php?q="+str,true);
xmlhttp.send();
}
</script>
The following code returns data to the respective div, but when I see the source code I am unable to find the newly inserted code.
That's because it's added dynamically into the dom. Some browsers show the updated html if you right click and inspect the elements (Chrome and firefox). Others are just showing you the begin version of how it's downloaded.
I have a folder of images, these images need to display on a HTML page I'm using a excel spreadsheet exported to XML which is imported into HTML using Javascript: (copied and pasted from w3schools).
What I need to do is get the images from the images folder using XML and display it in between h2 and h3.
How do I do this and what would it look like in the XML file and Javascript below?
Each div (below) then needs to be a link to different pages?
Also the items on the XML needs to be indexable/searchable I have google custom site search.
Thanks in advance.
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","cdcat.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<div class=\"feat_product\"><h2>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</h2><h3>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</h3></div>");
}
</script>
I will not write your code for you, but explain the approach:
You need to use img elements and set the src attribute to the public path the images are exposed on. This is in javascript.
In your XML, for each CD element you will need to pass in the image path as well to be consumed by the javascript.