We Keep Coding

Parse AJAX HTML response and fetch object Nodelist and display as HTML

I am making some AJAX call in plain javascript that returns me a HTML.
In callback I can see response in HTML. I can parse response that contains [Object Nodelist]. Now in my HTML there is select list and I want to replace this select list with this updated Nodelist I received in ajax response. But the problem is it is nodelist and I want it to appear as . so that I can replace my original select list with ajax response.
MY CODE:
function loadFacility(callback)
{
//alert('In loadFacility');
var xmlhttp;
var keys=document.firstCallInformation.facilityselect.value;
var urls="http://localhost:8080/webfdms/showFirstCallInformation.do?vitalsId=366";
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)
{
//var some=xmlhttp.responseXML.documentElement;
var response = xmlhttp.responseText;
console.log(response)
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET",urls,true);
xmlhttp.send(null);
}
function loadFacilityCallback(response){
if(response != null){
//alert(response);
console.log(response);
var div = document.createElement("div");
div.innerHTML = response;
document.getElementById("facilityselect").innerHTML = div.querySelector("select#facilityselect");
}
}
Now here in the callback function(loadFacilityCallback) I am creating DIV element and parsing the response. But when I assign updated select list using div.querySelector("select#facilityselect") to the document.getElementById("facilityselect").innerHTML I can not see anything in my select list since it is [Object Nodelist]. Now how can I get my option values from nodelist.
Please help.

ajax code not responding on ie8 and ie9

function search_val() {
$("#company_code_nr1").click();
$("#poc").click();
$("#company_code_nr").click();
$("#subcompany_code_nr").click();
$("#cs_code_nr").click();
$("#invoice_id_nr").click();
$("#user_code_tx").click();
$("#owner_code_nr").click();
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
var str=$("#company_code_nr").val();
var str2=$("#subcompany_code_nr").val();
var str3=$("#product_code_nr").val();
var str4=$("#invoice_code_nr").val();
var url="hotkeydetail.php?f3="+str+"&c4="+str2+"&c6="+str3+"&c7="+str4;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
hi i am using code for getting content on another page every things is OK Mozilla and other browser also work on IE 10 . but not responding on ie8 and ie9. please help me. thanks

Use jQuery Ajax like this:
function search_val() {
$("#company_code_nr1").click();
$("#poc").click();
$("#company_code_nr").click();
$("#subcompany_code_nr").click();
$("#cs_code_nr").click();
$("#invoice_id_nr").click();
$("#user_code_tx").click();
$("#owner_code_nr").click();
var str=$("#company_code_nr").val();
var str2=$("#subcompany_code_nr").val();
var str3=$("#product_code_nr").val();
var str4=$("#invoice_code_nr").val();
$.ajax({
type: 'GET',
url: 'hotkeydetail.php',
data:{'f3':str,'c4':str2,'c6':str3,'c7':str4},
success: function(result){
$('#txtHint').html(result);
}
});
}

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

Username and Password in URL

I am trying to load an XML file that asks for a username and password.
The code I'm using is as follows that I am trying to send the username and password in the URL:
xmlhttp.open("POST","http://admin:admin#192.168.0.5/myfile.xml",false);
The full code of my page looks like this:
<html>
<body>
<textarea id="test1" name="test1" cols="90" rows="30">
XML file will be displayed here
</textarea><br>
<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.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("test1").value=xmlhttp.responseText;
} else
{
alert('Panel not communicating.Reason: '+xmlhttp.status);
}
}
xmlhttp.open("POST","http://admin:admin#192.168.0.5/myfile.xml",false);
xmlhttp.send();
</script>
</body>
</html>
Anyone know what I am doing wrong?

First, add this function to create the authorization header contents:
function make_base_auth(user, password)
{
var tok = user + ':' + pass;
var hash = Base64.encode(tok);
return "Basic " + hash;
}
Then, call the function and store the return value in a separate variable:
var auth = make_basic_auth('admin', 'admin');
Lastly, pass the value of auth to the XMLHttpRequest object:
xmlhttp.setRequestHeader('Authorization', auth);
xmlhttp.send();
Attribution: http://coderseye.com/2007/how-to-do-http-basic-auth-in-ajax.html

I ended up getting it working by doing the following:
Change:
xmlhttp.open("POST","http://admin:admin#192.168.0.5/myfile.xml",false);
To:
xmlhttp.open("POST","http://admin:admin#192.168.0.5/myfile.xml",false,"username","password");

See this question for a similar scenario. How to use Basic Auth with jQuery and AJAX? Note one answer states that IE does not support credentials in a URL (as you are attempting to do).

ajax call failed to execute while calling a rest webservice

Hi i tried to call a rest webservice from ajax get request.
Following is the code i tried for that.
function callRestService(){
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");
}
$.ajax({
xmlhttp.open("GET","http://mywebservice/test/",false);
xmlhttp.send();
alert(xmlhttp.responseText);
});
}
And following error am getting while running this code/
missing : after property id
[Break On This Error]
xmlhttp.open("GET","http://mywebservice/test..
/AjaxC...ervice/ (line 30, col 13)
In the first case i tried something like following
$.ajax({
type: "GET",
url: "http://mywebservice/test/",
cache: false,
success: function(data){
alert(data);
//var obj = eval(data);
},
error: function (msg, url, line) {
alert('error trapped in error: function(msg, url, line)');
alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);
}
});
and in the above case control comes into the error block, but i didn't get what's the reason for that .and that's why i tried the first case.
Is there any problem with this code..??Can anyone help in this.?

Your code is all wrong.
Assuming that$.ajax is jQuery ajax call, then Your code should look like this:
function CallRestService() {
$.ajax({url:'http://mywebservice/test'}).done(function(data) {
alert(data);
})
);
}
You don't need to create xml http request if you're using jquery ajax call.
See this: http://api.jquery.com/jQuery.ajax
for reference.
If you don't want to use jQuery:
function callRestService(){
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.open("GET","http://mywebservice/test/",false);
xmlhttp.send();
if (xmlhttp.status == "200") {
alert(xmlhttp.responseText);
}
}
Reference here: Using XMLHttpRequest
If you are using cross domain calls, see here:
jQuery AJAX cross domain