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

SCRIPT5: Access is denied for IE while requesting JSON data

I want to retrieve json data using ajax request in javascript. SO i wrote a reusable code like the following.
function ajaxRequest() {
var req;
this.ajax = function(params, url) {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest();
} else { // code for IE6, IE5
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("POST", url, true);
req.setRequestHeader('Access-Control-Allow-Headers', '*');
req.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
req.onreadystatechange = function() {
console.log('state\t' + req.readyState);
return req.responseText;
};
req.send(params);
}
}
How to retrieve data without changing Settings->Internet Options->Security->Custom Level and change security settings under "Miscellaneous" set "Access data sources across domains" to Enable.
For rest all browsers except IE its not working.

Request to external domain

I want to make a request to external domain,
parameter is sent correctely to php file (on external server)
but "request.responseText" allways empty,
thanks in advance (an example will be very apreciate)
<script type="text/javascript">
function get_XmlHttp() {
var xmlHttp = null;
if(window.XMLHttpRequest) { // for Forefox, IE7+, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // for Internet Explorer 5 or 6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function ajaxrequest() {
var request = get_XmlHttp(); // call the function for the XMLHttpRequest instance
var url = 'http://www.mydomain.fr/connexion.php?term=3334';
request.open("GET", url, true); // define the request
request.send(null); // sends data
request.onreadystatechange = function() {
if (request.readyState == 4) {
//response allways empty
document.getElementById("context").innerHTML = request.responseText;
}
}
}
window.onload = ajaxrequest();
</script>
<div id="context"></div>

by default you cannot just load data from another server, however if the server is configured to allow cross origin requests then you'll be good to go.
Take a read through the info here
http://www.html5rocks.com/en/tutorials/cors/

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

more than one ajax call in the same page?

I have the following code
function ajaxCall(action,parameters){
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//xmlhttp.overrideMimeType('text/html');
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var rtrv_data=xmlhttp.responseText;
alert(rtrv_data);
}
}
parameters='action=' + action + '&' + parameters;
xmlhttp.open("POST","ajax_calls.php" ,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", parameters.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(parameters);
}
Assuming that i have this function called by some timer , and a click on the page called the function again , i only get one output ! one response ! hwo can i get the 2 ?
thanky you .

The variable "xmlhttp" is a global (you used no "var") so this will never allow two simultaneous ajax calls because when the second call starts you will overwrite the same variable and that's the variable that's used inside the callback to retrieve the data.
You need to create a new variable each time to store the xml request object and also you need to use a closure for your completion callback... something like
var xmltthp = ... // this is a local variable
xmlhttp.onReadyStateChange = function() {
// here you can use xmlhttp even if it's a local
// it will be a different variable for each ajax request
}

Thanks! That worked for me! Did this:
function refreshpage(){
var mycode=document.getElementById("bcode").value;
if (window.XMLHttpRequest){
xmlhttpf=new XMLHttpRequest();
}else{
xmlhttpf=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpf.onreadystatechange=function(){
if (xmlhttpf.readyState==4 && xmlhttpf.status==200){
document.getElementById("zones").innerHTML=xmlhttpf.responseText;
}
}
xmlhttpf.open("GET","ajaxaki.php?code="+mycode,true);
xmlhttpf.send();
}
function refresh_vehs(){
var asma=document.getElementById("newasma").value;
if (window.XMLHttpRequest){
xmlhttpf_vehs=new XMLHttpRequest();
}else{
xmlhttpf_vehs=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpf_vehs.onreadystatechange=function(){
if (xmlhttpf_vehs.readyState==4 && xmlhttpf_vehs.status==200){
document.getElementById("vehicles").innerHTML=xmlhttpf_vehs.responseText;
}
}
xmlhttpf_vehs.open("GET","AJAX_vehicle_cards.php?asma="+asma,true);
xmlhttpf_vehs.send();
}