We Keep Coding

Using a AJAX, how do I set the innerHTML of an element that is not yet loaded in the DOM?

There is a main-feed showing a list of blog post titles. When a title is clicked, I need to display the details of the blog post in a new html file. Below is my current code:
window.location.href = "/viewpost.html";
postID = this.id;
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("view-post-container").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "viewpost.php?q=" + postID, true);
xmlhttp.send();
The problem is, the element view-post-container, is in the file viewpost.html, and so I don't think the PHP file can access it. I would just display the data on the current page (index.php), but I wanted to have individual pages for each post so I can eventually learn how to have dynamic URL's for SEO and sharing purposes. The end goal is having dynamic urls, so maybe there is a better approach? Any help would is much appreciated. Thanks.

just try this, You have to put your code in on window.onload function
window.onload = function() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("view-post-container").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "viewpost.php?q=" + postID, true);
xmlhttp.send();
}

Difficulty in handling the ajax call

I have a problem in which I am calling a url through ajax, but I am having some problem in handling the response.
The url is returning the response, when I directly call it from the browser, but when I am using it in my ajax call I am having some problem in handling it.
I have used both the property(responseText and responseXML) of the XMLHTTPREQUEST object.
my code is::
function postRequest(strURL)
{
var xmlHttp;
if (window.XMLHttpRequest) // Mozilla, Safari, ...
{
var xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) // IE
{
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('GET', strURL, true);
xmlHttp.setRequestHeader('Content-Type', 'text/html; charset=ISO-8859-1');
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
alert("Status =4");
alert(xmlHttp.responseXML);
alert(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
The url is:: http://www.amazon.com/gp/aag/ajax/paginatedFeedback.html?seller=A3QGTRL0G4B98R&isAmazonFulfilled=&isCBA=&marketplaceID=ATVPDKIKX0DER&asin=&ref_=aag_m_fb&&currentPage=1
Please suggest anything.

I think that you can't make calls to another domain. You can read more about AJAX Cross-Domain in G

How to parse json from a url

I have a url contain all the json format.
http://api.musixmatch.com/ws/1.1/track.lyrics.get?apikey=d34fb59a16877bd1c540aa472491825b&track_id=12414632
function load() {
dashcode.setupParts();
var link = 'http://api.musixmatch.com/ws/1.1/track.search?apikey=d34fb59a16877bd1c540aa472491825b&q_track=back%20to%20december&page_size=10';
req.open = ("GET", link, false);
req.onreadystatechange = readXML();
req.send(null);
}
function readXML(){
alert(req.responseText);
}
this code keep saying null all the time.
Are there any way that i can retrieved those json text

The problem is with req.onreadystatechange = readXML();. You're assigning the result of the function instead of the function itself (as a callback).
You want req.onreadystatechange = readXML;. Though I must say I'm not sure how this code is supposed to work. Not in terms of how the XHR is made, nor with regards to the external domain.

Correct usage is as follows.You can check this link http://jsfiddle.net/UH4KY/1/ The link will alert undefined since cross domain scripting is not allowed .You can set the Access-Control-Allow-Origin and test the code.
function readXML(req) {
alert(req);
}
function load() {
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");
}
var link = 'http://api.musixmatch.com/ws/1.1/track.search?apikey=d34fb59a16877bd1c540aa472491825b&q_track=back%20to%20december&page_size=10';
//req.open = ("GET", link, false);
xmlhttp.onreadystatechange = function(){ alert(xmlhttp.responseText); }
xmlhttp.open("GET", link, false);
xmlhttp.send(null);
}

How do I POST multiple outputs with this ajax functions?

I have a function that send one output i.e. 'OPTIONS' as json using ajax. Now I need to POST multiple say two outputs. How do I modify this function so that I could POST two valiues.
Here is my ajax function.
function ADDLISITEM(form)
{
var options = form.txtInput.value;
options = JSON.stringify(options);
var url = "send_mysql.php"
var request = null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
request=new XMLHttpRequest();
}
else
{// code for IE6, IE5
request=new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("POST", url, true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.setRequestHeader("Connection", "close");
request.onreadystatechange = function(){
if (request.readyState == 4) {
if (request.status == 200) {
//alert('POST');
} else {
alert(request.status); // fails here
}
}
}
request.send("options=" + encodeURIComponent(options).replace(/%20/g, '+'));
}
</script>

Add another parameter to the request.send call like this:
var someOtherValue = JSON.stringify({actual : "data", goes : "here"});
request.send("options=" + encodeURIComponent(options).replace(/%20/g, '+') + "&someOtherValue=" + encodeURIComponent(someOtherValue).replace(/%20/g, '+'));

Post Method XMLHttpRequest Forces Login Dialog(IE issue)

We are running windows IIS 6 and use it's native ability to protect files with Windows Authentication as our login method.
It works fine, except that when I try to post method XMLHttpRequest from IE i get the login dialog again, which causes the request to fail.
The weird thing is that Mozilla and Safari work well.
Is there something I can do with the headers or something to make IIS recognize it as the same session, and not promt a re-login?
function ajaxQuery(method, url, params, asynchronous, readyFunction, is_done) {
if (asynchronous == null) {
asynchronous = true;
}
//alert("URL: "+url);
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) {
readyFunction(xmlhttp.responseText);
if (is_done) {
is_done("ok");
}
}
}
if (method.toLowerCase() == "get") {
url += "?" + params;
params = null;
}
debug = url;
xmlhttp.open(method, url, asynchronous);
if (method.toLowerCase() == "post") {
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
debug = params.length;
}
xmlhttp.send(params);
}

Check the response headers coming back. We had the same problem with an app that was (intentionally) returning a 401 code. IIS caught that code and added the WWW-Authenticate header which forces IE to display the login. We were able to fix it by returning 403 instead.