We Keep Coding

JQuery XML POST request - Uncaught TypeError

I'm getting "Uncaught TypeError: Illegal invocation" message when sending XML request in Jquery (POST).
Can you please tell where am i doing wrong. any pointer on how to send XML request POST in jquery would be of great help
Code:
$( document ).ready(function() {
// SUBMIT FORM
$("#customerForm").submit(function(event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
ajaxPost();
});
function ajaxPost(){
// PREPARE FORM DATA
var text;
xmlRequest = "<?xml version=\"1.0\"?>"
+ "<a:InlandDBStructure xmlns:a=\"http://services./inlandpricinglocationretriever/v1\">"
+ "<a:geoids>" + "<a:hubgeoids>"
+ "<a:hubgeoid>12345</a:hubgeoid>"
+ "<a:effectivedt>12-12-2012</a:effectivedt>"
+ "<a:expirydt>12-03-2018</a:expirydt>" + "</a:hubgeoids>"
+ "</a:geoids>" + "</a:InlandDBStructure>";
if (window.DOMParser)
{
parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlRequest, "text/xml");
}
else // Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(xmlRequest);
console.log("here1: ", xmlDoc);
}
console.log("xmlDoc: ", xmlDoc);
console.log("hub: ", $("#hubgeoid").val());
// DO POST
$.ajax({
type : "POST",
contentType : "text/xml",
url : "isInlandPricingLocation",
data : xmlDoc,
dataType : 'xml',
success : function(result) {
if(result != ""){
}else{
}
console.log(result);
},
error : function(e) {
alert("Error!")
console.log("ERROR: ", e);
}
});
}
})
Thanks in advance

XMLHttpRequest with php will not work

I've been trying to get this solved for 2 weeks now and still have no success.
JavaScript:
var quotenum = 0;
var xmlhttp = null;
var rt = "";
function ChangeQuote() {
quotenum++;
xmlhttp = null;
//alert("quotenum= "+quotenum);
if (quotenum === 0) {
document.getElementById("quote").innerHTML = "";
return;
}
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 === XMLHttpRequest.DONE && xmlhttp.status === 200) {
rt = xmlhttp.responseText;
//alert("quote= "+rt);
alert("request number= " + xmlhttp.length);
document.getElementById("quote").innerHTML = rt;
}
};
xmlhttp.open("Get", "getquote.php?q=" + quotenum, false);
//xmlhttp.open("GET", "getquote.php?XDEBUG_SESSION_START=netbeans-xdebug&q=" + quotenum, false);
xmlhttp.send();
//var thediv = document.getElementById("quote");
return false;
}
PHP:
error_reporting(E_ERROR | E_PARSE);
$q="";
$q = intval($_GET['q']);
$link=mysqli_connect("localhost","root","sequence","babylon");
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$query="SELECT quotetext FROM quote where quotenum='".$q."'";
$show=mysqli_query($link,$query) or die ("Error");
while($row=mysqli_fetch_array($show)){
echo $row["quotetext"];
}
Can anyone see anything wrong with this?
Using WAMP I can see the correct result when I run the PHP file in a browser.
I also try to use Jquery instead.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var quotenum = 0;
// var xmlhttp = null;
// var rt = "";
function ChangeQuote() {
quotenum++;
$.ajax({
url: "getquote.php?q="+quotenum,
method: "get",
data: {
q: quotenum
}
}).done(function (data) {
alert(data);
document.getElementById("quote").innerHTML = data.quotetext;
});
return false;
}
</script>

The only noticable error I see is you inlining your js with the script tag that has a src attribute.
HTML 4.01 Specification:
The script may be defined within the
contents of the SCRIPT element or in
an external file. If the src attribute
is not set, user agents must interpret
the contents of the element as the
script. If the src has a URI value,
user agents must ignore the element's
contents and retrieve the script via
the URI.

Retrieve from database using PHP and pass to javascript as JSON

I am creating a weather widget using javascript . In this widget the user can select the town they wish to see and the widget will display outlook , min and max temperature without refreshing using ajax . I have stored the city information in a database and had written PHP script to retrieve the data and pass it to js as JSON object
<?php
/**************************
* code to connect to your database here
*/
$con = mysqli_connect("localhost", "user", "pass");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL:".mysqli_connect_error();
}
mysqli_select_db("weather", $con);
$town = $_GET['town'];
/***************************
*
* Query the DB for weather information for the given town.
*
* A PHP array object containing the weather data.
* Return a JSON encoded version of the array to the browser.
*
*/
$sql = "SELECT * from weather where town = $town";
$result = mysqli_query($sql);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
$arr = array(
"town" => $row[town],
"outlook" => $row[outlook],
"min_temp" => $row[min_temp],
"max_temp" => $row[max_temp]
);
}
echo json_encode($arr);
mysqli_close();
?>
And in js i want to show the weather only for selected town . How to parse the JSON object to get only the information of the town selected by the user . Like
if(jsondata == "sydney")
return "sydney information";
I did this using DOJO as
var data;
dojo.xhrGet({
// The URL to request
url: "PHP/weather.php?town=" + ntown,
sync: true,
handleAs: 'json',
// The method that handles the request's successful result
// Handle the response any way you'd like!
load: function(result) {
data = result;
}
});
return data;
}
However , i dont want to use dojo . how do i do that . Any suggestions ?

Suppose you have a select tag with id "town".
<select id="town" onchange="handler(this)"></select>
Now, for the Javascript part. You need to use XMLHttpRequest to make an ajax call.
function handler(elem){
var tname = elem.value;
var request_url = "PHP/weather.php?town=" + tname;
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Some error occured");
return false;
}
}
}
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 )
{
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
//Update your page here
}
}
http_request.open("GET", request_url);
http_request.send();
}

<body>
<div id="townInfo">
<div id="town"></div>
<div id="outlook"></div>
<div id="min_temp"></div>
<div id="max_temp"></div>
</div>
<script>
var town = document.getElementById('town');
var outlook = document.getElementById('outlook');
var min_temp = document.getElementById('min_temp');
var max_temp = document.getElementById('max_temp');
var data;
dojo.xhrGet({
// The URL to request
url: "PHP/weather.php?town=" + ntown,
sync: true,
handleAs: 'json',
load: function(result) {
data = result;
town.innerHtml = data['town'];
outlook.innerHtml = data['outlook'];
min_temp.innerHtml = data['min_temp'];
max_temp.innerHtml = data['max_temp'];
}
});
</script>
</body>
warning: not tested

Ajax call with javascript fails with internet explorer

OK here is my code which i am using to call a remote site for a list of data objects which i want to display on another site.
This works fine with Chrome and Firefox but throws error in IE "Permission denied"
I also added the request for Access-Control-Allow-Origin and headers but the issue persist in IE....
I can't use jQuery because the site on which I'll put this might not have jQuery. Does it have to something with cross domain request?
<script id= "sc1" type="text/javascript">
function ajaxRequest() {
var activexmodes = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
if (window.ActiveXObject) {
for (var i = 0; i < activexmodes.length; i++) {
try {
return new ActiveXObject(activexmodes[i])
} catch (e) {
}
}
} else if (window.XMLHttpRequest) return new XMLHttpRequest()
else return false;
}
var contentDiv = document.createElement("div");
contentDiv.id = 'contentJobsoid';
document.getElementById('sc1').parentNode.appendChild(contentDiv);
(function(){
var mygetrequest = new ajaxRequest()
if (mygetrequest.overrideMimeType) mygetrequest.overrideMimeType('text/html')
mygetrequest.onreadystatechange = function () {
if (mygetrequest.readyState == 4) {
if (mygetrequest.status == 200 || window.location.href.indexOf("http") == -1) {
var data = mygetrequest.responseText;
document.getElementById("contentJobsoid").innerHTML = data;
} else {
console.log("An error has occured making the request");
}
}
}
mygetrequest.open("GET", "http://www.demo.com/demo/dee0c7fe-867d-408d-a00f-d9bed4b169a7", true);
mygetrequest.send(null);
return false;
}());
</script> -->

I just passed the data from the server in form of string in the script src tag and it solved my problem very easily

reading .json file into javascript JSON object

I am testing whether i could read a item in a .json file into javascript JSON object and display the contents. I need to store the BIDs in the variable R1 array and display it
Code is as follows
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSON()
{
var data_file = "data1.json";
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 )
{
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
var R1 = new Array();
for(var i= 0 ; i< jsonObj.length; i++){
R1.push(jsonObj[i].BID);
document.write(R1);
}
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
</script>
</body>
</html>
AND my data1.json is as follows
[ { "BID" : "4569749", }, { "BID" : "466759", }, { "BID" : "4561149", }, ]

Yes we can load Json objects, As I did in one of my JSP project. here is the code so that you can easily understand.It is calling a servlet which prepare JSON file from the DB.
$('document').ready(function(){
$.ajax({
type: 'POST',
url: 'getCities',
success: function(data) {
var response = JSON.parse(data);
var products = response['city'];
var product_html = '';
$(products).each(function(index, value){
product_html += ""+value['name']+"";
});
product_html += "";
$("#citylist").html(product_html);
}
});
});
here 'getCities' is a servlet which prepare JSON file from Data fetched from Database. It is actually populating the dropdownlist related to particular counties.
One more thing I believe the json file is incorrect. Please check the format with some json validator.