load external xml file into js variable to be using jquery - javascript

I am trying to load an xml file containing config for a single page apps logic using jquery.
I can get the console to show the xml has been loaded and even display the xml in console but have yet to be able to get the xml to be declared as a string variable. I am using the following code
$.ajax({
type: "GET",
url: "dummy.xml",
dataType: "xml",
success: function (url) {
console.log('started function xml');
console.log(url);
// Parse the xml file and get data
parseXMLConfig;
}
});
I have a separate function to parse the xml using jquery which works if I declare the xml directly in the JavaScript but need to separate the xml and js for later development efforts.
Can anyone tell me how to set the js object to a variable for use elsewhere in scripts.

You can do something like this
$.ajax({
type: "GET",
url: "dummy.xml",
success: function (xmContent) {
console.log(xmContent);
xmlDoc = $.parseXML(xmContent),
$xml = $( xmlDoc ),
$title = $xml.find( "title" );
console.log($title );
}
});
For more detail refer DOC

Related

create document element from string

I'm trying to use Mozilla Readability stand-alone library for a personal project I am currently developing. The idea is to pass Mozilla Readability a document element and that after some parsing magic it returns the document's title, author, text, etc.
So, the first thing is dealing with how to get the HTML source of an external URL. I have dealt with that using an internal PHP file, which retrieves this external URL's source code.
After that, I call an AJAX GET to process the data returned by my PHP file. However, I am having lots of problems to convert this HTML source into an actual Javascript document element to pass to Mozilla Readability.
This is the code that I am currently using:
$('#btn_fetch').on('click', function() {
var url = 'https://www.rtl.be/info/monde/france/pierre-bellemare-s-est-eteint-a-88-ans-1025563.aspx';
$.ajax({
type: "GET",
url: 'fetchurl.php',
data: {
url: url
},
dataType: "html"
})
.done(function(data) {
var doc = document.implementation.createHTMLDocument("New Document");
// i don't know how to add "data" into "doc" element !
var article = new Readability(doc).parse();
alert(article.title);
})
.fail(function(xhr, ajaxOptions, thrownError) {
alert('Error:' . thrownError);
});
});
I just discovered it was actually very easy. The line I was missing was...
doc.body.parentElement.innerHTML = data;
it should be added here in the .done function
.done(function(data) {
var doc = document.implementation.createHTMLDocument("New Document");
// you need to add it here
doc.body.parentElement.innerHTML = data;
var article = new Readability(doc).parse();
alert(article.title);
})

script doesn't load after ajax response

I was trying to make an ajax call and show an html part inside a div class. For that i used the following way.
$.ajax({
type: "get",
url: "{{url('searchByCheckbox')}}",
dataType: 'html',
success: function(html)
{
$(".infinite-scroll").html(html)
}
});
But the problem is there is a script inside that html part which i wanted to load when i make first ajax call it's not loaded but for the second one it's loaded the script.
suppose the html response like this :
<script>
alert()
</script>
// html
How do i make it work?
I put the script above the html page which i'm getting as response.
(those who are marking the Question as duplicate should read at least what i want and what they wanted )
Im sure that the error is happening because of the script, because you are closing the </script> tag inside the html.
The best solution is to return the data from your ajax call as a json
To do that you should:
1- add a dataType to your ajax parameter as the below:
$.ajax({
type: "get",
dataType: "json",
2- In the php file handling the ajax call, you must resurn the values as a json as below:
Assume that currently you are doing the following:
echo $html
You should change it to match the below:
$retArr = array(
"html" => $html, //Your html code without the javascript function
"jsFunc" => $jsFunc //Your java script function parameters
) ;
echo json_encode($retArr) ;
And then your ajax success must be as the below:
success: function(data)
{ //You can access all the object parametes by calling the object name `data` followed by a dot `.` and then by the parameter key
data.jsFunc // Your javascript function params
$(".infinite-scroll").html(data.html) ;
}

Post an XML request to the URL using JavaScript

I have an API URL where I want to post the XML data. My API URL only accept XML. I am posting my XML to URL using ajax.
Here is my XML
<?xml version="1.0" encoding="UTF-8"?>
<data>
<lead>
<key>*****</key>
<id>*****</id>
<data6>Lead has been updated. merchant</data6>
</lead>
</data>
and my JavaScript code is:
<button type="button" onclick="loadXMLDoc()">Add Quote</button>
<script>
function loadXMLDoc() {
var data = "<data><lead><key>*****</key><id><?php echo $id; ?></id><data6>Lead has been updated. merchant</data6></lead></data>";
$.ajax({ type: "POST",
url: "https://inspire.flg360.co.uk/api/APILeadCreateUpdate.php",
data: data,
contentType: "text/xml",
dataType: "xml",
cache: false,
error: function() { alert("No data found."); },
success: function(xml) {
alert("it works");
alert($(xml).find("project")[0].attr("id"));
}
});
}
</script>
When I click the add quote button then it goes into error block of the ajax function. I have given the data posting URL and XML data in the code.
I assume you are using this snippet inside a wordpress template.
The first thing is, you should enclose all your codes with jQuery No Conflict
The reason why it does not do anything is $ is not being recognized. So, replace $ by jQuery and then your code will work properly.
Make sure you have declared the $id variable inside a PHP block right before the script.
I have ran it here
Hope it works!

How to read local xml file using $.ajax?

I am trying to build a Firefox extension for which I need to read local xml file but does not able to read file using $.ajax. My code is like below:
$.ajax({
type: "GET",
url: "file:///C:/Users/Mitul Gandhi/Desktop/Library_en.xml",
dataType: "xml",
success: function (xml) { }
});
Due to security reasons javascript ajax calls cannot read local file contents.
To read a local file in a Firefox addon you can use Components (file IO) like so:
function Read(file)
{
var ioService=Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var scriptableStream=Components
.classes["#mozilla.org/scriptableinputstream;1"]
.getService(Components.interfaces.nsIScriptableInputStream);
var channel=ioService.newChannel(file,null,null);
var input=channel.open();
scriptableStream.init(input);
var str=scriptableStream.read(input.available());
scriptableStream.close();
input.close();
return str;
}
var contents = Read("C:/Users/Mitul Gandhi/Desktop/Library_en.xml");

Filtering an XML file using $.ajax()

I'm querying a large (1000 nodes) XML file using the following code :
$.ajax({
type: "GET",
cache: false,
url: "someFile.xml",
dataType: "xml",
contentType: "text/xml",
success: function(xmlHttpRequest)
and the following XML structure :
<hospitals>
<hospital>
<id>1</id>
<name>H1</name>
<city>Riyadh</city>
<tel>1234567</tel>
<coordinates>27.034052,49.490662</coordinates>
</hospital>
</hospitals>
My question is : Is there a way to filter (based on city for example) the XML file in place without reading the whole file and then filtering it by myself ? I'm pretty sure there is a field in the above call the does the filtering but I cannot figure it out.
use parse XML like
var xml = "<hospitals>\
<hospital>\
<id>1</id>\
<name>H1</name>\
<city>Riyadh</city>\
<tel>1234567</tel>\
<coordinates>27.034052,49.490662</coordinates>\
</hospital>\
</hospitals>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find( "city" ).text();
if($title=='Riyadh')
alert($xml.find("tel").text());
http://jsfiddle.net/9JUNK/3/
or you can use dataFilter to filter the response and then process it in the success handler
dataFilter(data, type)Function
A function to be used to handle the raw response data of XMLHttpRequest.
This is a pre-filtering function to sanitize the response.
You should return the sanitized data. The function accepts two arguments:
The raw data returned from the server and the 'dataType' parameter.

Categories

Resources