Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Friday, 19 April 2013

Parsing XML with JQuery

To parse an XML file with JQuery, you can follow these simple steps.

1. Obtain the xml using JQuery Ajax. There are two possible location where the xml file can be located. You have to make sure of your file path.
2. Parse the Ajax Response (your XML file) and append the data to your html code.

Suppose you have a XML file: (download here)

<student_list>
   <students>
     <student_id>2013001</student_id>
       <name>Clare Marie Ciriaco</name>
    </students>
    <students>
      <student_id>2013002</student_id>
        <name>Jane Doe</name>
   </students>
   <students>
     <student_id>2013003</student_id>
       <name>John Fitzgerald</name>
   </students>
</student_list>

To parse it,


OUTPUT:




Thursday, 11 October 2012

Javascript Tricks: Getting the full filepath in Mozilla FF and IE.

During our project, I stumbled upon a problem that seemed unsolveable. I was required to get the full path name:

C:\Documents and Settings\Clare\My Documents\test.jpg

My html code was:

<input id="uploadedFile" name="uploadedFile" type="file" onchange="readFile();">
<input type="hidden" value="" id="uploadFileName"/>

My Javascript/Jquery code:

function readFile() {
    var fullPath = $('#uploadedFile').val();   
    if (fullPath != null) {           
        alert(fullPath );
        $('#uploadFileName').val(fullPath ); //Transfer the file path to hidden field
    }

However, this only works with IE. And we mainly use Firefox. 

In firefox,
The output is: test.jpg
 Note: For security reasons, FF prevents the server to access local information.

In IE, 
The output is: C:\Documents and Settings\Clare\My Documents\test.jpg
which is correct.

I have been searching for the solution for almost 8 hours. I have tried using an applet but it didn't work(Probably done it the wrong way). Until I found this 100% working solution:

I forgot the website, but if you are the owner of this code, pls don't hesitate to send me a msg.

Complete html code: 
<input id="uploadedFile" name="uploadedFile" type="file" onchange="readFile(this);">
<input type="hidden" value="" id="uploadFileName"/>

Code: