Solved

Importing xml document in javascript and posting it to a url using an html webform

Posted on 2008-06-13
1
166 Views
Last Modified: 2008-06-26
I need to import an xml file in order do a positing to a url. I am using xmlhttp request. The only problem I am having is that I need to create an html page where the user is able to browse the xml file and execute the posting on-click of the "posting" button.

I have imported the file already but I do not know how to link it to the file that the user has browsed and to the click of the button.
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
 

    <title>Untitled Page</title>

    <script type="text/javascript">

        var xmlhttp;

        function loadXMLDoc(url) 

        {

            xmlhttp=null;

            if (window.XMLHttpRequest)// code for IE7, Firefox, Opera, etc.

            {

                xmlhttp=new XMLHttpRequest();

            }

            else if (window.ActiveXObject)// code for IE6, IE5

            {

                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

            }

            if (xmlhttp!=null)

            {

                xmlhttp.onreadystatechange=loadXML();

                xmlhttp.open("POST","http://yoursite.com/sample.xml",FALSE);

                xmlhttp.send();

                alert(xmlhttp.ResponseText);

               

            }

            else

            {

                alert("Your browser does not support XMLHTTP.");

            }

        }

    

        function loadXML()

        {

            var xmlDoc;

            if (window.ActiveXObject)//IE

            {

                xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

            }

            else if (document.implementation.createDocument)//FF

            { 

                xmlDoc=document.implementation.createDocument("","",null);

            }

            else

            {

                alert('Your browser cannot handle this script');

            }

            xmlDoc.async=false;

            xmlDoc.load("xmlorders.xml");

        }
 

      

    </script>

<tittle> <br> Post an Order </br> </tittle>

    

</head>

<body>

    <form id="form1" runat="server">

    <p>

    Please specify a file, or a set of files:<br>

    <input type="file" name="datafile" size="40">

    </p>

    <div>

    </div>

    </form>

</body>

</html>

Open in new window

0
Comment
Question by:suarezst
1 Comment
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 125 total points
ID: 21784938
Here is a simple example showing how to load and parse Xml File.

See the code in action at:

http://www.javascriptjournal.com/tutorials/createXmlTable.htm
<html>

<head>

<title>Example of Rendering XML Data into HTML Table -- #Pravin Asar#</title>

<style type="text/css">

Table { background-color: #EEEEFF;}

</style>

</head>

<body onload="importXML();">

<script language="javascript">

var xmlStr ="<?xml version=\"1.0\"?><root>" +

            "<dateTime><mydate>10/10/2007</mydate><mytime>03:56:38</mytime></dateTime>" +       

            "<dateTime><mydate>10/10/2007</mydate><mytime>03:56:38</mytime></dateTime>" + 

            "<dateTime><mydate>10/10/2007</mydate><mytime>03:56:38</mytime></dateTime>" + "</root>";
 

function importXML()

{

     if (document.implementation && document.implementation.createDocument)

     {

          xmlDoc = document.implementation.createDocument("", "", null);

          xmlDoc.onload = createTable;

     }

     else if (window.ActiveXObject)

     {

          xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

          xmlDoc.onreadystatechange = function () {if (xmlDoc.readyState == 4) createTable()};

      }

     else

     {

          alert('Your browser can\'t handle this script');

          return;

     }

     xmlDoc.load("books.xml");

     //xmlDoc.loadXML(xmlStr);

}
 

function DeleteTable() {    

    var table = document.getElementById('XmlTable'); 

    if (!table) { return; }

    if (table.parentNode != null) {

	  pNode = table.parentNode;

	  pNode.removeChild (table);

	  return;

	} 

    if (table != null)

    {  

		//alert ('Hello');

        var rows = table.rows;     

        while(rows.length){ // length=0 -> stop

          	table.deleteRow(rows.length-1); 

        }

    }

}

 

function createTable()

{

     var x = xmlDoc.getElementsByTagName('BOOK');

     //var x = xmlDoc.getElementsByTagName('root/dateTime');
 

    var tbl = document.getElementById('writeroot');

    DeleteTable('XmlTable');

     var newEl = document.createElement('TABLE');

     newEl.setAttribute ('id' , 'XmlTable');

     newEl.setAttribute('cellPadding',5);

     var tmp = document.createElement('TBODY');

     newEl.appendChild(tmp);

     var row = document.createElement('TR');

     for (j=0;j< x[0].childNodes.length;j++)

     {

          if (x[0].childNodes[j].nodeType != 1) continue;

          var container = document.createElement('TH');

          var theData = document.createTextNode(x[0].childNodes[j].nodeName);

          container.appendChild(theData);

          row.appendChild(container);

     }

     tmp.appendChild(row);

     for (i=0;i<x.length;i++)

     {

          var row = document.createElement('TR');

          for (j=0;j<x[i].childNodes.length;j++)

          {

               if (x[i].childNodes[j].nodeType != 1) continue;

               var container = document.createElement('TD');

               var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);

               container.appendChild(theData);

               row.appendChild(container);

          }

          tmp.appendChild(row);

     }

     document.getElementById('writeroot').appendChild(newEl);

}

function RecreateTable() {

	DeleteTable();

	createTable();  

}

</script>

<a href="#" onclick="DeleteTable(); return false;">Delete Table</a>

<a href="#" onclick="RecreateTable(); return false;">Recreate Table</a>

<div id="writeroot"></div>

<br>

<p>Contents of Books.xml</p>

<textarea rows="30" cols="60" style="font-size: 14px;">

<?xml version="1.0" encoding="UTF-8"?>

<COLLECTION>

  <BOOK>

    <TITLE>Book Title 1</TITLE>

    <AUTHOR>Author Name 1 </AUTHOR>

    <PUBLISHER>Publishing House 1</PUBLISHER>

  </BOOK>

  <BOOK>

    <TITLE>Book Title 2</TITLE>

    <AUTHOR>Author Name 2 </AUTHOR>

    <PUBLISHER>Publishing House 2</PUBLISHER>

  </BOOK>

  <BOOK>

    <TITLE>Book Title 3</TITLE>

    <AUTHOR>Author Name 3 </AUTHOR>

    <PUBLISHER>Publishing House 3</PUBLISHER>

  </BOOK>

  <BOOK>

    <TITLE>Book Title 4</TITLE>

    <AUTHOR>Author Name 4 </AUTHOR>

    <PUBLISHER>Publishing House 4</PUBLISHER>

  </BOOK>

  <BOOK>

    <TITLE>Book Title 5</TITLE>

    <AUTHOR>Author Name 5 </AUTHOR>

    <PUBLISHER>Publishing House 5</PUBLISHER>

  </BOOK>

</COLLECTION>

</textarea>

</pre>

</body>

</html>

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Online tools to transform xml to excel using xsl 1 31
JS Plugin 4 29
XSLT XML 4 12
How to set a countdown by not using the PC time in PHP 36 42
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

947 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now