i have a span with the same value..
echo "<span id='msgNotif1' class='badge' style='position:relative;right:5px;bottom:10px;'>".$number."</span>";
where $number have a value..
and my js code is..
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var val = xmlhttp.responseText;
//alert(val);
document.getElementById("msgNotif1").innerHTML = val;
//document.getElementById("msgNotif2").innerHTML = val;
alert(val);
//document.getElementById("msgNotif3").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "some page", true);
xmlhttp.send();
the problem is the value still remains and do not change,
trying to uncomment the first alert shows an alert with the right value, but when i try to comment it the second alert never executed, giving me an idea that the document.getelementbyid().innerhtml is the one that is not working, been with this for a few hours,
any help will be appreciated.
thanks in advance
Your error message Cannot set property 'innerHTML' of null" means that:
document.getElementById("msgNotif1")
is returning null. That can happen for several possible reasons:
There is no element in your page with id="msgNotif1".
You are calling this code before your document has finished loading and thus the element with id="msgNotif1" has not yet loaded. This can commonly happen if you execute your code in the <head> section of the document rather than at the very end of <body> or in response to the DOMContentLoaded event.
Your content is dynamically loaded (not in the original page HTML) and you are calling document.getElementById("msgNotif1") before your dynamic content has been loaded.
You have some HTML errors which are preventing the proper parsing of your HTML that contains the element with id="msgNotif1".
For a general purpose description of how to run Javascript after the current page has been loaded without using a framework like jQuery, see this answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
You are receiving this error in your console because it doesn't exist at the time your script is running. This can be caused if the element hasn't been loaded when your script is running, if your IDs aren't the same, or if the element doesn't exist in your html. If you are referencing the element before it loads, add a function that executes when your page loads.
You can use JQuery
$(document).ready(function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var val = xmlhttp.responseText;
//alert(val);
document.getElementById("msgNotif1").innerHTML = val;
//document.getElementById("msgNotif2").innerHTML = val;
alert(val);
//document.getElementById("msgNotif3").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "some page", true);
xmlhttp.send();
});
or with pure Javascript to create the event.
window.onload = function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var val = xmlhttp.responseText;
//alert(val);
document.getElementById("msgNotif1").innerHTML = val;
//document.getElementById("msgNotif2").innerHTML = val;
alert(val);
//document.getElementById("msgNotif3").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "some page", true);
xmlhttp.send();
};
Valid points have been brought up in that doing Ajax requests with pure Javascript takes much more code than if you were to use JQuery. This is the reason why I (and many others) use JQuery for all the Ajax requests performed. JQuery has many methods for Ajax that will save a lot of time and code and in the long run will reduce your file size by a few bytes since, with JQuery, the code is reused.
Related
I am ganging my head against the wall for 3 hours now. I have this code:
function showpctask() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("pcactivitytask").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","showpctask.php"+,true);
xmlhttp.send();
}
that opens up a php file inside a div (id = pcactivitytask). That php file builds a 'select'
I also have this function right here:
function setpctaskwidth() {
var maxtaskwidth = 0;
$("div .pcactivitytask").each(function(){
c_width = parseInt($(this).width());
if (c_width > maxtaskwidth) {
maxtaskwidth = c_width;
}
});
alert (maxtaskwidth);
}
that will show me the max width of all elements with the the class of "pcactivitytask". Yes, the select created by the previous script has that class. If I call both these function it will NOT include the width of the NEWLY created select..... I need to run it AGAIN 'manuall'. I need my script to "onclick" BOTH build the NEW select AND include it in finding the max width by the second script. Thank you.
XMLhttprequest works asynchronously, meaning it does not happen in order.
that is why you have the xmlhttp.onreadystatechange callback function, that only runs once the request is finished
you do not specify how you call these two functions but I would expect to see the call to setpctaskwidth() inside the onreadystatechange function like this:
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("pcactivitytask").innerHTML = xmlhttp.responseText;
setpctaskwidth();
}
};
be advised that if the response includes images or other external resources (fonts etc) that don't already exist in the page you might get a different size than the actual final size (it will measure the size before the image is loaded)
I am working on getting a dynamic page set up on my site where clicking a "More Info" button triggers a loadBCW.js script which updates a <div>'s innerHTML using a text file saved elsewhere. I've got that working perfectly using this loadBCW.js:
document.getElementById("loadBCW").addEventListener('click',function(){
var url = "/wp-content/themes/DICE/js/descriptionBCW";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
document.getElementById("demo").innerHTML = url;
}, false);
My issue is, when I click one of the "More Info" buttons in order to change the <div>'s innerHTML, it will flash the variable url in the <div>, then the correct elements overwrite it.
How can I instruct js to NOT flash the variable url onscreen before actually updating the <div>?
Maybe get rid of the code that sets the div content to be the URL in the first place? I've commented out the line you should remove:
document.getElementById("loadBCW").addEventListener('click',function(){
var url = "/wp-content/themes/DICE/js/descriptionBCW";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
// document.getElementById("demo").innerHTML = url;
}, false);
You're making an asynchronous request to an external source, so the code inside the xhttp.onreadystatechange won't run until the file was successfully retrieved. There's not really anything you can do about this other than optimize your site to run faster than . So if you don't want the URL to be visible, there's no point in setting it in the first place.
However, this would be even worse if it was a sync request, as not only will it slow you performance, but since document.getElementById("demo").innerHTML = url; is after your function, it is guaranteed to end by replacing the content with the URL.
I understand that jQuery will not run when the DOM content is being loaded via AJAX. But I'm confused as to the reason why. My understanding was that the DOM elements didn't exist at the time the jQuery was initiated therefore it won't find the correct IDs or classes.
But I have a situation where the jQuery is only called AFTER all the content has been loaded via AJAX. yet it still does not work.
Here is my code. I am trying to get the function decorateGains() to run after AJAX completes.
loadData('7-days'); // Runs the default AJAX for 7 days
function loadData(type){
var xmlhttp;
if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("home-table").innerHTML=xmlhttp.responseText;}
}
xmlhttp.open("GET","actions/get-data-"+type+".php",true);
xmlhttp.send();
decorateGains();
}
You can see that I am including a call to the function decorateGains() right at the end of the loadData() function.
The decorateGains() function does run, as I can see my console message. However it does not do the task that it should.
function decorateGains() {
console.log('here');
$(".gains").each(function() {
var num = +($(this).text());
if (num > 0) {
console.log('here');
$(this).addClass("positive");
}
if (num < 0) {
console.log('here');
$(this).addClass("negative");
}
});
}
(The script searches for all elements with a class of .gains and adds a new class of positive or negative depending on the content of the element. Essentially it decorates the .gains element to be red or green depending on whether the number is negative or positive).
This is because the AJAX call is asynchronous. The request has not been completed (and therefore the new content has not been appended to the DOM) when you call your decorateGains() function. You need to place the call to the function inside the onreadystatechange handler, after setting the innerHTML:
loadData('7-days'); // Runs the default AJAX for 7 days
function loadData(type) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("home-table").innerHTML = xmlhttp.responseText;
decorateGains(); // <-- move this in here
}
}
xmlhttp.open("GET", "actions/get-data-" + type + ".php", true);
xmlhttp.send();
}
I want to write a JavaScript code that load HTML contents of a given URL and place the loaded HTML code exactly where the script is placed. (maybe this looks like functionality of the iframe tag, but i dont want "iframe tag" become a medium. i just want to load the html code and place it there without adding any container or extra parent)
something like this:
var url = "http://example.com/";
var html = loadhtmlcontents(url); // something like simplexml_load_file($url) for php and xml
document.write(html); // somthing like saveHTML() in DOMDocument class of php
I've tried AJAX approach but it doesn't work:
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.wirte( xmlhttp.responseText);
}
}
xmlhttp.open("GET", Url, false );
xmlhttp.send();
could you please give me an equivalent or correction to these? (pure JS approach is preferred to JQuery for me in this situation)
Getting the current script tag is possible, but here's another approach (keep in mind it replaces the entire element with the id tag):
In the body tag:
<script id='test'>docWrite('test', '/echo/html')</script>
Javascript declaring a new function:
function docWrite(id, url) {
var xmlhttp = new XMLHttpRequest(),
_id = id;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4
&& xmlhttp.status == 200) {
var el = document.getElementById(_id),
textnode = el.firstChild,
div = document.createElement('div');
div.id = _id;
div.appendChild(textnode);
el.parentNode.insertBefore(div, el.nextSibling);
el.parentNode.removeChild(el);
console.log(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, false );
xmlhttp.send();
}
http://jsfiddle.net/dpgk1Lx2/
Here, all I'm doing is copying the contents of the id-related tag (there is no responseText to display). In your usage, you would do this instead:
function docWrite(id, url) {
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4
&& xmlhttp.status == 200) {
var el = document.getElementById(_id)
div = document.createElement('div');
div.id = _id;
div.appendChild(xmlhttp.responseText);
el.parentNode.insertBefore(div, el.nextSibling);
el.parentNode.removeChild(el);
}
}
xmlhttp.open("GET", url, false );
xmlhttp.send();
}
I know you are looking for a jQuery-less version... but I'm going to post this first... just to indicate how simple it is (and it works around browser differences in making AJAX calls, handling callbacks etc. for you).
<div id="someID"></div>
<script>$('#someID').load('someurl.html');</script>
I think there's some kind of non-fatal bug in my script that's not allowing me to a/ debug the script with Firebug and b/ causes Firefox to constantly display a Connecting... (with the swirly) while I'm on the page. The script seems to run fine though.
Any ideas what could cause that?
<script type="text/javascript">
var xmlHttp;
var xmlDoc;
loadXMLFile();
function loadXMLFile()
{
xmlHttp = new window.XMLHttpRequest();
xmlHttp.open("GET", "myFile.xml", true);
xmlHttp.onreadystatechange = StateChange;
xmlHttp.send(null);
}
function StateChange()
{
if ( xmlHttp.readyState == 4 )
{
xmlDoc = xmlHttp.responseXML;
processXML();
}
}
function processXML()
{
var firstNames = xmlDoc.querySelectorAll("name");
if (firstNames == null)
{
document.write("Oh poo. Query selector returned null.");
}
else
{
for (var i = 0; i < firstNames.length; i++)
{
document.write(firstNames[i].textContent + "<br>");
}
}
}
</script>
All the code in your page is parsed, but not executed before the page is completed. This happens, since you're calling document.write() from onreadystatechange event handler function rather than parsing time.
In this case document.write() implicitly calls document.open(), which wipes all the code out of the page, and only what is left is the text written by document.write(). Also document is left open, which causes the browser being "busy". This can be avoided by using document.close(), but it won't prevent the original content to vanish.
You need to add an element to the body and then use some "real" DOM manipulation method. Something like this:
<div id="qResult"></div>
Then instead of document.write():
document.getElementById('qResult').innerHTML = WHAT_EVER_NEEDED