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

javascript ajax not working properly

I have following javascript code
alert("");
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("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "lp.aspx", true);
xmlhttp.send();
And my server code is following
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["pb"] != null)
{
Response.Redirect("main.aspx");
}
}
The problem is when I concatinate query string with my javascript ajax request like following
xmlhttp.open("GET", "lp.aspx?pb=true", true);
It stops sending request to the server. I mean when I debug the page the page_load event is not firing.,
What can be the reason for this?

It was because the response.redirect was not working.
Removed it and instead used window.location in javascript

pass text box value from one page to another page without page refresh?

i have two text box i am trying to pass that textbox value from one page to another page with out page refresh i am using ajax for this but i am able to achive only one text box value
Here is my code
<script>
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("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "testing.php?message="+ document.getElementById("message").value+"service="+document.getElementById("city").value, true);
xmlhttp.send();
}
//return false;
</script>
i think i am wrong here in this line
xmlhttp.open("GET", "testing.php?message="+ document.getElementById("message").value+"service="+document.getElementById("city").value, true);
How can i achieve my goal
Any help will be apprecieted

Your query string pairs need to be seperated with an ampersand:
xmlhttp.open("GET", "testing.php?message="+ document.getElementById("message").value+"&service="+document.getElementById("city").value, true);
//Here -----^

sending multiple data in ajax post method in jsp

function getXmlHttpRequestObject()
{
var xmlHttp = false;
if (window.XMLHttpRequest)
{
return new XMLHttpRequest(); //To support the browsers IE7+, Firefox, Chrome, Opera, Safari
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP"); // For the browsers IE6, IE5
}
else
{
alert("Error due to old verion of browser upgrade your browser");
}
}
var xmlhttp = new getXmlHttpRequestObject(); //xmlhttp holds the ajax object
function servletPost()
{
if(xmlhttp)
{
var comp_to = document.getElementById("comp_to").value;
var comp_subject = document.getElementById("comp_subject").value;
var comp_letter = document.getElementById("comp_letter").value;
var date_time = document.getElementById("date_time").value;
if(comp_to==""||comp_subject==""||comp_letter==""||date_time=="")
{
document.getElementById("redSignal").style.display='block';
document.getElementById("redSignal").innerHTML="All Fields are necessary";
}
else
{
xmlhttp.open("POST","complaintHandler",true);
xmlhttp.onreadystatechange = handleServletPost;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var data_string="to="+comp_to+"&subject="+comp_subject+"&complaint="+comp_letter+"&date_time="+date_time;
xmlhttp.send(data_string);
}
}
}
function handleServletPost()
{
if (xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
document.getElementById("greenSignal").style.display='block';
document.getElementById("greenSignal").innerHTML=xmlhttp.responseText;
}
else
{
document.getElementById("redSignal").style.display='block';
document.getElementById("redSignal").innerHTML="Error Code ="+xmlhttp.status;
}
}
}
I am getting the problem of error code 404
What could be the problem in this code? Please help me.

Error 404 itself says that your URL is wrong .
xmlhttp.open("POST","complaintHandler-wrong",true);
check this URL 1st .

ERROR 404 Says. The requested Http request is not present or wrong.
Please check your "complaintHandler" It might be complaintHandler.jsp , kind of...
Please go through this tutorial for your future use.

Using JSON to parse xmlhttp.responseText for populating textboxes

How can JSON be used to parse xmlhttp.responseText? I can't seem to get textboxes populated using the parsed data. I tried using .value and .innerHTML with the dot notation with b.first and b.second used with json_encode from the loadTextBox.php file (see below), but the textboxes won't populate.
Main page code:
function loadDoc()
{
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
//code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var doc = window.document.createElement("doc");
var a = xmlhttp.responseText;
var b = JSON.parse(a);
document.getElementById("textbox").innerHTML=b.first;
document.getElementById("textbox2").innerHTML=b.second;
}
}
xmlhttp.open("GET","loadTextBox.php?id=4",true);
xmlhttp.send();
}
loadTextBox.php code:
<?php
---Placeholder for correct DB login info---
$result = $mysql->query("SELECT column_one FROM table_one");
while ($row = $result->fetch_object())
{
$queryResult[] = $row->present_tense;
}
$textboxValue = $queryResult[0];
$textboxValue2 = $queryResult[2];
echo json_encode(array('first'=>$textboxValue,'second'=>$textboxValue2));
?>

This is fully tested and works. Use as a starting point to accomplish what you are trying to do:
var url = "YOUR.php"
var ajax = new XMLHttpRequest();
ajax.open("GET", url, true);
ajax.send(null);
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && (ajax.status == 200)) {
console.log("ready")
var Data = JSON.parse(ajax.responseText);
console.log(Data);
console.log(Data.first);
} else {
console.log("not ready yet")
}
}
This assumes your JSON output is properly formatted as you stated:
{"first":"radim","second":"radi"}

I have figured out the underlying problem. Extra tags were being sent because I had unnecessary tags in my DB info file. Those tags were being sent in the responseText with {"first":"radim","second":"radi"}. So the code pertaining to ---Placeholder for correct DB login info--- was wrong. I also changed .innerHTML to .value and now it works as intended.
Main page code updated:
function loadDoc()
{
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var a = JSON.parse(xmlhttp.responseText);
document.getElementById("textbox").value=a.first;
document.getElementById("textbox2").value=a.second;
}
}
xmlhttp.open("GET","loadTextBox.php?id=4",true);
xmlhttp.send();
}